A countdown timer is an accurate timer that can be used for a website or blog to display the countdown to any special event, such as a birthday or anniversary.

HTML Layout

Open VSCode and create the basic HTML structure in a file index.html by and then pressing the tab. Give the title Countdown Timer. Link style.css and script.js to the created HTML file.

Create a div class that wraps around everything related to the product.

Let, days, hours, mins and secs class contains span tag with id days-left,hours-left, and secs-left respectively. The dynamic data will go inside the span element and the id will be used in javascript code to fetch the element.

CSS Styling

Quite a bit of CSS coding is required to make the page visually appealing and even without much CSS, we can implement the basic countdown timer.

JavaScript

1. Set a valid end date.

2. Calculate the time remaining.

3. Convert the time to a usable format.

4. Output the clock data as a reusable object.

5. Display the clock on the page, and stop the clock when it reaches zero.

Step 1: Set a Valid End Date
The Valid end date and time should be a string in any of the formats understood by JavaScript’s Date. parse() method.

Step 2: Calculate the Remaining Time
First, we calculate the time remaining by subtracting the deadline from the current date and time then we calculate the number of days, hours, minutes and seconds. The Math. floor() function is used to return the largest integer less than or equal to a given number.

Step 3: Output the result
In the code below the result is given as output by the id

Step 4: Write some text if the countdown is over
If the countdown timer is over then “expired” will be displayed on the screen