text: 'use strict';
  
  let secretNumber = Math.trunc(Math.random() * 20) + 1;
  let score = 20;
  let highScore = 0;
  
  const displayMessage = function (message) {
    document.querySelector('.message').textContent = message;
  };
  
  const displayNumber = function (secretNum, widthNum) {
    document.querySelector('.number').textContent = secretNum;
    document.querySelector('.number').style.width = widthNum;
  };
  
  const displayBodyBGColor = function (bgColor) {
    document.querySelector('body').style.backgroundColor = bgColor;
  };
  
  const displayScore = function (score) {
    document.querySelector('.score').textContent = score;
  };
  
  // Start play
  document.querySelector('.check').addEventListener('click', function () {
    const guess = Number(document.querySelector('.guess').value);
  
    // When there is no input
    if (!guess) {
      displayMessage('⛔ No Number!');
  
      // When player wins
    } else if (guess === secretNumber) {
      displayNumber(secretNumber, '30rem');
      displayMessage('🎉 Correct Number!');
      displayBodyBGColor('#60b347');
  
      if (score > highScore) {
        highScore = score;
        document.querySelector('.highscore').textContent = highScore;
      }
  
      // When guess is wrong
    } else if (guess !== secretNumber) {
      if (score > 1) {
        const isHighOrLow = guess > secretNumber ? '📈 Too High!' : '📉 Too Low!';
        displayMessage(isHighOrLow);
  
        score--;
        displayScore(score);
      } else {
        displayMessage('🎇 You Lost the Game!');
        displayScore(0);
      }
    }
  });
  
  // Reset the game
  document.querySelector('.again').addEventListener('click', function () {
    score = 20;
    secretNumber = Math.trunc(Math.random() * 20) + 1;
  
    document.querySelector('.guess').value = '';
  
    displayBodyBGColor('#222');
    displayNumber('?', '15rem');
    displayMessage('Start guessing...');
    displayScore(score);
  });
  