Countdown timer using HTML ,CSS and JavaScript

Simple Countdown Timer Using JavaScript

Simple Countdown Timer Using JavaScript

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Countdown Timer With HTML, CSS, And Javascript.

Here a counter counts the number starting from one to infinity and that is going to do with JavaScript. Other else were HTML & CSS which is for attributes and styling.

So Now We are going to create this project and for that, we were adding the HTML code first.

Html Code For Countdown Timer

<div class="box-center text-center">
	<header class="box-text">
		<p class="info-text margin-0">Let's count them up!</p>
	</header>
	<main class="box-number">
		<p class="number-text margin-0" id="js-number"></p>
	</main>
</div>

 

There First we are adding a div class with a specific class name and then inside of div we are adding a header tag with a class name on it.

After this, A paragraph tag is used to add content before the counter and the header tag were closed now.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Now we are creating an element for the counter that needs to be increased and for that first, we added the main tag with a class name and again a paragraph tag was used to add counter content with a specific ID which would be called by JS properties.

So We have completed the HTML code for the project, hence we can further move for CSS and JS for adding styling and counter functions.

CSS Code For Countdown Timer

text-center {
    text-align: center;
}

.margin-0 {
    margin: 0;
}

/* Others */

body {
    position: relative;
    height: 100vh;
    margin: 0;
}

.box-center {
    width: 200px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.box-text {
    background-color: #000;
    line-height: 50px;
}

.box-number {
    background-color: #008100;
    line-height: 150px;
}

.info-text {
    color: #fff;
    font-size: 12px;
}

.number-text {
    color: #fff;
    font-size: 90px;
}

 

Here There are Three sections classified which is one for adding styles and alignments to JS content and another is making the JS content move to the center of the page and the last one for changes in font size, family, and alignments.

 

STEP 1:  In the body section we are fixing the margin and padding to zero and position and height to relative and 100 viewport height, which would make the content relative to another content and the JS counter will be in the center of the web.

After that, the same content (JS counter) will be added with some additional properties like transform translate, width, text-align, left, top, and position to make the absolute changes.

.box-center {
    width: 200px;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.text-center {
    text-align: center;
}

 

STEP 2: Step 2 is about the styling attributes like font color, family, background color, etc… Which would be used by calling out the specific class name.

.box-text {
    background-color: #000;
    line-height: 50px;
}

.box-number {
    background-color: #008100;
    line-height: 150px;
}

.info-text {
    color: #fff;
    font-size: 12px;
}

.number-text {
    color: #fff;
    font-size: 90px;
}

 

Now The CSS code is Added Successfully. So we can move on to JS for making the number count.

Javascript Code For Countdown Timer

const increaseNumber = () => {
    let counter = 0;
    const numberElement = document.getElementById("js-number") || {};

    setInterval(function startCount() {
        counter < 99 ? (numberElement.innerHTML = ++counter) : (counter = 0);
    }, 1000);
};

window.addEventListener("load", increaseNumber);

 

Here The JS consists of less number of lines. Simply First we create a variable name (increase number) and the properties added inside will be stored in this variable and that is done with the arrow function(=>).

Now we add the variable name as a counter and fix the value to zero. After that, we are getting the div class name (js-number) by Js get element property and set the time interval for 100 so that the counter counts the number until it reaches 100.

After With the help of the event lister and innerHTML property we will display our counter that is lively change and it would be done by that event listener inside of variable increase number.

 

ADVERTISEMENT

Final Output Of Counter JS

ADVERTISEMENT

Now We have Successfully created our Countdown timer using HTML, CSS, and JavaScript. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

ADVERTISEMENT

Ecommerce Website Using Html Css And Javascript Source Code

ADVERTISEMENT

If you find out this Blog helpful, then make sure to search code random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

ADVERTISEMENT

Thank You And Happy Learning!!!

REFER CODE: Jennifer Takagi

WRITTEN BY: Ragunathan S



Leave a Reply