script.js

'use strict';
/*
- Make a handle function to send the input ✅
- Change text when the user make an input ✅
- Correct Number should be hidden and then appear when the guess is correct 
- Reduce score when bad guessing ✅
- "Again" button should work and restart page ✅
*/

//STARTS - Variable declarations
function querySele(tag) {
  return document.querySelector(tag);
}
//CONST
const scoreClass = querySele('.score');
const messageClass = querySele('.message');
const numberClass = querySele('.number');
const guessClass = querySele('.guess');
const bodyTag = querySele('body');
const checkButton = querySele('.check');

//LET
let realNumber = Math.floor(Math.random() * 20 + 1);
let score = 20;
let maxScore = 0;
guessClass.value = 1;
//ENDS - Variable declarations

//STARTS - Open/Close Modal Function
querySele('.how-to').addEventListener('click', function () {
  querySele('.modal').showModal();
});

querySele('.close').addEventListener('click', function () {
  querySele('.modal').close();
});
//ENDS - Open/Close Modal Function

//You Lose Function
function noPointsLeft() {
  switchInteractions();
  bodyTag.style.backgroundColor = '#573032';
  scoreClass.textContent = score;
  querySele('h1').textContent = 'You Lose!! 😭🪦';
  messageClass.textContent = '🥲 No more tries left...';
  numberClass.textContent = realNumber;
}

//Disable and enable input + button function
function switchInteractions(on) {
  if (on) {
    querySele('.check').disabled = false;
    guessClass.disabled = false;
  } else {
    querySele('.check').disabled = true;
    guessClass.disabled = true;
  }
}

//Main Interaction For Check
querySele('.check').addEventListener('click', function () {
  const userInput = parseInt(guessClass.value);

  if (userInput < 1) {
    score--;
    messageClass.textContent = 'Only numbers from 1 to 20';
    scoreClass.textContent = score;
    guessClass.value = 1;
  } else if (userInput > 20) {
    score--;
    messageClass.textContent = 'Only numbers from 1 to 20';
    scoreClass.textContent = score;
    guessClass.value = 20;
  } else {
    if (userInput === realNumber) {
      querySele('h1').textContent = 'You Win!!';
      messageClass.textContent = '🥳🎉 Correct Number!!';
      numberClass.textContent = realNumber;
      numberClass.style.width = '300px';
      bodyTag.style.backgroundColor = '#47B265';
      if (maxScore < score) {
        maxScore = score;
        querySele('.highscore').textContent = maxScore;
      }
      switchInteractions();
    } else if (userInput > realNumber) {
      messageClass.textContent = 'Too High!';
      score--;
      scoreClass.textContent = score;
    } else if (userInput < realNumber) {
      messageClass.textContent = 'Too Low!';
      score--;
      scoreClass.textContent = score;
    }
  }

  if (score === 0) {
    noPointsLeft();
  }
});

//Again Button
querySele('.again').addEventListener('click', function () {
  realNumber = Math.floor(Math.random() * 20 + 1);
  numberClass.textContent = realNumber;
  score = 20;
  scoreClass.textContent = score;
  querySele('h1').textContent = 'Guess My Number!';
  messageClass.textContent = 'Start guessing...';
  guessClass.value = 1;
  querySele('body').style.backgroundColor = '#222';
  numberClass.textContent = '?';
  numberClass.style.width = '15rem';
  switchInteractions(true);
});