Timer isn't dealing with seconds properly

June 2, 2023

Whenever I change the minutes on the timer it works perfectly, but when I change the seconds on the timer, no matter what, it instantly stops. I’m not sure what I’m doing wrong. This program is apart of a codepen exercise. When I had the timer on a countdown setting it worked perfectly, but when I changed it to countup it stopped working for the seconds.

window.addEventListener('DOMContentLoaded', documentLoaded, false);

var startTime;
var limit;
var timer;

function documentLoaded() {
  "use strict";

  var timerElement = document.getElementById("timer");
  timerElement.addEventListener("keydown", function (event) {
    if (event.key === 'Enter') {
      event.preventDefault();
      startTimer();
      timerElement.blur();
    }
  });
}

function startTimer() {
  startTime = new Date();
  limit = parseInt(document.getElementById("timer").innerHTML);

  clearInterval(timer);
  timer = setInterval(updateTime, 1000);
}

function updateTime() {
  var currentTime = new Date();
  var elapsed = (currentTime.getTime() - startTime.getTime()) / 1000;

  var minutes = Math.floor(elapsed / 60);
  var seconds = Math.floor(elapsed % 60);

  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  document.getElementById("timer").innerHTML = minutes + ":" + seconds;

  var totalSeconds = minutes * 60 + seconds;
  if (totalSeconds >= limit * 60) {
    document.getElementById("timer").classList.add("red");
    clearInterval(timer); // Stop the timer
  } else {
    document.getElementById("timer").classList.remove("red");
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#timer-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #0781D4;
  display: flex;
  justify-content: center;
  align-items: center;
}

#timer {
  font-size: 36px;
  text-align: center;
}

.red {
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Ejercio No. 3</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="timer-container">
    <div id="timer" contenteditable="true">00:00</div>
  </div>
  <script src="script.js"></script>
</body>
</html>

>Solution :

You don’t set the limit correctly – you set it directly to the content of the timer, which includes non numeric characters such as ":". When using parseInt on something that isn’t all digits, anything after the first non numeric character is discarded. Therefore, by using anything under a minute to test with, limit will be set to 0, as "00:30" would result in 0 from parseInt, as only text from before the colon is used. To fix this, split the text at the colon and convert the minutes into seconds, as shown in the snippet

let time = document.getElementById("timer").innerHTML.split(":");
//if time = "01:30", limit = 1 + 30/60 = 1.5 minutes
limit = parseInt(time[0]) + parseInt(time[1])/60;

window.addEventListener('DOMContentLoaded', documentLoaded, false);

var startTime;
var limit;
var timer;

function documentLoaded() {
  "use strict";

  var timerElement = document.getElementById("timer");
  timerElement.addEventListener("keydown", function (event) {
    if (event.key === 'Enter') {
      event.preventDefault();
      startTimer();
      timerElement.blur();
    }
  });
}

function startTimer() {
  startTime = new Date();
  let time = document.getElementById("timer").innerHTML.split(":");
  limit = parseInt(time[0]) + parseInt(time[1])/60;

  clearInterval(timer);
  timer = setInterval(updateTime, 1000);
}

function updateTime() {
  var currentTime = new Date();
  var elapsed = (currentTime.getTime() - startTime.getTime()) / 1000;

  var minutes = Math.floor(elapsed / 60);
  var seconds = Math.floor(elapsed % 60);

  if (minutes < 10) {
    minutes = "0" + minutes;
  }
  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  document.getElementById("timer").innerHTML = minutes + ":" + seconds;

  var totalSeconds = minutes * 60 + seconds;
  if (totalSeconds >= limit * 60) {
    document.getElementById("timer").classList.add("red");
    clearInterval(timer); // Stop the timer
  } else {
    document.getElementById("timer").classList.remove("red");
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#timer-container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #0781D4;
  display: flex;
  justify-content: center;
  align-items: center;
}

#timer {
  font-size: 36px;
  text-align: center;
}

.red {
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Ejercio No. 3</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="timer-container">
    <div id="timer" contenteditable="true">00:00</div>
  </div>
  <script src="script.js"></script>
</body>
</html>