app.js

let gameSeq = [];
let userSeq = [];
let btns = ["red","yellow", "green", "purple"]; //For Step2
let level = 0;
let started = false;
//Access the h2 heading for step 2
let h2 = document.querySelector("h2");

//Step1:-
document.addEventListener("keypress",function(){
    if(started == false){
        console.log("Game Started");
        started = true;

        levelUp();
    }
});

//Create the function for Button Flash in Step2:-

function btnFlash(btn){
    btn.classList.add("flash");
    setTimeout(function(){
        btn.classList.remove("flash");
    },250);
}
//Step2:-
function levelUp(){
    userSeq = [];
    level++;
    h2.innerText = `Level ${level}`;

    //Flashing Random Button
    let randIdx = Math.floor(Math.random()*4);
    let randColor = btns[randIdx];
    let randBtn = document.querySelector(`.${randColor}`);
    gameSeq.push(randColor);
    console.log(gameSeq);
    btnFlash(randBtn);

}

//Step3:-
function btnPress(){
    console.log(this);
    let btn = this;
    btnFlash(btn);
    let userColor = btn.getAttribute("id");
    userSeq.push(userColor);
    checkAns(userSeq.length-1);
}

let allBtns = document.querySelectorAll(".btn");
for(btn of allBtns){
    btn.addEventListener("click",btnPress);
}

//Step4:-
function checkAns(idx){
    // console.log("curr level : ", level);
    if(userSeq[idx] === gameSeq[idx]){
        if(userSeq.length == gameSeq.length){
           setTimeout(levelUp, 1000);
        }
    }
    else{
        h2.innerHTML = `Game Over! Your score was <b> ${level} </b> <br> press any key to start`;
        document.querySelector("body").style.backgroundColor = "red";
        setTimeout(function (){
            document.querySelector("body").style.backgroundColor = "white";
        }, 150);
        restart();
    }
}

function restart(){
    started = false;
    gameSeq = [];
    userSeq = [];
    level = 0;
}