Nivedita-coder · Oct 5, 2020 · Oct 5, 2020
diff --git a/Tap Music/README.md b/Tap Music/README.md
@@ -0,0 +1,3 @@
+
+### Link to my Website:-
+https://tapmusic-ash.netlify.app/
diff --git a/Tap Music/app.js b/Tap Music/app.js
@@ -0,0 +1,36 @@
+window.addEventListener('load', () => {
+    const sounds = document.querySelectorAll('.sound');
+    const pads = document.querySelectorAll('.pads div');
+    const visual = document.querySelector('.visual');
+    const colors = [
+        '#60d394',
+        '#d36060',
+        '#c060d3',
+        '#d3d160',
+        '#606bd3',
+        '#60c2d3'
+    ];
+
+    // Lets get going with the sound her
+    pads.forEach((pad, index) => {
+        pad.addEventListener('click', function () {
+            sounds[index].currentTime = 0;
+            sounds[index].play();
+
+            createBubbles(index);
+        });
+    });
+
+    // Create a function that makes bubbles
+    const createBubbles = (index) => {
+        const bubble = document.createElement('div');
+        visual.appendChild(bubble);
+        bubble.style.backgroundColor = colors[index];
+        bubble.style.animation = 'jump 1s ease-in-out';
+
+        bubble.addEventListener('animationend', function () {
+            visual.removeChild(this);
+        })
+    }
+})
+
diff --git a/Tap Music/index.html b/Tap Music/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+    <title>Tap Music</title>
+</head>
+
+<body>
+    <div class="app">
+        <header>
+            <h1>Tap Music</h1>
+            <p>Make music with only one tap</p>
+        </header>
+
+        <div class="visual">
+
+        </div>
+        <div class="pads">
+            <div class="pad1">
+                <audio class="sound" src="./sounds/bubbles.mp3"></audio>
+            </div>
+            <div class="pad2">
+                <audio class="sound" src="./sounds/clay.mp3"></audio>
+            </div>
+            <div class="pad3">
+                <audio class="sound" src="./sounds/confetti.mp3"></audio>
+            </div>
+            <div class="pad4">
+                <audio class="sound" src="./sounds/glimmer.mp3"></audio>
+            </div>
+            <div class="pad5">
+                <audio class="sound" src="./sounds/moon.mp3"></audio>
+            </div>
+            <div class="pad6">
+                <audio class="sound" src="./sounds/ufo.mp3"></audio>
+            </div>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+
+</html>
diff --git a/Tap Music/sounds/bubbles.mp3 b/Tap Music/sounds/bubbles.mp3
diff --git a/Tap Music/sounds/clay.mp3 b/Tap Music/sounds/clay.mp3
diff --git a/Tap Music/sounds/confetti.mp3 b/Tap Music/sounds/confetti.mp3
diff --git a/Tap Music/sounds/glimmer.mp3 b/Tap Music/sounds/glimmer.mp3
diff --git a/Tap Music/sounds/moon.mp3 b/Tap Music/sounds/moon.mp3
diff --git a/Tap Music/sounds/ufo.mp3 b/Tap Music/sounds/ufo.mp3
diff --git a/Tap Music/style.css b/Tap Music/style.css
@@ -0,0 +1,87 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Montserrat', sans-serif;
+}
+
+.app {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+header h1 {
+    margin: 50px 0px 30px 0px;
+    text-align: center;
+    font-size: 40px;
+}
+
+header p {
+    font-size: 20px;
+}
+
+.pads {
+    background: lightblue;
+    width: 100%;
+    display: flex;
+}
+
+.pads div {
+    height: 100px;
+    width: 100px;
+    flex: 1;
+}
+
+.pad1 {
+    background: #60d394;
+}
+
+.pad2 {
+    background: #d36060;
+}
+
+.pad3 {
+    background: #c060d3;
+}
+
+.pad4 {
+    background: #d3d160;
+}
+
+.pad5 {
+    background: #6860d3;
+}
+
+.pad6 {
+    background: #60b2d3;
+}
+
+@keyframes jump {
+    0% {
+        bottom: 0%;
+        left: 20%;
+    }
+    50% {
+        bottom: 50%;
+        left: 50%;
+    }
+    100% {
+        bottom: 0%;
+        left: 80%;
+    }
+}
+
+.visual div {
+    position: absolute;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    bottom: 0%;
+    z-index: -1;
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@

		### Link to my Website:-
		https://tapmusic-ash.netlify.app/