HTML/JavaScript Countdown Timer

Question

I have a countdown timer that currently allows the user to input a time and start the countdown from there. I would like to have the text change colour after a certain amount of time, for example:

Text to go orange at 50%, then text to red when only 25% of the input time is left.

I'm pretty out of my depth already so would be very grateful for some detailed advice, thanks!

Here is my current code:

var secondsRemaining;
var intervalHandle;

function resetPage() {
  document.getElementById('inputArea').style.display = 'block';
}

function tick() {
  //grab h1
  var timeDisplay = document.getElementById('time');

  //turn seconds into mm:55
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);

  //add leading 0 if seconds less than 10
  if (sec < 10) {
    sec = '0' + sec;
  }
  //concatenate with colon
  var message = min.toString() + ':' + sec;
  // now change the display
  timeDisplay.innerHTML = message;

  //stop if down to zero
  if (secondsRemaining === 0) {
    alert('Countdown Finished!');
    clearInterval(intervalHandle);
    resetPage();
  }
  // subtract from seconds remaining
  secondsRemaining--;
}

function startCountdown() {
  //get contents
  var minutes = document.getElementById('minutes').value;
  //check if not a number
  if (isNaN(minutes)) {
    alert("Please enter a number!");
    return;
  }
  //how many seconds?
  secondsRemaining = minutes * 60;
  //call tick
  intervalHandle = setInterval(tick, 1000);
  //hide form
  document.getElementById('inputArea').style.display = 'none';
}

window.onload = function() {

  // create text input
  var inputMinutes = document.createElement('input');
  inputMinutes.setAttribute('id', 'minutes');
  inputMinutes.setAttribute('type', 'text');
  inputMinutes.setAttribute('placeholder', 'Enter Time');
  //create button
  var startButton = document.createElement('input');
  startButton.setAttribute('type', 'button');
  startButton.setAttribute('value', 'Start Countdown');
  startButton.onclick = function() {
    startCountdown();
  };
  // add to DOM
  document.getElementById('inputArea').appendChild(inputMinutes);
  document.getElementById('inputArea').appendChild(startButton);
}

html,
body {
  font-family: helvetica;
  color: #222;
  background: #eaeaea;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  width: 400px;
  margin: auto;
}

h1 {
  font-size: 30em;
  text-align: center;
  margin: 40px 0;
  padding: 0;
  border-right: none;
  border-left: none;
}

input {
  display: block;
  width: 80%;
  border: 5px solid #E6E6E6;
  background: #fff;
  height: 50px;
  margin-bottom: 5px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  font-size: 19px;
  text-align: center;
  border-radius: 5px;
}

input[type=button] {
  line-height: 30px;
  font-size: 19px;
  border: 2px solid #E6E6E6;
  background: #f5b932;
  color: #333;
  font-weight: bold;
  margin-top: 5px;
  transition: .4s ease-in-out;
}

input[type=text]:focus {
  outline: none;
}

input[type=button]:focus {
  outline: none;
}

input[type=button]:hover {
  background: #f5b934;
  cursor: pointer;
}

.center-count {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20vw;
}

<div id="container">
  <div id="inputArea"></div>

</div>
<br>
<br>
<br>
<h1 id="time">0:00</h1>

Answer 1

I would go with a percentage approach, here's your code with that verification.

Set a new variable for initialTime asked.

var initialTime;

var secondsRemaining;
var intervalHandle;

function resetPage() {
  document.getElementById('inputArea').style.display = 'block';
}

function tick() {
  //grab h1
  var timeDisplay = document.getElementById('time');

  //turn seconds into mm:55
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);

  //add leading 0 if seconds less than 10
  if (sec < 10) {
    sec = '0' + sec;
  }
  //concatenate with colon
  var message = min.toString() + ':' + sec;
  // now change the display
  timeDisplay.innerHTML = message;

Then on each tick, check what's the actual percentage left on the counter.

    var remainingPercentage = secondsRemaining*100/initialTime;

    if (remainingPercentage === 75) {
    timeDisplay.style.color = "orange";
    }

    if (remainingPercentage === 50) {
    timeDisplay.style.color = "yellow";
    }

    if (remainingPercentage === 25) {
    timeDisplay.style.color = "red";
    }


  //stop if down to zero
  if (secondsRemaining === 0) {
    alert('Countdown Finished!');
    clearInterval(intervalHandle);
    resetPage();
  }
  // subtract from seconds remaining
  secondsRemaining--;
}

function startCountdown() {
  //get contents
  var minutes = document.getElementById('minutes').value;
  //check if not a number
  if (isNaN(minutes)) {
    alert("Please enter a number!");
    return;
  }
  //how many seconds?

When first setting secondsRemaining, store it in initialTime too.

  secondsRemaining = initialTime = minutes * 60;

  //call tick
  intervalHandle = setInterval(tick, 1000);
  //hide form
  document.getElementById('inputArea').style.display = 'none';
}

window.onload = function() {

  // create text input
  var inputMinutes = document.createElement('input');
  inputMinutes.setAttribute('id', 'minutes');
  inputMinutes.setAttribute('type', 'text');
  inputMinutes.setAttribute('placeholder', 'Enter Time');
  //create button
  var startButton = document.createElement('input');
  startButton.setAttribute('type', 'button');
  startButton.setAttribute('value', 'Start Countdown');
  startButton.onclick = function() {
    startCountdown();
  };
  // add to DOM
  document.getElementById('inputArea').appendChild(inputMinutes);
  document.getElementById('inputArea').appendChild(startButton);
}

