Skip to content

Commit 5f7983a

Browse files
nisha331nisha331
authored
Added tabla
1 parent 6b16598 commit 5f7983a

File tree

10 files changed

+133
-0
lines changed

10 files changed

+133
-0
lines changed

‎tabla/img/tap1.png

56.5 KB
Loading

‎tabla/img/tap2.png

63 KB
Loading

‎tabla/img/tap3.jpg

17.9 KB
Loading

‎tabla/img/tap4.jpg

18.4 KB
Loading

‎tabla/img/tap5.jpg

14.8 KB
Loading

‎tabla/index.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
* {
2+
padding: 10px;
3+
margin: 10px;
4+
box-sizing: border-box;
5+
}
6+
7+
html{
8+
scroll-behavior: smooth;
9+
}
10+
11+
::-webkit-scrollbar-track {
12+
-webkit-box-shadow: inset 0 0 6px rgba(238, 234, 234, 0.205);
13+
background-color: #1d1c1c;
14+
border-radius: 10px;
15+
}
16+
17+
::-webkit-scrollbar {
18+
width: 10px;
19+
background-color: #1d1c1c;
20+
}
21+
22+
::-webkit-scrollbar-thumb {
23+
border-radius: 10px;
24+
background-color: #fff;
25+
background-image: -webkit-gradient( linear, 40% 0%, 75% 84%, from(#96a9b4), to(#6c6c70), color-stop(0.6,#898b8f ));
26+
}
27+
28+
body {
29+
font-family: 'Space Grotesk', sans-serif;
30+
background-color: black;
31+
}
32+
33+
#title {
34+
margin: 5px 0px 0px 0px;
35+
text-align: center;
36+
font-size: 3.5rem;
37+
letter-spacing: 0.25rem;
38+
font-weight: 900;
39+
color: white;
40+
}
41+
p{
42+
margin-top: 0;
43+
text-align: center;
44+
font-size: 1rem;
45+
color: #67db39
46+
}
47+
48+
.set {
49+
margin-top: 0%;
50+
margin-left: 30%;
51+
}
52+
53+
.t {
54+
background-image: url("img/tap1.png");
55+
}
56+
57+
.d {
58+
background-image: url("img/tap2.png");
59+
}
60+
61+
.u {
62+
background-image: url("img/tap3.jpg");
63+
}
64+
65+
.w {
66+
background-image: url("img/tap4.jpg");
67+
}
68+
69+
.y {
70+
background-image: url("img/tap5.jpg");
71+
}
72+
73+
.tabla {
74+
display: inline-block;
75+
width: 270px;
76+
height: 250px;
77+
align-self: center;
78+
box-shadow: none;
79+
background-color: black;
80+
background-repeat: no-repeat;
81+
border: black;
82+
}
83+
84+
button {
85+
border: none;
86+
border-radius: 20px;
87+
cursor: pointer;
88+
}

‎tabla/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Tabla</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="index.css">
9+
</head>
10+
11+
<body>
12+
<h1 id="title"> TABLA </h1>
13+
<p>Click on any images to listen tabla beats</p>
14+
15+
<div class="set">
16+
<button class="t tabla">t</button>
17+
<button class="d tabla">d</button>
18+
</div>
19+
<script src="index.js"></script>
20+
</body>
21+
22+
</html>

‎tabla/index.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
document.querySelector(".t").addEventListener("click",function (){
3+
var audio=new Audio("sound/t.mp3");
4+
audio.play();
5+
})
6+
document.querySelector(".d").addEventListener("click",function (){
7+
var audio=new Audio("sound/d.mp3");
8+
audio.play();
9+
})
10+
11+
var audioa = new Audio("sound/t.mp3");
12+
var audiob = new Audio("sound/d.mp3");
13+
14+
window.addEventListener("keydown", checkKeyPress, false);
15+
16+
function checkKeyPress(key) {
17+
if (key.keyCode == "84") {
18+
audioa.play();
19+
}
20+
if(key.keyCode == "68"){
21+
audiob.play();
22+
}
23+
}

‎tabla/sound/d.mp3

34.5 KB
Binary file not shown.

‎tabla/sound/t.mp3

34.9 KB
Binary file not shown.

0 commit comments

Comments
 (0)