I need help understanding this async stopwatch

[Nebula (247 Relaxing - Sounds)]

am currently on the async setInterval task about creating a stopwatch and I don’t understand how to start the time, update the time, and how do I make use of that startTime variable or am I getting the hints wrong.

` const start = document.querySelector(".start");
  const stopBtn = document.querySelector(".stop");
  const reset = document.querySelector(".reset");

  // disabled button before pressing start
  reset.disabled = true;
  stopBtn.disabled = true;

  // according to instruction 3 and 4
  let secInHour = 3600;
  let secInMinute = secInHour / 60;
  let secs = 60;

  // i dont know how to update the time
  function displayTime() {
    let startTime = Date.now();
    let millis = Date.now() - startTime;

    // i think this is what hint 4 wants
    let sec = 0;
    let minute = 0;
    let hour = 0;
    let i = 0;
    while (i < 10) {
      document.querySelector(".clock").textContent = `${millis}${hour}:${millis}${minute}:${millis}${sec}`;
      i++
    }

    if(sec == secs) {
      minute += 1;
    }
  }

  // once start is click it becomes unclickable while others become clickable
  function startTime() {
    start.disabled = true;
    reset.disabled = false;
    stopBtn.disabled = false;
  }

  function resetTime() {
    stopBtn.disabled = true;
    reset.disabled = true;
    start.disabled = false;
    document.querySelector(".clock").textContent = "00:00:00";
    clearInterval(createClock);
  }

  function stopTime() {
    start.disabled = true;
    stopBtn.disabled = true;
    reset.disabled = false;
    clearInterval(createClock);
  }

  start.addEventListener("click", startTime);
  stopBtn.addEventListener("click", stopTime);
  reset.addEventListener("click", resetTime);

  displayTime();
  const createClock = setInterval(displayTime, 1000);`

https://codepen.io/Aqua7/pen/vYJPyMY

[mikoMK (Michael Koch)]

Hello @Nebula

This is a pretty tricky task. I’ll try to give you some explanations to get you further in this exercise:

• startTime should go outside the displayTime() function and given 0 as a value (to distinguish it from the real time when the stop watch has started).
• We also want to declare the interval variable as let at the beginning: let createClock; (We need let because we want to be able to “start”, “reset” and “start” again)
• When the “start” button is clicked you set the startTime with startTime = Date.now(); and start the interval with createClock = setInterval(displayTime, 1000); inside the click handler.

Let’s see where we are now: We have our startTime variable which is 0 when loading the page (or after pressing the “Reset” button). When pressing the “Start” button this variable gets set to a big number (the start time in milliseconds). Now we can work on the displayTime() function.

• First we have to check if the stop watch hasn’t been started yet: if (startTime === 0). If this is true we set hours, minutes and seconds to 0
• If it is false we do the calculations for the time that has passed:
  • To make it easier we first calculate the seconds since the stop watch has been started: let secondCount = Math.floor((Date.now() - startTime) / 1000);
  • As an example the minutes calculation (the most complicated one):

    let minutes = Math.floor((secondCount % 3600) / 60);
    

    This looks scary By using the remainder operator (%) we get rid of all those whole hours (3600 seconds) and divide the remaining seconds by 60 to get the minutes. Since this will mostly get us as floating-point number we round it down to the nearest integer with Math.floor().
  • Try doing the calculations for hours and seconds by yourself. Those are easier than this one.

I think this is enough for the moment I hope those hints are more or less understandable and will help you get further in this challenging task.

Feel free to ask more questions and don’t get discouraged. I think if you are finally able to understand and complete this task you will have made a huge step forward in understanding JavaScript.

Happy coding!
Michael