codemediaweb.com

Code Media

hire me

Simple Countdown Timer with JavaScript & CSS

by
Simple Countdown Timer with JavaScript & CSS

In this article, you will learn how to create a simple countdown timer using HTML CSS, and JavaScript. JavaScript Countdown Timer is a great project for beginners. Timers are used in many places, mainly in different types of e-commerce or business websites. Some products are shown on the eCommerce website through a countdown when they arrive. 

This type of Simple Countdown Timer is also used to keep the under-construction website and the website in maintenance mode. It helps to know how long after the service or product they will receive. This maintains quality and user satisfaction on the website. 

Many people think of taking the help of such design jQuery or external library. However, in this case, you do not have to take the help of any library.

Simple Javascript Countdown Timer (Live Demo)

I have used HTML to add some basic information. CSS is used to design it and JavaScript is used to make it work. It will basically take the current time from your device using the new data method. Then the countdown will start running by subtracting from your scheduled time.

 Below I have given a live demo that will help you to know how this timer works. Here you will find the required source code which you can copy and use in your own work.

See the Pen Javascript Simple Countdown Timer by Raj Template (@RajTemplate) on CodePen.

Simple Countdown Timer using JavaScript

Now learn how to create this JavaScript countdown timer. This requires you to have a basic idea about HTML CSS and JavaScript. No need to worry if you are also a beginner. Because I have given a complete explanation keeping in mind the beginners.

First, you create an HTML and CSS file. Then follow the tutorials below and learn how I made it.

Step 1: Basic design of the project

 I have created the basic structure of this project using the following HTML and CSS code. Here we have created an area in which these four boxes will be located.

<div class=”countdown”>
 
