Bubble Game uploaded

Author: Kirttinath

bubble.css

@@ -61,6 +61,8 @@ html,body {
 
 #pbtm {
     display: flex;
+    justify-content: center;
+    align-items: center;
     flex-wrap: wrap;
     gap: 10px;
     padding: 20px;

bubble.html

@@ -13,23 +13,19 @@
         <div id="ptop">
             <div class="elem">
                 <h2>Hit</h2>
-                <div class="box">5</div>
+                <div id="hitbub" class="box"></div>
             </div>
             <div class="elem">
                 <h2>Score</h2>
-                <div class="box">25</div>
+                <div id="scoreval" class="box">0</div>
             </div>
             <div class="elem">
                 <h2>Timer</h2>
-                <div class="box">60</div>
+                <div id="timer" class="box">60</div>
             </div>
         </div>
         <div id="pbtm">
-            <div class="bubble">5</div>
-            <div class="bubble">3</div>            
-            <div class="bubble">2</div>            
-            <div class="bubble">1</div>            
-            <div class="bubble">0</div>            
+                     
         </div>
        </div> 
     </div>

bubble.js

@@ -0,0 +1,51 @@
+var timer = 60;
+var score = 0;
+var bub =0;
+function scoreincrease() {
+    score += 10;
+    document.querySelector("#scoreval").textContent = score;
+}
+
+function makeBubbles() {
+    var clutter = "";
+    for (var i = 1; i <= 152; i++) {
+        var val = Math.floor(Math.random() * 10);
+        clutter += ` <div class="bubble">${val}</div> `;
+    }
+    document.querySelector("#pbtm").innerHTML = clutter;
+}
+
+function setTimer() {
+    var clrtm = setInterval(function () {
+        if (timer > 0) {
+            timer--;
+            document.querySelector("#timer").textContent = timer;
+        }
+        else {
+            clearInterval(clrtm);
+            document.querySelector("#pbtm").innerHTML = `<h1>GAME OVER</h1>`;
+        }
+    }, 1000)
+}
+
+
+function hitbubble() {
+     bub = Math.floor(Math.random() * 10);
+    document.querySelector("#hitbub").textContent = bub;
+}
+
+document.querySelector("#pbtm")
+.addEventListener("click", function (details) {
+  var values = Number(details.target.textContent);
+  if(bub === values)
+  {
+    scoreincrease();
+    makeBubbles();
+    hitbubble();
+  }
+});
+
+
+hitbubble();
+setTimer();
+makeBubbles();