JavaScript Countdown Timer Minutes Seconds

JavaScript Countdown Timer Minutes Seconds
Code Snippet:CountDown Timer Javascript
Author: thecodingpie
Published: May 4, 2024
Last Updated: May 4, 2024
Downloads: 60
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript Countdown Timer Minutes Seconds code allows users to set a countdown countdown timer By inputting the desired time and format, users can initiate the countdown. It displays the remaining time in hours, minutes, and seconds. This functionality helps users track time for various activities efficiently.

You can use this countdown timer code on websites for events, promotions, or product launches to create a sense of urgency. It enhances user engagement by visually indicating the time remaining, and encouraging action. Additionally, it’s customizable and easy to integrate into any web project, enhancing functionality and user experience.

How to Create JavaScript Countdown Timer Minutes Seconds

1. Start by creating an HTML file and setting up the basic structure. Copy the provided HTML code into your file. This code includes the necessary elements for the countdown timer, such as input fields and buttons.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css/styles.css"/>
  <title>CountDown Timer</title>
</head>
<body>

  <div class="container">
    <!-- form -->
    <form class="form">
      <!-- countdown time input field -->
      <input type="number" min="1" class="time-input" placeholder="Enter Countdown">
      <!-- options -->
      <select name="format">
        <option value="hours">Hours</option>
        <option value="minutes">Minutes</option>
        <option value="seconds">Seconds</option>
      </select>
      <!-- submit button or set button -->
      <button type="submit" class="set-btn">SET</button>
    </form>
    <!-- countdown text -->
    <p class="countdown">00 : 00 : 00</p>

    <!-- buttons -->
    <div class="buttons">
      <button class="stop-btn" disabled>STOP</button>
      <button class="reset-btn" disabled>RESET</button>
    </div>
  </div>

  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

2. Ensure you have the CSS and JavaScript files linked correctly in your HTML code. The CSS file contains styles for the timer and buttons, while the JavaScript file contains the functionality to make the timer work.

/* Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* common styles */
* {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  font-family: 'Roboto', sans-serif;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  text-align: center;
  color: #00ff44;
}

button {
  padding: 7px 15px;
  border: none;
  outline: none;
  border-radius: 4px;
}

button:hover {
  cursor: pointer;
  background-color: #ffff00;
}
/* common styles end */

/* form */
.form {
  margin: 90px 0px 20px 0px;
}

.time-input {
  padding: 10px 7px;
  border: none;
  outline: none;
  border-radius: 4px;
}

select[name='format'] {
  padding: 10px;
  border: none;
  outline: none;
  border-radius: 4px;
  margin: 0px 10px;
  background-color: #00ff44;
}

.set-btn {
  background-color: #00ff44;
}
/* form styles end */

/* countdown */
.countdown {
  font-size: 6.5rem;
  margin-top: 20px;
}
/* countdown styles end */

/* buttons */
.stop-btn {
  padding: 10px 20px;
  background-color: #ff6344;
}

.reset-btn {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: rgb(0, 174, 255);
}
/* buttons styles end */

3. Now, let’s add the JavaScript code to make the countdown timer functional. Copy and paste the provided JavaScript code into a new file named “script.js” and save it in a folder named “js” within your project directory.

/* grab necessary elements */
// grab the .form
const form = document.querySelector('.form');
// grab the .time-input
const timeInput = document.querySelector('.time-input');
// grab the select[name='format']
const format = document.querySelector("select[name='format']");
// grab the .set-btn
const setBtn = document.querySelector('.set-btn');
// grab the .countdown
const countDown = document.querySelector('.countdown');
// grab the .stop-btn 
const stopBtn = document.querySelector('.stop-btn');
// grab the .reset-btn
const resetBtn = document.querySelector('.reset-btn');
/* grab necessary elements ends */ 


/* global variables and constants*/
// variable to store setInterval
let countDownInterval;

// secondsLeft in millisecond
let secondsLeftms;
// end time
let endTime;
// .stop-btn clicked or not
let stopBtnClicked = false;
/* global variables ends */


