Build a New Year Countdown Timer Clock in JavaScript & HTML5

In this tutorial, you will learn how to make a New Year Countdown Timer Clock using HTML5, CSS3, and JavaScript. The complete source code of our countdown timer is given below.

JavaScript New Year Countdown Timer Code

index.html

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

<head>

    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, height=device-height">
    <meta name="generator" content="blob-project_content_v101_generalized">
    <meta name="referrer" content="no-referrer">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta charset="utf-8">
    <meta data-react-helmet="true" >

style.css

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    font-family: Poppins, sans-serif;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

body {
    /*background: #020202;*/    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
    overflow-x: hidden;
    scrollbar-width: thin;
    color: #ffffff;
}

body::-webkit-scrollbar {
    width: 11px;
}

h1 {
    font-size: 45px;
}

h0 {
    font-size: 95px;
    font-family: sans-serif;
}



.time {
    background: #272727;
    border-radius: 10px;
}

.time h1 {
    padding: 40px 0px 26px 0px;
    font-size: 50px;
}

.mini {
    background: #222222;
    font-size: 25px;
    padding: 8px 0;
    border-radius: 0px 0px 10px 10px;
}

a {
    color: #00d4ff;
}

a:hover {
    color: rgb(255, 255, 255);
}

main.js

const currentyear = new Date().getFullYear();
const currentdate = new Date().getDate()

const audio = document.getElementById("audio");
const days = document.getElementById("days");
const hours = document.getElementById("hours");
const minutes = document.getElementById("minutes");
const seconds = document.getElementById("seconds");
const countDown = document.getElementById("countdown");
const currentYear = new Date().getFullYear();
const newYearTime = new Date(`January 01 ${currentYear + 1} 00:00:00`);
document.getElementById("year").innerHTML = currentYear + 1 + " | Sachin Lohar"
document.getElementById("currentyear").innerHTML = currentYear + 1

function play() {
    audio.play();
    audio.loop = true;
}

function updateCountDown() {
    const currentTime = new Date();
    diff = newYearTime - currentTime;
    const d = Math.floor(diff / 1000 / 60 / 60 / 24);
    const h = Math.floor(diff / 1000 / 60 / 60) % 24;
    const m = Math.floor(diff / 1000 / 60) % 60;
    const s = Math.floor(diff / 1000) % 60;
    days.innerHTML = d;
    hours.innerHTML = h < 10 ? "0" + h : h;
    minutes.innerHTML = m < 10 ? "0" + m : m;
    seconds.innerHTML = s < 10 ? "0" + s : s;
}
setInterval(updateCountDown, 1000);

JavaScript New Year Countdown Timer Screenshot

Furqan

Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.