//HINT: ONLY EDIT THE SPIN() AND STOP() FUNCTIONS

// globals
const spinningElem = document.getElementById("spinning");
const targetElem = document.getElementById("targetNum");
const result = document.getElementById("result");
const button = document.getElementById("buttonPressed");
let intervalId;
let pushed = false;
let targetInt;

// event listener
button.addEventListener("click", stop);

// set the targetInt
function setTargetInt() {
  targetInt = Math.floor(Math.random() * 101);
  targetElem.innerHTML = targetInt;
}

// start spinning
function spin() {
  intervalId = setInterval(() => {
    const currentValue = parseInt(spinningElem.textContent, 10) || 0;
    spinningElem.textContent = currentValue + 1;
  }, 50);
}

// stop the spinning
function stop(evt) {
  clearInterval(intervalId);

  const result = document.getElementById("result");
  const currentValue = parseInt(spinningElem.textContent, 10);

  if (currentValue !== targetInt) {
    result.textContent = `You were off by ${targetInt - currentValue}`;
    result.style.color = "red";
  } else {
    result.textContent = "Well done!";
    result.style.color = "black";
  }
}

// main
setTargetInt();
spin();