Website update

secret/mineSweeper/counter.js

@@ -0,0 +1,14 @@
+'use strict'
+
+document.addEventListener('DOMContentLoaded', () => {
+    const bombsSlider = document.getElementById('bombs');
+    const bombsValue = document.getElementById('bombsValue');
+
+    // Update the displayed number of bombs when the slider value changes
+    bombsSlider.addEventListener('input', () => {
+        bombsValue.textContent = bombsSlider.value;
+    });
+
+    // Initialize the displayed value on page load
+    bombsValue.textContent = bombsSlider.value;
+});

secret/mineSweeper/index.html

@@ -29,6 +29,7 @@
         value="20"
         aria-label="Number of Bombs"
       />
+      <span id="bombsValue">20</span>
 
       <button id="startGame">Start Game</button>
     </div>
@@ -38,5 +39,6 @@
     </div>
 
     <script src="script.js"></script>
+    <script src="counter.js"></script>
   </body>
 </html>

secret/mineSweeper/styles.css

@@ -45,7 +45,8 @@ label {
 }
 
 input[type="number"],
-input[type="range"] {
+input[type="range"],
+span {
     padding: 12px;
     margin-bottom: 20px;
     width: 100%;