</div>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: “Poppins”,sans-serif;
    color: #ffffff;
}
body{
    background-color: #dbe4ee;
}
.countdown{
    width: 80vw;
    display: flex;
    justify-content: space-around;
    gap: 10px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
Basic design of the project

Step 2: Basic structure of Countdown Timer 

Now I have created a small box on the web page. In this type of box, I made four to count the four types of time. At first, I just made a box of days. The box contains a number and contains some text. Box length and height width: 28vmin used. Use align-items: center to keep the information in the middle.

 <div class=”box”>
   <span class=”num” id=”day-box”>00</span>
   <span class=”text”>Days</span>
 </div>
.box{
    width: 28vmin;
    height: 28vmin;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
    box-shadow: 15px 15px 30px rgba(0,0,0,0.5);
    font-size: 12px;
}
span.num{
    background-color: #ffffff;
    height: 100%;
    color: #032d4d;
    width: 100%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 5em;
}
span.text{
    font-size: 1.4em;
    background-color: #03478a;
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.1em 0;
    font-weight: 400;
}
Basic structure of Countdown Timer

Step 3: Make more boxes

 Now in the same way I made the other three boxes. There is no need to use a separate CSS code for this. Because above all we have added CSS code.

 <div class=”box”>
   <span class=”num” id=”hr-box”>00</span>
   <span class=”text”>Hours</span>
 </div>
 <div class=”box”>
   <span class=”num” id=”min-box”>00</span>
   <span class=”text”>Minutes</span>
 </div>
 <div class=”box”>
   <span class=”num” id=”sec-box”>00</span>
   <span class=”text”>Seconds</span>
 </div>
Make more boxes

Step 4: Make Countdown Timer Responsive with CSS

Now using CSS @media has made it responsive to specific screen sizes. As a result, any device user can easily use the Responsive Countdown Timer. The following codes have helped in the case of laptops.

@media screen and (max-width: 1024px){
    .countdown{
        width: 85vw;
    }
    .box{
        height: 26vmin;
        width: 26vmin;
        font-size: 12px;
    }
}

The code below makes it suitable for tablets.

@media screen and (max-width: 768px){
    .countdown{
        width: 90vw;
        flex-wrap: wrap;
        gap: 30px;
    }
    .box{
        width: calc( 50% – 40px );
        height: 30vmin;
        font-size: 14px;
        margin-bottom: 20px;
    }
}
Make Countdown Timer Responsive with CSS

I have determined how this design can be seen in the case of mobile by the code below.

@media screen and (max-width: 380px){
    .countdown{
        gap: 15px;
    }
    .box{
        width: 100%;
        height: 25vmin;
        font-size: 8px;
        margin-bottom: 30px;
    }
    .span.text{
        font-size: 1.5em;
    }
}

Step 5: Activate Simple Countdown Timer using JavaScript

Now I have fully implemented this Simple Countdown Timer with the help of JavaScript. Below I have put together the complete JavaScript. If you are a beginner, follow the explanation below.

let dayBox = document.getElementById(“day-box”);
let hrBox = document.getElementById(“hr-box”);
let minBox = document.getElementById(“min-box”);
let secBox = document.getElementById(“sec-box”);
let endDate = new Date(2022, 2, 5, 12, 30);
let endTime = endDate.getTime();
function countdown() {
  let todayDate = new Date();
  let todayTime = todayDate.getTime();
  let remainingTime = endTime – todayTime;
 
  let oneMin = 60 * 1000;
  let oneHr = 60 * oneMin;
  let oneDay = 24 * oneHr;
 
  let addZeroes = (num) => (num < 10 ? `0${num}` : num);
  if (endTime < todayTime) {
    clearInterval(i);
    document.querySelector(
      “.countdown”
    ).innerHTML = `<h1>Countdown had expired!</h1>`;
  }
 
  else {
 
    let daysLeft = Math.floor(remainingTime / oneDay);
    let hrsLeft = Math.floor((remainingTime % oneDay) / oneHr);
    let minsLeft = Math.floor((remainingTime % oneHr) / oneMin);
    let secsLeft = Math.floor((remainingTime % oneMin) / 1000);
 
    dayBox.textContent = addZeroes(daysLeft);
    hrBox.textContent = addZeroes(hrsLeft);
    minBox.textContent = addZeroes(minsLeft);
    secBox.textContent = addZeroes(secsLeft);
  }
}
let i = setInterval(countdown, 1000);
countdown();

JavaScript Explanation

Below I have determined the constants of some id functions one by one. Because we can’t use any id function directly in JavaScript.

let dayBox = document.getElementById(“day-box”);
let hrBox = document.getElementById(“hr-box”);
let minBox = document.getElementById(“min-box”);
let secBox = document.getElementById(“sec-box”);

Now the date has been set for what time we want to run the countdown. Input the time you want to make the timer.

let endDate = new Date(2022, 2, 5, 12, 30);

Now I have taken the current time from the device using the new Date method. new Date is a JavaScript method that helps to take the current time from the device. 

let endTime = endDate.getTime();
let todayDate = new Date();
let todayTime = todayDate.getTime();

Now I have saved in remainingTime how long this countdown will last. For this, I have subtracted the current time from the time you set.

let remainingTime = endTime – todayTime;

Now I have expressed the time of day, hour, minute in milliseconds. Then we store those values ​​in a constant.

let oneMin = 60 * 1000;
let oneHr = 60 * oneMin;
let oneDay = 24 * oneHr;

Using the code below, I have added one zero to the time of one number, that is, when the time is less than 10, one zero will be added before that number. It will only help to enhance its beauty.

let addZeroes = (num) => (num < 10 ? `0${num}` : num);

 Now I have added a condition using the ‘if’ method. A type of arrow can be found here when your added time is less than the current time. This means that a message will appear when the account arrives at your scheduled time while the account is running. This will basically let you know that your scheduled time has come.

  if (endTime < todayTime) {
    clearInterval(i);
    document.querySelector(
      “.countdown”
    ).innerHTML = `<h1>Countdown had expired!</h1>`;
  }

 Now I have fully implemented the countdown timer using the following codes. As I said earlier in remainingTime I have stored how long the countdown should run. Now I have divided that time into days, hours, minutes, and seconds.

 At first, I published the time at that time. Then I have expressed the time that is more in the form of hours. Even then, what is left is expressed in minutes and the time that is left at the end of all is expressed in the form of seconds.

    let daysLeft = Math.floor(remainingTime / oneDay);
    let hrsLeft = Math.floor((remainingTime % oneDay) / oneHr);
    let minsLeft = Math.floor((remainingTime % oneHr) / oneMin);
    let secsLeft = Math.floor((remainingTime % oneMin) / 1000);

Now we have arranged to display all this information in the display using textContent. text content will help you see all of this information in specific places on that page.

    dayBox.textContent = addZeroes(daysLeft);
    hrBox.textContent = addZeroes(hrsLeft);
    minBox.textContent = addZeroes(minsLeft);
    secBox.textContent = addZeroes(secsLeft);

At the end of it all, now I have been instructed to update this system every 1000 milliseconds using setInterval. Since I have expressed time here in the form of seconds, it is important to update this time every second.

let i = setInterval(countdown, 1000);
countdown();
Activate Simple Countdown Timer using JavaScript

 Hopefully from this tutorial, you have learned that a simple countdown timer is similarly created using JavaScript. Earlier I have shown you different types of analog-digital clocks and many more types of JavaScript projects.

 Below you will see a download button where you will find the source code needed to create this countdown timer.

Leave a comment