How to Make a New Year 2025 Countdown with HTML, CSS and JavaScript

Faraz

By Faraz - Last Updated:

Create a dynamic New Year countdown timer using HTML, CSS, and JavaScript. Learn step-by-step to build a stylish and functional countdown clock.

Join us on Telegram
how to make a new year countdown animation 2023 with html, css and javascript.jpg
Read AlsoCreate Music Streaming App Landing Page HTML & CSS Tutorial.webpCreate Music Streaming App Landing Page: HTML & CSS Tutorial (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

A New Year 2025 countdown is a web-based countdown timer that displays the time remaining until New Year's Day. It is typically created using HTML, CSS, and JavaScript, which are three programming languages commonly used for building websites and web-based applications. In this tutorial, we'll walk you through the steps to create a visually appealing countdown clock that will display the days, hours, minutes, and seconds until the start of the new year.

Watch full tutorial on my YouTube Channel: Watch Here.

Let's start making an amazing new year 2025 countdown made Using HTML, CSS and JavaScript step by step.

Source Code

Step 1 (HTML Code):

First, you will need to create an HTML file with a div element to contain the countdown timer. You can also include any additional elements, such as text or images, to customize the appearance of the animation.

Here's a breakdown of the HTML code:

1. <!DOCTYPE html>

  • Declares the document type and version of HTML (HTML5 in this case).

2. <html lang="en">

  • The root element of the HTML document.
  • The lang="en" attribute specifies the language of the document as English.

3. <head> Section

  • Contains metadata and links to resources for the webpage.
  • <meta charset="UTF-8">: Sets the character encoding to UTF-8, which supports most characters from different languages.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: Ensures compatibility with Internet Explorer's latest rendering engine.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive by setting the viewport width to the device width and scaling it appropriately.
  • <title>New Year Countdown 2025</title>: Sets the title of the webpage, which appears in the browser tab.
  • <link rel="stylesheet" href="styles.css">: Links an external CSS file (styles.css) to style the webpage.

4. <body> Section

  • Contains the main content of the webpage.
  • <div id="countdown">: A container for the countdown elements.
    • Inside this div, there are multiple <div class="countdown-item"> elements, each representing a time unit (days, hours, minutes, seconds).
    • Each countdown-item contains:
      • <span class="countdown-value" id="days/hours/minutes/seconds">: Placeholder for the numerical value of the countdown.
      • <span class="countdown-label">Days/Hours/Minutes/Seconds</span>: Label for the respective time unit.

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

  • Links an external JavaScript file (script.js) to add functionality, such as calculating and updating the countdown dynamically.

After creating the files, paste the following codes into your file. Remember that you must save a file with the .html extension.

Read AlsoCreate Mobile Product Landing Page using HTML, CSS, and JavaScript.jpgCreate a Mobile Product Landing Page using HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

Next, you can use CSS to style the countdown timer and make it more visually appealing. For example, you can use colors, fonts, and other design elements to create a cohesive look and feel for the animation. Here’s a detailed explanation of each section:

Global Body Styling

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
  • display: flex;: Makes the body a flex container to enable flexible layout management.
  • justify-content: center;: Horizontally centers the content within the body.
  • align-items: center;: Vertically centers the content within the body.
  • height: 100vh;: Sets the height of the body to 100% of the viewport height.
  • margin: 0;: Removes default margins from the body.

Countdown Container Styling

#countdown {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3rem;
    color: #fff;
    background: #000;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
  • display: flex;: Makes the countdown container a flexbox to organize its child elements.
  • justify-content: space-between;: Spaces out the countdown items evenly.
  • align-items: center;: Vertically aligns the countdown items within the container.
  • font-size: 3rem;: Sets a base font size for text inside the container.
  • color: #fff;: Sets the text color to white.
  • background: #000;: Sets the background color to black.
  • padding: 1rem;: Adds padding inside the container for spacing.
  • border-radius: 5px;: Rounds the corners of the container.
  • box-shadow: 0 0 10px rgba(0,0,0,0.5);: Adds a subtle shadow for a 3D effect.

Countdown Item Styling

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1rem;
}
  • display: flex;: Makes each countdown item a flex container.
  • flex-direction: column;: Arranges child elements (value and label) vertically.
  • align-items: center;: Centers child elements horizontally.
  • margin: 0 1rem;: Adds horizontal spacing between countdown items.

Countdown Value Styling

.countdown-value {
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
    color: #f00;
    animation: pulse 3s infinite;
}
  • font-size: 3rem;: Sets a large font size for the countdown value.
  • font-weight: bold;: Makes the text bold.
  • margin: 0;: Removes any default margin.
  • color: #f00;: Sets the text color to red.
  • animation: pulse 3s infinite;: Applies a pulsating animation to the value, repeating infinitely every 3 seconds.

Countdown Label Styling

.countdown-label {
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #999;
    margin: 0;
}
  • font-size: 1.5rem;: Sets a smaller font size for the labels.
  • text-transform: uppercase;: Converts the text to uppercase.
  • color: #999;: Sets the text color to a light gray.
  • margin: 0;: Removes default margins.

