Skip to content

Commit 91c8b80

Browse files
Nivedita-coderNivedita-coder
authored
Merge pull request Nivedita-coder#30 from ahmedashfaq027/main
Added Tap Music
2 parents 4eb500b + fc08b63 commit 91c8b80

10 files changed

Lines changed: 174 additions & 0 deletions

File tree

‎Tap Music/README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
2+
### Link to my Website:-
3+
https://tapmusic-ash.netlify.app/

‎Tap Music/app.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
window.addEventListener('load', () => {
2+
const sounds = document.querySelectorAll('.sound');
3+
const pads = document.querySelectorAll('.pads div');
4+
const visual = document.querySelector('.visual');
5+
const colors = [
6+
'#60d394',
7+
'#d36060',
8+
'#c060d3',
9+
'#d3d160',
10+
'#606bd3',
11+
'#60c2d3'
12+
];
13+
14+
// Lets get going with the sound her
15+
pads.forEach((pad, index) => {
16+
pad.addEventListener('click', function () {
17+
sounds[index].currentTime = 0;
18+
sounds[index].play();
19+
20+
createBubbles(index);
21+
});
22+
});
23+
24+
// Create a function that makes bubbles
25+
const createBubbles = (index) => {
26+
const bubble = document.createElement('div');
27+
visual.appendChild(bubble);
28+
bubble.style.backgroundColor = colors[index];
29+
bubble.style.animation = 'jump 1s ease-in-out';
30+
31+
bubble.addEventListener('animationend', function () {
32+
visual.removeChild(this);
33+
})
34+
}
35+
})
36+

‎Tap Music/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="./style.css">
10+
<title>Tap Music</title>
11+
</head>
12+
13+
<body>
14+
<div class="app">
15+
<header>
16+
<h1>Tap Music</h1>
17+
<p>Make music with only one tap</p>
18+
</header>
19+
20+
<div class="visual">
21+
22+
</div>
23+
<div class="pads">
24+
<div class="pad1">
25+
<audio class="sound" src="./sounds/bubbles.mp3"></audio>
26+
</div>
27+
<div class="pad2">
28+
<audio class="sound" src="./sounds/clay.mp3"></audio>
29+
</div>
30+
<div class="pad3">
31+
<audio class="sound" src="./sounds/confetti.mp3"></audio>
32+
</div>
33+
<div class="pad4">
34+
<audio class="sound" src="./sounds/glimmer.mp3"></audio>
35+
</div>
36+
<div class="pad5">
37+
<audio class="sound" src="./sounds/moon.mp3"></audio>
38+
</div>
39+
<div class="pad6">
40+
<audio class="sound" src="./sounds/ufo.mp3"></audio>
41+
</div>
42+
</div>
43+
</div>
44+
45+
<script src="app.js"></script>
46+
</body>
47+
48+
</html>

‎Tap Music/sounds/bubbles.mp3‎

42 KB
Binary file not shown.

‎Tap Music/sounds/clay.mp3‎

42 KB
Binary file not shown.

‎Tap Music/sounds/confetti.mp3‎

42 KB
Binary file not shown.

‎Tap Music/sounds/glimmer.mp3‎

42 KB
Binary file not shown.

‎Tap Music/sounds/moon.mp3‎

26.2 KB
Binary file not shown.

‎Tap Music/sounds/ufo.mp3‎

30.8 KB
Binary file not shown.

‎Tap Music/style.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: 'Montserrat', sans-serif;
9+
}
10+
11+
.app {
12+
height: 100vh;
13+
display: flex;
14+
flex-direction: column;
15+
justify-content: space-between;
16+
align-items: center;
17+
}
18+
19+
header h1 {
20+
margin: 50px 0px 30px 0px;
21+
text-align: center;
22+
font-size: 40px;
23+
}
24+
25+
header p {
26+
font-size: 20px;
27+
}
28+
29+
.pads {
30+
background: lightblue;
31+
width: 100%;
32+
display: flex;
33+
}
34+
35+
.pads div {
36+
height: 100px;
37+
width: 100px;
38+
flex: 1;
39+
}
40+
41+
.pad1 {
42+
background: #60d394;
43+
}
44+
45+
.pad2 {
46+
background: #d36060;
47+
}
48+
49+
.pad3 {
50+
background: #c060d3;
51+
}
52+
53+
.pad4 {
54+
background: #d3d160;
55+
}
56+
57+
.pad5 {
58+
background: #6860d3;
59+
}
60+
61+
.pad6 {
62+
background: #60b2d3;
63+
}
64+
65+
@keyframes jump {
66+
0% {
67+
bottom: 0%;
68+
left: 20%;
69+
}
70+
50% {
71+
bottom: 50%;
72+
left: 50%;
73+
}
74+
100% {
75+
bottom: 0%;
76+
left: 80%;
77+
}
78+
}
79+
80+
.visual div {
81+
position: absolute;
82+
height: 50px;
83+
width: 50px;
84+
border-radius: 50%;
85+
bottom: 0%;
86+
z-index: -1;
87+
}

0 commit comments

Comments
 (0)