JavaScript Guessing Game version 2

Guessing Game version 2 - 

Please use the following code structure to create a SECOND version of this classic 'guessing game'. Once you get this to run correctly you will describe the differences between the two renditions (as a developer comment in version 2). See main site for rest of assignment details! 

Please use the following coding structure to remake the classic....what improvements can you spot? :) 

<h1>Ultimate Number Guessing Game</h1>

<style>

  body { font-family: sans-serif; text-align: center; }

  .flash { animation: flash 0.4s; }

  .shake { animation: shake 0.3s; }

  @keyframes flash {

    0% { background: #8f8; }

    100% { background: white; }

  }

  @keyframes shake {

    0% { transform: translateX(-5px); }

    25% { transform: translateX(5px); }

    50% { transform: translateX(-5px); }

    75% { transform: translateX(5px); }

    100% { transform: translateX(0); }

  }

</style>

<p>High Score: <span id="highScore">0</span></p>

<button id="startGame">Start Game</button>

<div class="gameArea" style="display:none;">

  <p id="timer">Time: 60</p>

  <p id="score">Score: 0</p>

  <p id="rangeInfo"></p>

  <input type="number" id="guessField">

  <button id="guessSubmit">Guess</button>

  <p class="feedback"></p>

  <p class="heat"></p>

</div>

<script>

let minRange = 1;

let maxRange = 100;

let randomNumber;

let guessCount;

let maxGuesses = 7;

let timeLeft;

let timerInterval;

let score = 0;

const startBtn = document.getElementById("startGame");

const gameArea = document.querySelector(".gameArea");

const guessField = document.getElementById("guessField");

const guessSubmit = document.getElementById("guessSubmit");

const feedback = document.querySelector(".feedback");

const heat = document.querySelector(".heat");

const timerDisplay = document.getElementById("timer");

const scoreDisplay = document.getElementById("score");

const highScoreDisplay = document.getElementById("highScore");

const rangeInfo = document.getElementById("rangeInfo");

highScoreDisplay.textContent = localStorage.getItem("highScore") || 0;

startBtn.addEventListener("click", startGame);

guessSubmit.addEventListener("click", checkGuess);

guessField.addEventListener("keydown", e => {

  if (e.key === "Enter") checkGuess();

});

function startGame() {

  randomNumber = Math.floor(Math.random() * (maxRange - minRange + 1)) + minRange;

  guessCount = 0;

  timeLeft = 60;

  score = 0;

  gameArea.style.display = "block";

  feedback.textContent = "";

  heat.textContent = "";

  rangeInfo.textContent = `Guess between ${minRange} and ${maxRange}`;

  scoreDisplay.textContent = "Score: 0";

  guessField.disabled = false;

  guessSubmit.disabled = false;

  guessField.value = "";

  guessField.focus();

  startTimer();

}

function startTimer() {

  clearInterval(timerInterval);

  timerDisplay.textContent = "Time: " + timeLeft;

  timerInterval = setInterval(() => {

    timeLeft--;

    timerDisplay.textContent = "Time: " + timeLeft;

    if (timeLeft <= 0) endGame(false);

  }, 1000);

}

function checkGuess() {

  const guess = Number(guessField.value);

  if (!guess) return;

  guessCount++;

  let distance = Math.abs(randomNumber - guess);

  updateHeat(distance);

  if (guess === randomNumber) {

    playSound("win");

    feedback.textContent = "Correct!";

    feedback.classList.add("flash");

    calculateScore();

    endGame(true);

  } else if (guessCount >= maxGuesses) {

    playSound("lose");

    feedback.textContent = "Game Over! Number was " + randomNumber;

    feedback.classList.add("shake");

    endGame(false);

  } else {

    playSound("wrong");

    feedback.textContent = guess < randomNumber ? "Too low!" : "Too high!";

    feedback.classList.add("shake");

  }

  setTimeout(() => {

    feedback.classList.remove("flash", "shake");

  }, 300);

  guessField.value = "";

  guessField.focus();

}

function updateHeat(distance) {

  if (distance === 0) heat.textContent = " PERFECT!";

  else if (distance <= 5) heat.textContent = " Very Hot!";

  else if (distance <= 15) heat.textContent = " Warm";

  else heat.textContent = "❄️ Cold";

}

function calculateScore() {

  score = (maxGuesses - guessCount) * 20 + timeLeft;

  scoreDisplay.textContent = "Score: " + score;

  let highScore = localStorage.getItem("highScore") || 0;

  if (score > highScore) {

    localStorage.setItem("highScore", score);

    highScoreDisplay.textContent = score;

  }

  // Adaptive difficulty

  if (guessCount <= 3) {

    maxRange += 50;

  }

}

function endGame(won) {

  clearInterval(timerInterval);

  guessField.disabled = true;

  guessSubmit.disabled = true;

  const restartBtn = document.createElement("button");

  restartBtn.textContent = "Play Again";

  document.body.appendChild(restartBtn);

  restartBtn.onclick = () => {

    restartBtn.remove();

    gameArea.style.display = "none";

  };

}

function playSound(type) {

  let sound;

  if (type === "win") sound = new Audio("https://actions.google.com/sounds/v1/cartoon/clang_and_wobble.ogg");

  if (type === "wrong") sound = new Audio("https://actions.google.com/sounds/v1/cartoon/wood_plank_flicks.ogg");

  if (type === "lose") sound = new Audio("https://actions.google.com/sounds/v1/cartoon/boing.ogg");

  sound.play();

}

</script>