Simple Countdown Timer using HTML CSS & JavaScript

Simple Countdown Timer using HTML CSS & JavaScript

If you want to make Simple Countdown Timer using JavaScript then you have come to the right place. Here I have shared a step-by-step tutorial for beginners on how to make a countdown timer. Earlier I shared with you tutorials like different types of stopwatches, countdown timers, digital clocks, etc. 

Now the JavaScript timer that I am going to show is absolutely simple. As a result, if you are a beginner and know basic HTML, CSS, and javascript, you can easily create it. The Countdown Timer is a remarkable element used in a variety of business, e-commerce, and service websites. At times we notice countdowns on e-commerce websites or service websites. 

Simple Countdown Timer

A countdown can be seen for some time before the launch of a product or service. JQuery is basically used to create a countdown timer that is used on a website. Here I will show you how to create a Simple Countdown Timer using Pure HTML, CSS, and JavaScript.

Below I have given a demo that will help you understand how it works. Here you will find the required source code.

See the Pen Untitled by Ground Tutorial (@groundtutorial) on CodePen.


I made four boxes on a blue background as you can see above. There will be countdowns for dates, hours, minutes, and seconds. 

This means that the countdown will continue to be divided into days, hours, minutes, and seconds that you set. Text is used to indicate which box is pointing at which time in each box.

How to create Countdown Timer using javaScript

Now is the time to find out how I created this JavaScript Countdown Timer. For this, you must have a basic idea about HTML, CSS, and javascript. Here I have shared the necessary step-by-step tutorials.

Hopefully from this tutorial, you will know how to make a Simple Countdown Timer. If there is any problem then of course I can let you know by commenting below. You can use the download button below to download the complete source code.

Step 1: Html code of Countdown Timer

The following code is the HTML code needed to create this countdown timer. Here I have put all the HTML codes together. I have made four boxes here. The days, hours, minutes, and seconds can be seen in the four boxes, respectively. 

One text and one number have been used in that box. Texts will help you understand which box indicates which time and the numbers will show the time.

<div class="wrapper">

  <div class="countdown">

        <div class="box">
          <span class="text">Days</span>
          <span class="num" id="day-box">00</span>
        </div>

        <div class="box">
          <span class="text">Hours</span>
          <span class="num" id="hr-box">00</span>
        </div>

        <div class="box">
          <span class="text">Minutes</span>
          <span class="num" id="min-box">00</span>
        </div>

        <div class="box">
          <span class="text">Seconds</span>
          <span class="num" id="sec-box">00</span>
        </div>

  </div>

</div>

Html code of Countdown Timer

Step 2: Design the webpage

I designed that page using the following codes. The background color of the webpage here is blue. Transform: translate (-50%, -50%), top: 50%, left: 50%. The countdown timer is placed in the middle of the webpage.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
color: white;
}
body {
background: rgb(20, 129, 208);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.wrapper {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 16px;
}

Design the webpage

Step 3: Basic structure of timer

Now the basic structure of the counter timer has been created. Here the width of the basic structure: 95vw and max-width: 900px. The distance between each box is 10 px and the boxes are width: 28vmin, height: 29vmin. 

Although no background color has been used for any of the elements here. So you can't see the size of the elements. Next time I will use the background color so that you do not see the size and height of the elements.

.countdown {
width: 95vw;
max-width: 900px;
display: flex;
justify-content: space-around;
gap: 10px;
}

.box {
width: 28vmin;
height: 29vmin;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: relative;
}

Basic structure of timer

Step 4: Design the time boxes

Now the numbers have been designed. The background color of these numbers is white. Font-size: 4.2em has been used to create text sizes.

span.num {
background-color: white;
color: rgb(8, 78, 142);
height: 100%;
width: 100%;
display: grid;
place-items: center;
font-size: 4.2em;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
border-radius: 0.1em;
}

Design the time boxes

Step 5: Design the text in the box

Now the texts are designed to be seen on top of each box. These texts will help you to know which box is pointing at which time. The background color of the boxes is light yellow and the box-shadow is used which enhances the beauty.

span.text {
font-size: 1.1em;
background-color: rgb(211, 241, 22);
color: #202020;
display: block;
width: 80%;
position: relative;
text-align: center;
bottom: -10px;
padding: 0.6em 0;
font-weight: 600;
border-radius: 0.3em;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);
}