Pulse Animation

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
  • @keyframes pulse: Defines an animation called "pulse."
  • 0% and 100% { transform: scale(1); }: At the start and end, the element is at its normal size.
  • 50% { transform: scale(1.1); }: At the midpoint, the element slightly enlarges (110% of its original size).
  • The animation creates a smooth pulsating effect for the countdown value.

This will give our new year 2025 countdown timer an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
#countdown{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3rem;
    color: #fff;
    background: #000;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.countdown-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1rem;
}
.countdown-value{
    font-size: 3rem;
    font-weight: bold;
    margin: 0;
    color: #f00;
    animation: pulse 3s infinite;
}
.countdown-label{
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #999;
    margin: 0;
}
@keyframes pulse{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.1);
    }
    100%{
        transform: scale(1);
    }
}

Step 3 (JavaScript Code):

Finally, you will need to use JavaScript to calculate the time remaining until New Year's Day and update the countdown timer. You can use the Date object to get the current date and time, and then use this information to calculate the number of days, hours, minutes, and seconds remaining until the new year. Here's a detailed explanation of the code:

Variable Declarations

const countdown = document.getElementById('countdown');
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');
  • countdown: Refers to the entire countdown container (<div id="countdown">).
  • daysEl, hoursEl, minutesEl, and secondsEl: Point to the individual HTML elements for displaying the number of days, hours, minutes, and seconds left.

Function to Update Countdown

function updateCountdown(){
    const currentDate = new Date();
    const newYearDate = new Date(currentDate.getFullYear() + 1, 0, 1);
    const timeRemaining = newYearDate - currentDate;
    
    const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

    daysEl.innerHTML = days;
    hoursEl.innerHTML = hours;
    minutesEl.innerHTML = minutes;
    secondsEl.innerHTML = seconds;
}

1. Current Date and New Year Date

  • currentDate = new Date(): Retrieves the current date and time.
  • newYearDate = new Date(currentDate.getFullYear() + 1, 0, 1): Calculates the date of the next New Year's Day (January 1st of the next year).

2. Calculate Time Remaining

  • timeRemaining = newYearDate - currentDate: Calculates the difference in milliseconds between the current date and the next New Year.

3. Convert Time Remaining into Days, Hours, Minutes, and Seconds

  • days: Converts milliseconds into days:
    Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
  • hours: Converts the remainder (after days) into hours:
    Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  • minutes: Converts the remainder (after hours) into minutes:
    Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
  • seconds: Converts the remainder (after minutes) into seconds:
    Math.floor((timeRemaining % (1000 * 60)) / 1000);

4. Update Countdown Elements

  • Updates the inner content of the HTML elements (daysEl,hoursEl, minutesEl, and secondsEl) with the calculated values:
    daysEl.innerHTML = days;
hoursEl.innerHTML = hours;
minutesEl.innerHTML = minutes;
secondsEl.innerHTML = seconds;

Initialize Countdown and Update Every Second

updateCountdown();
setInterval(updateCountdown, 1000);
  • updateCountdown(): Runs the updateCountdown function once immediately to display the initial countdown.
  • setInterval(updateCountdown, 1000): Sets a timer to call the updateCountdown function every 1000 milliseconds (1 second) to continuously update the countdown.

Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with .js extension.

const countdown = document.getElementById('countdown');
const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hours');
const minutesEl = document.getElementById('minutes');
const secondsEl = document.getElementById('seconds');

function updateCountdown(){
    const currentDate = new Date();
    const newYearDate = new Date(currentDate.getFullYear()+1,0,1)
    const timeRemaining = newYearDate - currentDate;
    const days = Math.floor(timeRemaining / (1000*60*60*24));
    const hours =Math.floor((timeRemaining % (1000*60*60*24))/(1000*60*60));
    const minutes = Math.floor((timeRemaining % (1000*60*60))/(1000*60));
    const seconds = Math.floor((timeRemaining % (1000*60))/1000);

    daysEl.innerHTML = days;
    hoursEl.innerHTML = hours;
    minutesEl.innerHTML = minutes;
    secondsEl.innerHTML = seconds;
}

updateCountdown();
setInterval(updateCountdown, 1000);

Final Output:

how to make a new year countdown animation 2023 with html, css and javascript.gif
Read Alsoquick-and-easy-countdown-timer-with-html-css-and-javascript.webpQuick and Easy Countdown Timer with HTML, CSS, and JavaScript

Conclusion:

Congratulations! You've now successfully created a New Year 2025 countdown timer using HTML, CSS, and JavaScript. In this tutorial, we covered how to create the basic HTML structure for the countdown timer, add styles with CSS, and use JavaScript to create a working countdown clock.

We hope you found this tutorial helpful, whether you're a beginner or someone looking to refresh your skills. With these foundational skills, you can create all sorts of other countdown timers and date-related features on your website. Good luck and have fun with your new countdown timer!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: new year 2025 countdown, 2025 countdown, html, css, javascript, countdown timer, countdown clock, date and time functions in javascript, happy new year 2025 html css
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