adding tempo

Author: devbyali

app.js

@@ -13,6 +13,7 @@ class DrumKit {
         this.isPlaying = null;
         this.selects = document.querySelectorAll("select");
         this.muteBtn = document.querySelectorAll(".mute");
+        this.tempoSlider = document.querySelector(".tempo-slider");
     }
     activePad() {
         this.classList.toggle("active");
@@ -111,6 +112,19 @@ class DrumKit {
             }
         }
     }
+    changeTempo(e) {
+        const tempoText = document.querySelector(".tempo-nr");
+        tempoText.innerText = e.target.value;
+    }
+    updateTempo(e) {
+        this.bpm = e.target.value;
+        clearInterval(this.isPlaying);
+        this.isPlaying = null;
+        const playBtn = document.querySelector(".play");
+        if (playBtn.classList.contains("active")) {
+            this.start();
+        }
+    }
 }
 const drumKit = new DrumKit();
 
@@ -136,3 +150,9 @@ drumKit.muteBtn.forEach((btn) => {
         drumKit.mute(e);
     });
 });
+drumKit.tempoSlider.addEventListener("input", (e) => {
+    drumKit.changeTempo(e);
+});
+drumKit.tempoSlider.addEventListener("change", (e) => {
+    drumKit.updateTempo(e);
+});

index.html

@@ -81,6 +81,10 @@ <h1>HiHat</h1>
             </div>
         </div>
         <button class="play">Play</button>
+        <div class="tempo">
+            <input type="range" class="tempo-slider" max="100" min="0" value="50">
+            <p>Tempo: <span class="tempo-nr">50</span></p>
+        </div>
     </div>
     <audio class="kick-sound" src="./sounds/kick-classic.wav"></audio>
     <audio class="snare-sound" src="./sounds/snare-acoustic01.wav"></audio>

style.css

@@ -20,6 +20,7 @@ svg {
     height: 5rem;
     margin: 1rem 0.5rem;
     cursor: pointer;
+    border-radius: 3px;
 }
 
 .kick-pad {
@@ -61,7 +62,7 @@ svg {
     align-items: center;
     width: 70%;
     justify-content: space-between;
-    margin-top: 5rem;
+    margin-top: 2rem;
 }
 
 .kick,
@@ -102,7 +103,7 @@ svg {
     border: none;
     cursor: pointer;
     margin-top: 3rem;
-    border-radius: 3px;
+    border-radius: 1rem;
 }
 
 select {
@@ -115,6 +116,30 @@ select {
     color: white;
 }
 
+.tempo {
+    margin: 3rem;
+    width: 30%;
+}
+
+.tempo-slider {
+    padding: 0.1rem;
+    -webkit-appearance: none;
+    margin: 1rem 0;
+    width: 100%;
+    position: relative;
+    background: rgb(88, 88, 88);
+    border-radius: 1rem;
+    border: none;
+    outline: none;
+    cursor: pointer;
+}
+
+.tempo p {
+    font-size: 1.5rem;
+    margin: 0.5rem;
+    text-align: center;
+}
+
 @keyframes playTrack {
     from {
         transform: scale(1);