Simple Countdown Timer using HTML CSS

Step 6: JavaScript of Simple Countdown Timer

We have designed a Simple Countdown Timer using HTML and CSS above. Now it needs to be implemented with the help of JavaScript. I have fully explained the reason for using each line here. 

The first four lines are used to determine the constant of the ID functions in each box. Because we know that no HTML element can be used directly in JavaScript. One has to determine the global constant for them. Then time is taken from the device using the new date method.

   //The global constant of the id functions of the four boxes has to be determined.
   //Because no html element can be used 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");

    //I have added the time for which I want to run the countdown
   //Then that time is stored in a constant called "endDate"
    let endDate = new Date(2022, 03, 1, 00, 00);

//The above date has been converted to milliseconds
//getTime() method is used to return the number of milliseconds since 1 January 1970.
    let endTime = endDate.getTime();


//All the calculations are stored in the function called countdown
    function countdown() {
//The current time has been taken from the device using the "new Date" method
      let todayDate = new Date();
//The time received from the device has been converted to milliseconds
      let todayTime = todayDate.getTime();
//How long the countdown will last has been calculated.
//Countdown time = Countdown end time - Current time
      let remainingTime = endTime - todayTime;
//Minutes, hours, days have been converted to milliseconds
//1 minute = 1 * 60 seconds = 1000 * 60 milliseconds
      let oneMin = 60 * 1000;
      let oneHr = 60 * oneMin;
      let oneDay = 24 * oneHr;

//If the number of times is less than 10 then a 0 will be added before it
      let addZeroes = (num) => (num < 10 ? `0${num}` : num);

//What will happen when the countdown ends is now decided
//That is, if the current time is more than the time when the countdown is over
      if (endTime < todayTime) {
        clearInterval(i);
        document.querySelector(
          ".countdown"
        ).innerHTML = `<h1>Countdown Has Expired</h1>`;
      } 

 else {
//Now the total countdown time has been converted to days, hours, minutes, and seconds
//The Math. floor() function returns the largest integer less than or equal to a given number.
        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);

//Arrangements have now been made to display the time values in the webpage
//"textContent" helps to display any content within a webpage
        dayBox.textContent = addZeroes(daysLeft);
        hrBox.textContent = addZeroes(hrsLeft);
        minBox.textContent = addZeroes(minsLeft);
        secBox.textContent = addZeroes(secsLeft);
      }
    }
//Now with the help of "setInterval" the above calculations are arranged to be updated every second.
//As you can see, all of the above calculations are stored in a function called 'countdown'.
//Now that function has been updated every 1000 milliseconds or 1 second.
    let i = setInterval(countdown, 1000);
    countdown();


JavaScript of Simple Countdown Timer

Simple Countdown Timer Source Code

Hopefully, you have learned from the above tutorial how I have created a JavaScript countdown timer. However, for many people who only want to take the source code, I have given the source code below.

The box below contains the source code. If you want, you can copy those codes directly and use them in your work. 

See the Pen Untitled by Ground Tutorial (@groundtutorial) on CodePen.

If you want to download the source code to create a Simple Countdown Timer, you can use the button below. 

Create an HTML file before using the code above. Then copy those codes below and add them to the file. Be sure to comment on how you like this Simple Countdown Timer tutorial.





Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code:...
Read more

How to Create A Custom Select Box using HTML CSS

Image
In this article, you will learn how to create Custom Select Box using HTML CSS, and JavaScript. custom select dropdown we use in many places. This is a kind of dropdown menu . However, it is much more modern than the general dropdown menu.  This type of HTML custom Select Box has a small box. Clicking on which will bring up a dropdown. There are many options in that dropdown . The option that you select will be found in that box. If you click on that box again, you will see the options again.  If you select any other option, in the same way, that option will also be seen in that custom select box . If you have a basic idea about HTML and CSS , you can easily create it.  Custom Select Box CSS Here I have used a small amount of jquery. But if you do not know jquery then there will be no problem. Because very little JavaScript has been used here. Below is a demo that will help you learn how this HTML CSS custom select dropdown works. See the Pen HTML CSS Custom ...
Read more

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha...
Read more