Answer 2

Try this:

    function tick() {
  //grab h1
  var timeDisplay = document.getElementById('time');



  //Convert remaining seconds to presentage of total seconds
  precentageS = Math.floor(secondsRemaining/totalSeconds)*100


  //Change color based on persentage
  if(precentageS <= 50){
          document.getElementById("time").style.color = "orange";
  }else if(precentageS <= 25){
          document.getElementById("time").style.color = "red";
  }else{
          document.getElementById("time").style.color = "blue";
  }



  //turn seconds into mm:55
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);

  //add leading 0 if seconds less than 10
  if (sec < 10) {
    sec = '0' + sec;
  }
  //concatenate with colon
  var message = min.toString() + ':' + sec;
  // now change the display
  timeDisplay.innerHTML = message;

  //stop if down to zero
  if (secondsRemaining === 0) {
    alert('Countdown Finished!');
    clearInterval(intervalHandle);
    resetPage();
  }
  // subtract from seconds remaining
  secondsRemaining--;
}

function startCountdown() {
  //get contents
  var minutes = document.getElementById('minutes').value;
  //check if not a number
  if (isNaN(minutes)) {
    alert("Please enter a number!");
    return;
  }
  //how many seconds?
  secondsRemaining = minutes * 60;
  totalSeconds = secondsRemaining;
  //call tick
  intervalHandle = setInterval(tick, 1000);
  //hide form
  document.getElementById('inputArea').style.display = 'none';
}

What I've done is added a totalSeconds variable after the secondsRemaining so I can keep track of how many seconds we started with. I then convert the secondsRemaining into a percentage of the totalSeconds And have if statements depending on the number of times you would like to change color.

Answer 3

Try something like this:

• Extracted minutes to be able to calculate percentage on the run.
• Added two condition to change color...

var secondsRemaining;
var intervalHandle;

// Total time
var minutes;

function resetPage() {
  document.getElementById('inputArea').style.display = 'block';
}

function tick() {
  //grab h1
  var timeDisplay = document.getElementById('time');

  //turn seconds into mm:55
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);

  //add leading 0 if seconds less than 10
  if (sec < 10) {
    sec = '0' + sec;
  }
  //concatenate with colon
  var message = min.toString() + ':' + sec;
  // now change the display
  timeDisplay.innerHTML = message;

  // Change color by percentage
  // Below 25% = 60 / 4 : red
  if (secondsRemaining < minutes * 15) {
    timeDisplay.style.color = "red";
  }
  // Below 50% = 60 / 2 : orange
  else if (secondsRemaining < minutes * 30) {
    timeDisplay.style.color = "orange";
  }

  //stop if down to zero
  if (secondsRemaining === 0) {
    alert('Countdown Finished!');
    clearInterval(intervalHandle);
    resetPage();
  }
  // subtract from seconds remaining
  secondsRemaining--;
}

function startCountdown() {
  //get contents
  minutes = document.getElementById('minutes').value;
  //check if not a number
  if (isNaN(minutes)) {
    alert("Please enter a number!");
    return;
  }
  //how many seconds?
  secondsRemaining = minutes * 60;
  //call tick
  intervalHandle = setInterval(tick, 1000);
  //hide form
  document.getElementById('inputArea').style.display = 'none';
}

window.onload = function() {

  // create text input
  var inputMinutes = document.createElement('input');
  inputMinutes.setAttribute('id', 'minutes');
  inputMinutes.setAttribute('type', 'text');
  inputMinutes.setAttribute('placeholder', 'Enter Time');
  //create button
  var startButton = document.createElement('input');
  startButton.setAttribute('type', 'button');
  startButton.setAttribute('value', 'Start Countdown');
  startButton.onclick = function() {
    startCountdown();
  };
  // add to DOM
  document.getElementById('inputArea').appendChild(inputMinutes);
  document.getElementById('inputArea').appendChild(startButton);
}

html,
body {
  font-family: helvetica;
  color: #222;
  background: #eaeaea;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  width: 400px;
  margin: auto;
}

h1 {
  font-size: 30em;
  text-align: center;
  margin: 40px 0;
  padding: 0;
  border-right: none;
  border-left: none;
}

input {
  display: block;
  width: 80%;
  border: 5px solid #E6E6E6;
  background: #fff;
  height: 50px;
  margin-bottom: 5px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  font-size: 19px;
  text-align: center;
  border-radius: 5px;
}

input[type=button] {
  line-height: 30px;
  font-size: 19px;
  border: 2px solid #E6E6E6;
  background: #f5b932;
  color: #333;
  font-weight: bold;
  margin-top: 5px;
  transition: .4s ease-in-out;
}

input[type=text]:focus {
  outline: none;
}

input[type=button]:focus {
  outline: none;
}

input[type=button]:hover {
  background: #f5b934;
  cursor: pointer;
}

.center-count {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 20vw;
}

<div id="container">
  <div id="inputArea"></div>

</div>
<br>
<br>
<br>
<h1 id="time">0:00</h1>