Build a countdown clock using JavaScript

If you're like me you must be excited for all the new opportunities and experiences a new year brings, so what better way to count down the minutes to it than to make a fun and simple countdown with JavaScript? 🤸

This is our final project:

So let's get right into it!!

HTML Document

We don't need much, just a div for our counter and some text.

    <div class="content">
    <h1>New Year Countdown</h1>
    <h2 id="counter"></h2>
    </div>

⚠️ Don't forget to link your CSS sheet and your Script.js !!

Let's jump right into our JavaScript, worry about styling later my friend.

Script.js

First we need to 'select' the element we're going to be working with, in this case our counter div.

const display = document.getElementById('counter')

For our countdown logic we need to stablish:

• Current time
• Final date
• Time left which will be our current time minus our final date

Good so far? Good! And we also want to make all of this with an interval to be updated every second.

let time = setInterval(() => {
    const today = new Date().getTime()
    const newyear = new Date('Jan 1, 2022 00:00:01').getTime()
    const countdown = newyear - today 

}, 1000)

We also need to do some quick math to set our days, hours, minutes and seconds until our final date.

///Why math.floor? We need to round those numbers
    let days = Math.floor(countdown /  (1000 * 60 * 60 * 24))
    let hours = Math.floor((countdown %  (1000 * 60 * 60 * 24))/ (1000 * 60 * 60))
    let minutes = Math.floor((countdown %  (1000 * 60 * 60 )) / (1000 * 60))
    let seconds = Math.floor((countdown % (1000 * 60)) / 1000)

And lastly we need to update our counter element

 display.innerHTML = days + " Days" + " "+ hours + " Hours" + " " + minutes + " Minutes" + " " + seconds + " Seconds"

But we also want to display ' Happy new year!' when the time's up! So let's add an if statement:

    if (countdown <= 0){
        display.innerHTML = "Happy New Year!!"
        clearInterval(time)
    }

This is our completed code:

const display = document.getElementById('counter')

let time = setInterval(() => {
    const today = new Date().getTime()
    const newyear = new Date('Jan 1, 2022 00:00:01').getTime()
    const countdown = newyear - today 

    let days = Math.floor(countdown /  (1000 * 60 * 60 * 24))
    let hours = Math.floor((countdown %  (1000 * 60 * 60 * 24))/ (1000 * 60 * 60))
    let minutes = Math.floor((countdown %  (1000 * 60 * 60 )) / (1000 * 60))
    let seconds = Math.floor((countdown % (1000 * 60)) / 1000)
    display.innerHTML = days + " Days" + " "+ hours + " Hours" + " " + minutes + " Minutes" + " " + seconds + " Seconds"

    if (countdown <= 0){
        display.innerHTML = "Happy New Year!!"
        clearInterval(time)
    }
}, 1000)

It's looking like this:

CSS

Let's fix it with some quick CSS, a background image from unsplash and font by Googlefonts:

body{ 
    background-image: url('light.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}
#counter{
    padding: 10px;
    border-radius: 20px;
    font-size: 38px;
}

.content{
    width: 80vw;
    margin-top: 20px;
    padding: 25px;
    background-color: rgba(255, 255, 255, 0.493);
    box-shadow: 1px 1px 10px #1e253b42;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 5px #9b4b4b, 0 0 10px #6060d1;
    text-align: center;
    border-radius: 20px;
    font-size: 40px;
}

But you can style it however you like my friend!

And this is our quick countdown timer!

As always thank you SOOO much for reading!! :)

I really hope you learned something new today!

Don't hesitate to contact me and let me know what you think in the comments!

☕If you enjoy my content Buy me a coffee It'll help me continue making quality blogs💕

💙Follow me on Twitter to know more about my self-taught journey!

💜Make sure to check out more articles on my Web Design for Beginners Series

💜And if interested check out more articles on my JavaScript For Newbies Series

❤️ Also subscribe to my Youtube Channel !

🖤And for more content and tips on TikTok !