add a sound bar

css/tower.css

@@ -83,3 +83,17 @@ body {
   margin-right: 42.5%;
   margin-left: 42.5%;
 }
+.sound-bar {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.sound-bar label {
+  margin-right: 10px;
+  font-size: 14px;
+}
+
+#volume-control {
+  width: 100px;
+}

html/tower.html

@@ -37,6 +37,10 @@ <h2>what do you want to do next?</h2>
       </button>
       <h2>Would you like to play music?</h2>
       <button  class="btn-agree link">yes!!!</button>
+      <div class="sound-bar">
+        <label for="volume-control">Volume:</label>
+        <input type="range" id="volume-control" min="0" max="1" step="0.1" value="0.5" />
+      </div>
     </div>
 
     <footer class="game-score">

js/tower.js

@@ -621,4 +621,20 @@ function gradientAnimation() {
 
 function displayScore(){
   document.querySelector('#score-span').innerHTML = gameState.score;
-}
+}
+document.querySelector('.btn-close').addEventListener('click', () => {
+  modalMusicAgreement.hide();
+});
+
+document.querySelector('.btn-agree').addEventListener('click', () => {
+  modalMusicAgreement.hide();
+  music.isPlayMusic = true;
+  music.background.volume = 0.5; // Set default volume
+  music.background.play();
+});
+
+const volumeControl = document.getElementById('volume-control');
+volumeControl.addEventListener('input', (event) => {
+  const volume = event.target.value;
+  music.background.volume = volume; // Adjust the music volume
+});