Learn how to create a captivating 2024 New Year Countdown website using HTML, CSS, and JavaScript. Engage users with festive design and interactive features.
.jpg "2024 New Year Countdown using HTML, CSS, and JavaScript (Source Code)")
Table of Contents
Welcome to the ultimate guide on creating a spectacular 2024 New Year Countdown experience for your website! In this tutorial, we'll dive into the realms of HTML, CSS, and JavaScript to craft an interactive and visually stunning countdown timer. As the clock ticks down to the new year, we'll explore step-by-step instructions, from setting up the basic HTML structure to adding dynamic features with JavaScript.
Join us on this coding journey as we celebrate the approaching year and elevate user engagement with festive design elements and interactive functionalities. Whether you're a seasoned developer or just starting, this tutorial will help you bring the spirit of the New Year to your web audience.
Let's start making an amazing 2024 New Year Countdown Timer using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our countdown timer.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the different sections of the code:
1. <!DOCTYPE html>: This declaration defines the document type and version of HTML being used, in this case, HTML5.
2. <html lang="en">: This opening tag indicates the beginning of the HTML document. The attribute lang="en" specifies that the language used in the document is English.
3. <head>: This section contains meta-information about the HTML document, such as character set, viewport settings, and the title of the page.
- <meta charset="UTF-8">: Sets the character encoding to UTF-8, which is a widely used character encoding for handling various characters and symbols.
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used for specifying the version of Internet Explorer to be used to render the web page. In this case, it suggests using the latest version available.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties, ensuring proper rendering and scaling on different devices by setting the initial scale to 1.0.
- <title>2024 New Year Countdown</title>: Sets the title of the web page, which will be displayed in the browser's title bar or tab.
- <link rel="stylesheet" href="styles.css">: Links an external stylesheet (styles.css) to the HTML document for applying styles to the page.
4. <body>: This is the main content of the HTML document.
5. <h2 class="heading">2024 New Year Countdown</h2>: This is a heading (level 2) with the class "heading" and contains the text "2024 New Year Countdown."
6. <div class="container">: This div serves as a container for the countdown elements.
7. Inside the container, there are four div elements with the class "box-time," each containing an h2 element and a paragraph element. These elements will be used to display the countdown for days, hours, minutes, and seconds.
- <h2 class="cont-days"></h2><q>day</p>: Displays the countdown for days.
- <h2 class="cont-hour"></h2><q>Hour</p>: Displays the countdown for hours.
- <h2 class="cont-minute"></h2><q>Min</p>: Displays the countdown for minutes.
- <h2 class="cont-second"></h2><q>Sec</p>: Displays the countdown for seconds.
8. <script src="script.js"></script>: Links an external JavaScript file (script.js) to the HTML document for adding dynamic behavior to the page. The JavaScript code will handle the countdown functionality.
This is the basic structure of our 2024 New Year countdown timer using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the countdown timer is in place, the next step is to add styling to the timer using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our countdown timer.
Let's break down the code:
1. Importing Fonts:
- The code imports three font families from Google Fonts: Barlow Condensed, Barlow Semi Condensed, and Nunito Sans. Different font weights (300, 400, 500, 600, 700 for Barlow Condensed, 500 and 600 for Barlow Semi Condensed, and 300, 600, 800 for Nunito Sans) are included.
2. Global Styles:
- All elements (*) are given a margin and padding of 0, and the box-sizing property is set to border-box. This ensures consistent box model behavior throughout the page.
3. Body Styles:
- The body background is set to an image using the URL property. The image is a world clock cities map. Other styles include centering the background, preventing repetition, and covering the entire viewport. The font size for the body is set to 14px, and the font family is set to "Nunito Sans" and sans-serif as a fallback.
4. Heading Styles:
- The .heading class styles are applied to elements with this class. Text is centered, color is set to a shade of red, padding is added, and the font size is set to 2rem.
5. Container Styles:
- The .container class is applied to a grid container. It has a box shadow, border-radius, and text color set. The grid consists of four columns, and the text is centered. The container takes up 70% of the width, is centered horizontally with auto margin, and has additional padding and margin.
6. Time Box Styles:
- The .box-time class styles are applied to elements within the container. The h2 and p elements inside .box-time have specific font sizes and alignments.
7. Media Query (max-width: 600px):
- A media query is used to apply styles when the screen width is 600 pixels or less.
- The .container class is updated to have two columns and two rows in the grid layout.
- The margin-bottom for .box-time p is increased to 40px to adjust the spacing.
This will give our 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.
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700&family=Barlow+Semi+Condensed:wght@500;600&family=Nunito+Sans:wght@300;600;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(https://c.tadst.com/gfx/tzmap/worldclockcities.png?8507);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
font-size: 14px;
font-family: "Nunito Sans", sans-serif;
}
.heading{
text-align: center;
color: rgb(103, 4, 4);
padding: 10px;
font-size: 2rem;
}
.container {
display: grid;
box-shadow: 10px 10px 100px rgba(0, 0, 0, 0.8);
border-radius: 10px;
color: rgb(103, 4, 4);
grid-template-columns: repeat(4,1fr);
text-align: center;
width: 70%;
margin: auto;
padding: 20px 0px;
margin-top: 20px;
}
.box-time h2 {
font-size: 2.5rem;
}
.box-time p {
font-size: 2rem;
font-weight: 600;
text-align: center;
}
@media screen and (max-width:600px) {
.container{
grid-template-columns: repeat(2,1fr);
grid-template-rows: repeat(2,1fr);
}
.box-time p{
margin-bottom: 40px;
}
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript. Let's break down the code:
1. The NewYear function:
- It creates a Date object (NewYeardate) representing January 1, 2024.
- It creates another Date object (currentdate) representing the current date and time.
- It calculates the remaining time in milliseconds (remainigTime) by subtracting the current date from the New Year's date.
- It then calculates the remaining days, hours, minutes, and seconds from the remaining time.
2. The code then selects HTML elements with classes "cont-days," "cont-hour," "cont-minute," and "cont-second" using document.querySelector.
3. The remaining time components (days, hours, minutes, seconds) are then displayed in these HTML elements after formatting:
- If the value is less than 10, a leading zero is added.
- The formatted values are then set as the content of the respective HTML elements.
4. The setInterval function is used to call the NewYear function every 100 milliseconds, ensuring that the countdown is updated regularly.
Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
function NewYear(){
const NewYeardate = new Date(2024, 0, 1);
const currentdate = new Date();
const remainigTime = NewYeardate - currentdate;
// get days
const days = Math.floor(remainigTime / 86400000);
// remainig hour
const remainigHr = remainigTime - days * 1000 * 60 * 60 * 24;
const hours = Math.floor(remainigHr / 3600000);
// remaining Minute
const remainigMin =
remainigTime - days * 1000 * 60 * 60 * 24 - hours * 1000 * 60 * 60;
const minutes = Math.floor(remainigMin / 60000);
// remainig second
const remainigSec =
remainigTime -
days * 1000 * 60 * 60 * 24 -
hours * 1000 * 60 * 60 -
minutes * 1000 * 60;
const seconds =Math.floor(remainigSec / 1000);
const containerDay = document.querySelector(".cont-days")
const containerHour = document.querySelector(".cont-hour")
const containerMin = document.querySelector(".cont-minute")
const containerSec = document.querySelector(".cont-second")
if (+containerDay.textContent<10) {
containerDay.textContent=`0${days}`
}
else{
containerDay.textContent=`${days}`
}
if (containerHour.textContent<10) {
containerHour.textContent=`0${hours}`
}
else{
containerHour.textContent=`${hours}`
}
if (containerMin.textContent<10) {
containerMin.textContent=`${"0"+minutes}`
}
else{
containerMin.textContent=`${minutes}`
}
if (+containerSec.textContent<10) {
containerSec.textContent=`${"0"+seconds}`
}
else{
containerSec.textContent=`${seconds}`
}
}
setInterval(NewYear,100)Final Output:
.gif "2024 New Year Countdown using HTML, CSS, and JavaScript (Source Code)")
Conclusion:
As we reach the end of this tutorial, you've embarked on a journey to create a captivating 2024 New Year Countdown website using HTML, CSS, and JavaScript.
As you wrap up your coding adventure, don't forget to share your creations with the world! Encourage others to join in the celebration by implementing their unique twists to the countdown. After all, the joy of welcoming the New Year is best when shared.
Thank you for being part of this tutorial. May your countdown be visually stunning, your code bug-free and your users delighted as they welcome 2024 on your engaging website. Wishing you a Happy New Year filled with creativity and coding success! Cheers to new beginnings!
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 😊
