script.js

document.addEventListener("DOMContentLoaded", function () {
    let timer=60;
    let hitval;
    let score=0;

    function make_Bubble(){
    
    let pbtm = document.querySelector("#panelbottom");

    let container = "";
    console.log("JS connected");

    for (let i = 0; i < 102; i++) {
        let rn = Math.floor(Math.random() * 10 + 1);
        container += `<div class="bubble">${rn}</div>`;
    }

    pbtm.innerHTML = container;

    }

    function set_Timer(){
        let interval=setInterval(function(){
            if(timer>0){
                timer--;
                document.querySelector('#timer').textContent=timer;
            }
            else{
                clearInterval(interval);
                document.querySelector("#panelbottom").innerHTML=`<h1 class="over">GAME OVER</br>SCORE= ${score}</h1>`
            }
        },1000);
    }

    function new_Hit(){
        hitval=Math.floor(Math.random()*10+1);
        document.querySelector("#hit").textContent=hitval;
    }

    function inc_Score(){
        score+=10;
        document.querySelector('#score').textContent=score;
    }

    function dec_Score(){
        score-=5;
        document.querySelector('#score').textContent=score;
    }

    function game(){
            document.querySelector('#panelbottom').addEventListener('click',(e)=>{
            let val=Number(e.target.textContent)
            if(val===hitval){
                inc_Score();
                make_Bubble();
                new_Hit();
            }
            else{
                dec_Score();
                make_Bubble();
                new_Hit();
            }
            }) 
    }
    make_Bubble();
    set_Timer();
    new_Hit();
    game();
});