/* .stop-btn click listener */
stopBtn.addEventListener('click', () => {
  // toggle the value of 'stopBtnClicked'
  stopBtnClicked = !stopBtnClicked;

  // if STOP button is clicked
  if (stopBtnClicked === true) {
    // change the text to 'PLAY'
    stopBtn.innerHTML = 'PLAY';
    // enable the .reset-btn
    resetBtn.disabled = false;
    // clear the setInterval() inorder to freeze the countdown timer
    clearInterval(countDownInterval);
  } else if (stopBtnClicked === false) {
    // if PLAY button is clicked
    // then change text to 'STOP'
    stopBtn.innerHTML = 'STOP';
    // disable the .reset-btn
    resetBtn.disabled = true;
    // then update endTime
    endTime = secondsLeftms + Date.now();
    // set a new setInterval()
    countDownInterval = setInterval(() => {
      setCountDown(endTime);
    }, 1000);
  }
});
/* .stop-btn click listener ends */


/* .reset-btn click listener */
resetBtn.addEventListener('click', () => {
  resetCountDown();
});
/* .reset-btn click listener ends */


/* .form submit listener */
form.addEventListener('submit', (event) => {
  // prevent the default page reloading
  event.preventDefault();

  // get the countdown time user typed
  let countDownTime = timeInput.value;

  // check if it is not zero
  if (countDownTime > 0) {
    // check which is the format, ie the <select> element's value
    if (format.value === 'hours') {
      // convert hours to milliseconds
      // 1 hrs = 3600000 ms (5 zeros)
      countDownTime = countDownTime * 3600000;
    } else if (format.value === 'minutes') {
      // 1 minute = 60000 ms (4 zeros)
      countDownTime = countDownTime * 60000;
    } else if (format.value === 'seconds') {
      // 1 seconds = 1000 ms (3 zeros)
      countDownTime = countDownTime * 1000;
    }

    // get current time in milliseconds
    const now = Date.now();
    // calculate the ending time
    endTime = now + countDownTime;

    // activate the countdown at first
    setCountDown(endTime);

    countDownInterval = setInterval(() => {
      setCountDown(endTime);
    }, 1000);

    // then disable the .set-btn
    setBtn.disabled = true;
    // then enable the .stop-btn
    stopBtn.disabled = false;
  }

});
/* .form submit listener ends */


/* setCountDown function */
const setCountDown = (endTime) => {
  // calculate how many milliseconds is left to reach endTime from now
  secondsLeftms = endTime - Date.now();
  // convert it to seconds
  const secondsLeft = Math.round(secondsLeftms / 1000);

  // calculate the hours, minutes and seconds
  let hours = Math.floor(secondsLeft / 3600);
  let minutes = Math.floor(secondsLeft / 60) - (hours * 60);
  let seconds = secondsLeft % 60;

  // adding an extra zero infront of digits if it is < 10
  if (hours < 10) {
    hours = `0${hours}`;
  }
  if (minutes < 10) {
    minutes = `0${minutes}`;
  }
  if (seconds < 10) {
    seconds = `0${seconds}`;
  }

  // stopping the timer if the time is up 
  if (secondsLeft < 0) {
    resetCountDown();
    return;
  }

  // set the .countdown text
  countDown.innerHTML = `${hours} : ${minutes} : ${seconds}`;

};
/* setCountDown function ends */


/* resetCountDown function */
const resetCountDown = () => {
  // destroy the setInterval()
  clearInterval(countDownInterval);
  // reset the countdown text
  countDown.innerHTML = '00 : 00 : 00';
  // set stopBtnClicked = false
  stopBtnClicked = false;
  // change inner text to STOP
  stopBtn.innerHTML = 'STOP';

  // enable .set-btn
  setBtn.disabled = false;

  // disable .stop-btn and .reset-btn
  stopBtn.disabled = true;
  resetBtn.disabled = true;
};
/* resetCountDown function ends */

Congratulations! You’ve successfully implemented a JavaScript countdown timer on your website. Enjoy using it to create excitement and drive action among your website visitors

Leave a Comment