Animations, JavaScript

30-Second Countdown Timer JavaScript

It is our job to bring new things for you every time. This time we have created a 30-second countdown timer in javascript. Javascript helps us to build new and amazing things. I hope you will like this countdown timer. Let’s discuss how to create this type of timer in javascript.

30-second Countdown timer:

As you can see in the image we have created a beautiful 30 seconds countdown timer in javascript. Html and CSS are used as helping languages for design and structure.

Html structure:

For the development of web-related projects, we have to use Html in our projects. We have used Html to create the structure of Count down timer. The box of this timer is created using Html tags. But for providing the length, width, and shadow of this box we have used CSS.

CSS:

CSS helps us to design our countdown timer app. There are a lot of things in our app design. These things related to design are achieved using CSS. It has a beautiful simple background and it is possible to replace it with pictures or gradient colors. Then it has a heading at the top related to the app name.
Then the main design is present inside the box. The box has a square shape with a shadow. If you want a lot of shadows for your design then click here. This progress bar is moving with the passage of time.

Javascript:

Due to dynamic language, it has a lot of properties for dynamic functionality. We have used the property of time along with the progress bar. When the progress bar is starting from 30 seconds and reaching 10 seconds then it has a blue color. After reaching 10 seconds it’s changing color to orange with some shades. After crossing 5 seconds it changes the color of the progress bar to red for showing the danger. The red color is there because it’s near to ending.
We have built by using a lot of functionalities and it is impossible to mention the name of each of them along with coding lines.

How to create a countdown timer in Javascript?

We will use the below steps for the development of this timer app.

Download a code editor
Html source code
CSS source code
Javascript source code
Download source code

By following these steps along with us you will be able to make this type of timer using Html, CSS, and Javascript as well.

Html Source code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>JS CountDown Timer - FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
    
  </head>
  <body>
<h1>CountDown Timer</h1>
<div id="app"></div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>JS CountDown Timer - FantacyDesigns</title>

</head>

<body>

<h1>CountDown Timer</h1>

</body>

</html>

CSS source code:

body {
  font-family: sans-serif;
  display: grid;
  height: 100vh;
  place-items: center;
background-color:#F8F8F8;
}
#app{
margin-top:-150px;
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
padding:50px;
background-color:#fff;

}
h1{
font-family:arial;
font-weight:800px;
margin:0;
padding:0;
font-size:50px;
}
.base-timer {
  position: relative;
  width: 300px;
  height: 300px;

}

.base-timer__svg {
  transform: scaleX(-1);

}

.base-timer__circle {
  fill: none;
  stroke: none;

}

.base-timer__path-elapsed {
  stroke-width: 7px;
  stroke: #ddd;
}

.base-timer__path-remaining {
  stroke-width: 7px;
  stroke-linecap: round;
  transform: rotate(90deg);
  transform-origin: center;
  transition: 1s linear all;
  fill-rule: nonzero;
  stroke: currentColor;
}

.base-timer__path-remaining.green {
  color: rgb(65, 184, 131);
 color:#4FFBDF;
}

.base-timer__path-remaining.orange {
  color: orange;
}

.base-timer__path-remaining.red {
  color: red;
}

.base-timer__label {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

body {

font-family: sans-serif;

display: grid;

height: 100vh;

place-items: center;

background-color:#F8F8F8;

}

#app{

margin-top:-150px;

box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;

padding:50px;

background-color:#fff;

}

h1{

font-family:arial;

font-weight:800px;

margin:0;

padding:0;

font-size:50px;

}

.base-timer {

position: relative;

width: 300px;

height: 300px;

}

.base-timer__svg {

transform: scaleX(-1);

}

.base-timer__circle {

fill: none;

stroke: none;

}

.base-timer__path-elapsed {

stroke-width: 7px;

stroke: #ddd;

}

.base-timer__path-remaining {

stroke-width: 7px;

stroke-linecap: round;

transform: rotate(90deg);

transform-origin: center;

transition: 1s linear all;

fill-rule: nonzero;

stroke: currentColor;

}

.base-timer__path-remaining.green {

color: rgb(65, 184, 131);

color:#4FFBDF;

}

.base-timer__path-remaining.orange {

color: orange;

}

.base-timer__path-remaining.red {

color: red;

}

.base-timer__label {

position: absolute;

width: 300px;

height: 300px;

top: 0;

display: flex;

align-items: center;

justify-content: center;

font-size: 48px;

}

Javascript source code:

<script>

// Credit: Mateusz Rybczonec

const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;

const COLOR_CODES = {
  info: {
    color: "green"

  },
  warning: {
    color: "orange",
    threshold: WARNING_THRESHOLD
  },
  alert: {
    color: "red",
    threshold: ALERT_THRESHOLD
  }
};

const TIME_LIMIT = 30;
let timePassed = 0;
let timeLeft = TIME_LIMIT;
let timerInterval = null;
let remainingPathColor = COLOR_CODES.info.color;

document.getElementById("app").innerHTML = `
<div class="base-timer">
  <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <g class="base-timer__circle">
      <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
      <path
        id="base-timer-path-remaining"
        stroke-dasharray="283"
        class="base-timer__path-remaining ${remainingPathColor}"
        d="
          M 50, 50
          m -45, 0
          a 45,45 0 1,0 90,0
          a 45,45 0 1,0 -90,0
        "
      ></path>
    </g>
  </svg>
  <span id="base-timer-label" class="base-timer__label">${formatTime(
    timeLeft
  )}</span>
</div>
`;

