app.js

let game_seq = [];
let user_seq = [];
let start = false;
let level = 0;
let btns = ["cornflowerblue", "goldenrod", "rosybrown", "greenyellow"];
let h2 = document.querySelector("h2");

document.addEventListener("keypress", function()
{
    if (start == false)
    {
      start = true;
      level_up(); 
    }
})

function btn_flash(btn)
{
   btn.classList.add("flash");
   setTimeout(function(){btn.classList.remove("flash")}, 200);
}

function level_up()
{
    level++;
    user_seq = [];
    h2.innerText = `Level ${level}`;
    let random_index = Math.floor(Math.random()*4);
    let random_color = btns[random_index];
    let random_btn = document.querySelector(`.${random_color}`);
    game_seq.push(random_color);
    btn_flash(random_btn); 
}

function btn_press()
{
    btn_flash(this);
    let user_color = this.getAttribute("id");
    user_seq.push(user_color);
    check_seq(user_seq.length - 1);
}

function check_seq(index)
{
   if(game_seq[index] === user_seq[index])
   {
    if(user_seq.length == game_seq.length)
    {
       setTimeout(level_up, 750);
    }
   }
   else
   {
    h2.innerText = `GAME OVER 
    Your score: ${level - 1} 
    'CTRL + R' to restart`
    let body = document.querySelector("body");

   }
}

let all_btns = document.querySelectorAll(".btns");
for(btn of all_btns)
{
    btn.addEventListener("click", btn_press);
}