Skip to content

Commit ecc4478

Browse files
ayushseth07ayushseth07
authored
DRUM added (#128)
* DRUM added * added drum readme * added image in readme * added project description * updated readme.md * updated readme.md2 * Update README.md
1 parent ac3d61f commit ecc4478

18 files changed

+366
-0
lines changed

‎DRUM/README.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<h1>DRUM KIT</h1>
2+
3+
<p>Basic Drum Kit made using HTML, CSS, and JavaScript .</p>
4+
5+
### DRUM :
6+
7+
<p>This web app allows you to make your own music with all the beats that are present in the app. You can click on the alphabets or the images that are present on the screen and enjoy the beats. You can also use your keyboard keys to make the music.</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Start Using The DRUM
29+
30+
<h3>ScreenShots</h3>
31+
<br>
32+
33+
![drum](images/drumkit.PNG)

‎DRUM/app.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
window.addEventListener('load', () => {
2+
const sounds = document.querySelectorAll('.sound');
3+
const pads = document.querySelectorAll('.pads div');
4+
const kit = document.querySelector('.kit');
5+
6+
pads.forEach((pad, index) => {
7+
pad.addEventListener('click', function() {
8+
sounds[index].currentTime = 0;
9+
sounds[index].play();
10+
});
11+
});
12+
13+
//the drum can be played with the keys A.S,D,J,K,L
14+
document.addEventListener("keydown", function(event) {
15+
makeSound(event.key);
16+
buttonAnimation(event.key);
17+
});
18+
19+
function makeSound(key) {
20+
switch (key) {
21+
case 'a':
22+
var closed_hithat = new Audio('sounds/sound1.mp3');
23+
closed_hithat.play();
24+
break;
25+
case 's':
26+
var kick = new Audio('sounds/sound3.mp3');
27+
kick.play();
28+
break;
29+
case 'd':
30+
var clap = new Audio('sounds/sound4.mp3');
31+
clap.play();
32+
break;
33+
case 'j':
34+
var open_hithat = new Audio('sounds/sound5.mp3');
35+
open_hithat.play();
36+
break;
37+
case 'k':
38+
var snare = new Audio('sounds/sound6.mp3');
39+
snare.play();
40+
break;
41+
case 'l':
42+
var crash = new Audio('sounds/sound2.mp3');
43+
crash.play();
44+
break;
45+
}
46+
}
47+
48+
49+
function buttonAnimation(currentKey) {
50+
var activeButton = document.querySelector("." + currentKey);
51+
activeButton.classList.add("pressed");
52+
setTimeout(function() {
53+
activeButton.classList.remove("pressed");
54+
}, 100);
55+
};
56+
});

‎DRUM/images/band.jpg

5.46 MB
Loading

‎DRUM/images/clap.png

3.12 KB
Loading

‎DRUM/images/closed-hihat.png

853 Bytes
Loading

‎DRUM/images/crash.png

1.11 KB
Loading

‎DRUM/images/drumkit.PNG

97.9 KB
Loading

‎DRUM/images/kick.png

3.16 KB
Loading

‎DRUM/images/open-hihat.png

864 Bytes
Loading

‎DRUM/images/snare.png

2.9 KB
Loading

‎DRUM/index.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width">
6+
<title></title>
7+
<link rel="stylesheet" href="style.css">
8+
<!---Fontawsome link-->
9+
<link href="https://fonts.googleapis.com/css2?family=Otomanopee+One&display=swap" rel="stylesheet">
10+
</head>
11+
<body>
12+
<div class="app">
13+
<div class="header">
14+
<h1>DRUM KIT</h1>
15+
<p class="band-tagline">Drummig is my therapy!</p>
16+
</div>
17+
18+
<div class="kit"></div>
19+
<div class="pads">
20+
<div class="pad-1 a">
21+
<center>
22+
<img src="images\closed-hihat.png">
23+
<p class="keyboard-keys">A</p>
24+
</center>
25+
26+
<audio class="sound" src="sounds\sound1.mp3"></audio>
27+
</div>
28+
<div class="pad-3 s">
29+
<center>
30+
<img src="images\kick.png">
31+
<p class="keyboard-keys">S</p>
32+
</center>
33+
<audio class="sound" src="sounds\sound3.mp3"></audio>
34+
</div>
35+
<div class="pad-4 d">
36+
<center>
37+
<img src="images\clap.png">
38+
<p class="keyboard-keys">D</p>
39+
</center>
40+
<audio class="sound" src="sounds\sound4.mp3"></audio>
41+
</div>
42+
<div class="pad-5 j">
43+
<center>
44+
<img src="images\open-hihat.png">
45+
<p class="keyboard-keys">J</p>
46+
</center>
47+
<audio class="sound" src="sounds\sound5.mp3"></audio>
48+
</div>
49+
<div class="pad-6 k">
50+
<center>
51+
<img src="images\snare.png">
52+
<p class="keyboard-keys">K</p>
53+
</center>
54+
<audio class="sound" src="sounds\sound6.mp3"></audio>
55+
</div>
56+
<div class="pad-2 l">
57+
<center>
58+
<img src="images\crash.png">
59+
<p class="keyboard-keys">L</p>
60+
</center>
61+
<audio class="sound" src="sounds\sound2.mp3"></audio>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<script src="app.js"></script>
67+
</body>
68+
</html>

‎DRUM/sounds/sound1.mp3

27.4 KB
Binary file not shown.

‎DRUM/sounds/sound2.mp3

37.2 KB
Binary file not shown.

‎DRUM/sounds/sound3.mp3

27.8 KB
Binary file not shown.

‎DRUM/sounds/sound4.mp3

26.6 KB
Binary file not shown.

‎DRUM/sounds/sound5.mp3

29.8 KB
Binary file not shown.

‎DRUM/sounds/sound6.mp3

32.7 KB
Binary file not shown.

‎DRUM/style.css

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Otomanopee One', sans-serif;
9+
padding-top: 50px;
10+
background-color: black;
11+
overflow-x: hidden !important;
12+
overflow-y: hidden !important;
13+
}
14+
15+
.app {
16+
display: flex;
17+
justify-content: space-evenly;
18+
align-items: center;
19+
flex-direction: column;
20+
}
21+
22+
.header {
23+
display: flex;
24+
flex-direction: column;
25+
}
26+
27+
.pressed {
28+
box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
29+
transform: scale(1.02);
30+
}
31+
32+
.header h1 {
33+
text-align: center;
34+
font-size: 4rem;
35+
letter-spacing: 0.25rem;
36+
font-weight: 900;
37+
color: white;
38+
font-family: 'Otomanopee One', sans-serif;
39+
}
40+
41+
.band-tagline {
42+
text-align: center;
43+
font-size: 25px;
44+
color: grey;
45+
margin-top: 10px;
46+
font-family: 'Otomanopee One', sans-serif;
47+
}
48+
49+
.keyboard-keys {
50+
font-size: 3rem;
51+
position: relative;
52+
top: -25px;
53+
font-family: cursive;
54+
color: white;
55+
text-shadow: 2px 2px 2px grey;
56+
}
57+
58+
.pads {
59+
width: 90vw;
60+
display: flex;
61+
flex-wrap: wrap;
62+
box-sizing: border-box;
63+
justify-content: center;
64+
}
65+
66+
.pads>div {
67+
height: 170px;
68+
width: 170px;
69+
border-radius: 30px;
70+
margin: 10px;
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
transition: 0.2s;
75+
border-radius: 20px;
76+
}
77+
78+
.pads>div img {
79+
width: 100px;
80+
height: 100px;
81+
margin-bottom: 15px;
82+
padding-top: 15px;
83+
}
84+
85+
.pad-1 {
86+
background-color: green;
87+
}
88+
89+
.pad-2 {
90+
background-color: blue;
91+
}
92+
93+
.pad-3 {
94+
background-color: red;
95+
}
96+
97+
.pad-4 {
98+
background-color: orange;
99+
}
100+
101+
.pad-5 {
102+
background-color: purple;
103+
}
104+
105+
.pad-6 {
106+
background-color: pink;
107+
}
108+
109+
.pads>div:hover {
110+
cursor: pointer;
111+
box-shadow: white 0px 1px 4px, white 0px 0px 0px 3px;
112+
transform: scale(1.02);
113+
}
114+
115+
.kit>div {
116+
position: absolute;
117+
width: 50px;
118+
height: 50px;
119+
border-radius: 50%;
120+
bottom: 0%;
121+
left: 20%;
122+
z-index: -1;
123+
}
124+
125+
@keyframes jump {
126+
0% {
127+
left: 20%;
128+
bottom: 0px;
129+
}
130+
131+
50% {
132+
bottom: 50%;
133+
left: 50%;
134+
}
135+
136+
100% {
137+
left: 80%;
138+
bottom: 0%;
139+
}
140+
}
141+
142+
@media (min-width: 1020px) and (max-width:1190px) {
143+
.pads>div {
144+
margin: 0.5rem;
145+
}
146+
147+
@keyframes jump {
148+
0% {
149+
left: 20%;
150+
bottom: 0px;
151+
}
152+
153+
50% {
154+
bottom: 60%;
155+
left: 50%;
156+
}
157+
158+
100% {
159+
left: 80%;
160+
bottom: 0%;
161+
}
162+
}
163+
}
164+
165+
@media only screen and (max-width:600px) {
166+
.pads>div {
167+
width: 150px;
168+
height: 150px;
169+
margin: 0.8rem;
170+
}
171+
172+
.pads>div img {
173+
width: 100px;
174+
height: 100px;
175+
}
176+
177+
.keyboard-keys {
178+
font-size: 2rem;
179+
top: -20px;
180+
}
181+
182+
.header {
183+
display: flex;
184+
justify-content: space-evenly;
185+
}
186+
}
187+
188+
@media only screen and (max-width:440px) {
189+
.pads>div {
190+
width: 100px;
191+
;
192+
height: 100px;
193+
margin: 0.7rem;
194+
}
195+
196+
.pads>div img {
197+
width: 70px;
198+
height: 70px;
199+
}
200+
201+
.keyboard-keys {
202+
font-size: 1.5rem;
203+
top: -20px;
204+
}
205+
206+
.header p {
207+
font-size: 1rem;
208+
}
209+
}

0 commit comments

Comments
 (0)