2023 Countdown Timer using HTML, CSS and JavaScript with Source Code – Coding Torque

Share your love

Welcome to Coding Torque. In this blog, we are going to create a New Year Countdown Timer using HTML, CSS and JavaScript. We are going to use JavaScript date functions and the setInterval function. You should create this project if you are an intermediate-level JavaScript developer.

Before we start, here are some JavaScript Games you might like to create:

1.Ā Snake Game using JavaScript

2.Ā 2D Bouncing Ball Game using JavaScript

3.Ā Rock Paper Scissor Game using JavaScript

4.Ā Tic Tac Toe Game using JavaScript

5. Whack a Mole Game using JavaScript


I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.



Starter Template

<!doctype html>
<html lang="en">

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>2023 countdown timer using JavaScript with Source Code - @codingtorque </title>

    <!-- Further code here -->    

    <script src="script.js"></script>



Paste the below code in your <body> tag

<div class="container">
    <h1>2023 CountDown Timer</h1>
    <div class="cd_timer">
        <div class="cd_container">
            <div class="time day">100</div>
            <span class="time_text">Days</span>
        <div class="cd_container">
            <div class="time hour">50</div>
            <span class="time_text">Hours</span>
        <div class="cd_container">
            <div class="time minute">30</div>
            <span class="time_text">Minutes</span>
        <div class="cd_container">
            <div class="time second">30</div>
            <span class="time_text">Seconds</span>

Output Till Now

CSS CodeĀ 

Create a fileĀ style.css and paste the code below.

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  box-sizing: border-box;

body {
  background: url(https://mir-s3-cdn-cf.behance.net/project_modules/disp/e29ccc95910113.5face8c671539.gif)
      no-repeat left center,
      no-repeat right center;
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  font-family: "Poppins";
  color: #fff;
  font-size: 10px;

h1 {
  text-align: center;
  margin-top: 14rem;
  font-size: 3rem;

.cd_timer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;

.cd_container .time {
  font-weight: bold;
  padding: 1rem 2rem;
  font-size: 3rem;
  border: 4px solid #01dfcc;
  border-radius: 1rem;
  margin: 0 1rem;

.cd_container span {
  font-size: 1rem;
  font-weight: bold;
  color: #ccc;

Output Till Now

countdown timer using javascript with source code

JavaScript CodeĀ 

Create a fileĀ script.jsĀ and paste the code below.
const newYear = "1/1/2023";

const daysEl = document.querySelector('.day');
const hourEl = document.querySelector('.hour');
const minuteEl = document.querySelector('.minute');
const secondEl = document.querySelector('.second');

function timeCountDown() {
    const nowDate = new Date();
    const newYearDate = new Date(newYear);
    const totalSeconds = (newYearDate - nowDate) / 1000;

    const days = Math.floor(totalSeconds / 3600 / 24);
    const hours = Math.floor(totalSeconds / 3600) % 24;
    const minutes = Math.floor(totalSeconds / 60) % 60;
    const seconds = Math.floor(totalSeconds) % 60;

    daysEl.innerHTML = formatTime(days);
    hourEl.innerHTML = formatTime(hours);
    minuteEl.innerHTML = formatTime(minutes);
    secondEl.innerHTML = formatTime(seconds);

function formatTime(time) {
    return time > 10 ? time : `0${time}`;

setInterval(timeCountDown, 1000);
Written by: Piyush Patil
Code Credits:Ā @DeewithBee
If you have any doubts or any project ideas feel free to Contact Us
Hope you find this post helpfulšŸ’–
Share your love