script.js

const containerEL = document.querySelector(".container");
const playAgain = document.querySelector(".play_again");
const hideNum = document.querySelector(".hide_num");
const message = document.querySelector(".message");
const inputNum = document.querySelector(".input_number");
const checkBtn = document.querySelector(".btn_check");
const scoreEL = document.querySelector(".score");
const highScoreEL = document.querySelector(".high_score");

let minvalue = 1;
let maxValue = 20;
let score = 20;
let highScore = 0;
let attempts = 0;
let answer = Math.floor(Math.random() * (maxValue - minvalue + 1));
console.log(answer);

checkBtn.addEventListener("click", () => {
  const number = Number(inputNum.value);

  if (number) {
    if (number != answer) {
      attempts++;
      if (score > 1) {
        score--;
        scoreEL.innerHTML = `${score}`;

        message.textContent =
          number > answer ? "Too High!Try Again...." : "Too Low!Try Again....";
        scoreEL.innerHTML = ` ${score}`;

        inputNum.value = "";
      } else {
        message.textContent = `You've lost the game`;
        containerEL.style.backgroundColor = "#fff";
        scoreEL.textContent = 0;
      }
    } else {
      message.textContent = `Congratulations! You Won it took you ${attempts} attempts :)`;
      hideNum.textContent = answer;
      hideNum.style.transition = "all 0.5s ease-in";
      hideNum.style.width = "50%";
      containerEL.style.backgroundColor = "#e0d8d3";
    }
  } else {
    message.textContent = `Please add a number :)`;
  }
});

playAgain.addEventListener("click", () => {
  score = 20;
  scoreEL.innerHTML = `Score: ${score}`;
  answer = Math.floor(Math.random() * (maxValue - minvalue + 1));
  hideNum.style.width = "25%";
  hideNum.textContent = "?";
  hideNum.style.transition = "all 0.5s ease-in";
  message.textContent = `Start Guessing........`;
  inputNum.value = "";
  containerEL.style.backgroundColor = "#f4f1ee";
});