startTimer();

function onTimesUp() {
  clearInterval(timerInterval);
}

function startTimer() {
  timerInterval = setInterval(() => {
    timePassed = timePassed += 1;
    timeLeft = TIME_LIMIT - timePassed;
    document.getElementById("base-timer-label").innerHTML = formatTime(
      timeLeft
    );
    setCircleDasharray();
    setRemainingPathColor(timeLeft);

    if (timeLeft === 0) {
      onTimesUp();
    }
  }, 1000);
}

function formatTime(time) {
  const minutes = Math.floor(time / 60);
  let seconds = time % 60;

  if (seconds < 10) {
    seconds = `0${seconds}`;
  }

  return `${minutes}:${seconds}`;
}

function setRemainingPathColor(timeLeft) {
  const { alert, warning, info } = COLOR_CODES;
  if (timeLeft <= alert.threshold) {
    document
      .getElementById("base-timer-path-remaining")
      .classList.remove(warning.color);
    document
      .getElementById("base-timer-path-remaining")
      .classList.add(alert.color);
  } else if (timeLeft <= warning.threshold) {
    document
      .getElementById("base-timer-path-remaining")
      .classList.remove(info.color);
    document
      .getElementById("base-timer-path-remaining")
      .classList.add(warning.color);
  }
}

function calculateTimeFraction() {
  const rawTimeFraction = timeLeft / TIME_LIMIT;
  return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
}

function setCircleDasharray() {
  const circleDasharray = `${(
    calculateTimeFraction() * FULL_DASH_ARRAY
  ).toFixed(0)} 283`;
  document
    .getElementById("base-timer-path-remaining")
    .setAttribute("stroke-dasharray", circleDasharray);
}

</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

// Credit: Mateusz Rybczonec

const FULL_DASH_ARRAY = 283;

const WARNING_THRESHOLD = 10;

const ALERT_THRESHOLD = 5;

const COLOR_CODES = {

info: {

color: "green"

warning: {

color: "orange",

threshold: WARNING_THRESHOLD

alert: {

color: "red",

threshold: ALERT_THRESHOLD

}

};

const TIME_LIMIT = 30;

let timePassed = 0;

let timeLeft = TIME_LIMIT;

let timerInterval = null;

let remainingPathColor = COLOR_CODES.info.color;

document.getElementById("app").innerHTML = `

<path

id="base-timer-path-remaining"

stroke-dasharray="283"

class="base-timer__path-remaining ${remainingPathColor}"

d="

M 50, 50

m -45, 0

a 45,45 0 1,0 90,0

a 45,45 0 1,0 -90,0

></path>

</g>

</svg>

<span id="base-timer-label" class="base-timer__label">${formatTime(

timeLeft

)}</span>

</div>

startTimer();

function onTimesUp() {

clearInterval(timerInterval);

}

function startTimer() {

timerInterval = setInterval(() => {

timePassed = timePassed += 1;

timeLeft = TIME_LIMIT - timePassed;

document.getElementById("base-timer-label").innerHTML = formatTime(

timeLeft

);

setCircleDasharray();

setRemainingPathColor(timeLeft);

if (timeLeft === 0) {

onTimesUp();

}

}, 1000);

}

function formatTime(time) {

const minutes = Math.floor(time / 60);

let seconds = time % 60;

if (seconds < 10) {

seconds = `0${seconds}`;

}

return `${minutes}:${seconds}`;

}

function setRemainingPathColor(timeLeft) {

const { alert, warning, info } = COLOR_CODES;

if (timeLeft <= alert.threshold) {

document

.getElementById("base-timer-path-remaining")

.classList.remove(warning.color);

document

.getElementById("base-timer-path-remaining")

.classList.add(alert.color);

} else if (timeLeft <= warning.threshold) {

document

.getElementById("base-timer-path-remaining")

.classList.remove(info.color);

document

.getElementById("base-timer-path-remaining")

.classList.add(warning.color);

}

function calculateTimeFraction() {

const rawTimeFraction = timeLeft / TIME_LIMIT;

return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);

}

function setCircleDasharray() {

const circleDasharray = `${(

calculateTimeFraction() * FULL_DASH_ARRAY

).toFixed(0)} 283`;

document

.getElementById("base-timer-path-remaining")

.setAttribute("stroke-dasharray", circleDasharray);

}

</script>

Download source code for countdown timer:

Note: Before creating HTML, CSS, and JavaScript files, you must remember that .html, .css and .js will be used with the files name.

Download source code:

Joining the above code of HTML, CSS, and javascript is sometimes tricky for newbies or time taking process. You can download the source code of this countdown timer app for free build in Html, CSS, and javascript. The below button will help you to download the code file for free.

Conclusion and task:

We have created 30 seconds countdown timer app in HTML, CSS, and javascript. Your job is to create the same app from scratch but you have to add some new functionalities for better learning. Change the time from 30 seconds to 30 minutes. Also, change the color of the progress bar after every 5 minutes. The progress bar is moving in a clockwise direction and you have to rotate the progress bar in the anti-clockwise direction. Best of luck
Thanks for reading this article.

Go to top

Download Source CodeClick to Download