Create 26th January Republic Day with HTML, CSS, JavaScript

Faraz

By Faraz -

Learn how to create a Republic Day wishes webpage using HTML, CSS, and JavaScript. Add animations, countdowns, and patriotic messages.

Join us on Telegram
create-26th-january-republic-day-with-html-css-javascript.webp
Read Alsocreating tailwind css accordion (faq) source code included.jpgCreating Tailwind CSS Accordion (FAQ) | Source Code Included

Table of Contents

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

Republic Day is a proud occasion celebrated on 26th January every year in India. A great way to share the spirit of patriotism is by creating a webpage with Republic Day wishes. Using HTML, CSS, and JavaScript, you can design an interactive and beautiful webpage with animations, countdowns, and inspiring messages.

In this blog, you’ll learn step-by-step how to create a Republic Day wishes webpage.

Prerequisites

Before starting, ensure you have the following:

  1. Text Editor: Use Visual Studio Code, Sublime Text, or Notepad++.
  2. Web Browser: Chrome, Firefox, or Edge to view your webpage.
  3. Basic Knowledge: Familiarity with HTML, CSS, and JavaScript is helpful.

Source Code

Step 1 (HTML Code):

Start by creating an HTML file. Add the basic structure and include the required sections. Here’s a breakdown of the structure and its functionality:

1. <!DOCTYPE html>

  • This defines the document type and version of HTML being used, which is HTML5 in this case.

2. <html lang="en">

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

3. <head> Section

  • Contains metadata and links to external resources.
  • <meta charset="UTF-8">
    • Specifies the character encoding for the document, ensuring it supports a wide range of characters (UTF-8).
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • Ensures that the webpage is responsive and adjusts to the screen width of the device.
  • <title>Indian Republic Day - 26th January 2025</title>
    • Sets the title of the webpage that will appear in the browser tab.
  • <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    • Links to an external font (Poppins) from Google Fonts for styling text.
  • <link rel="stylesheet" href="styles.css">
    • Links to an external CSS file (styles.css) for styling the webpage.

4. <body> Section

  • Contains the content that will be displayed on the webpage.
  • <div class="background"></div>
    • An empty div that will likely serve as the background for the page, styled via CSS.
  • <div class="container">
    • A container div that holds all the content on the page, such as the flag, message, and countdown.
    • <div class="flag-container">
      • A div to hold the Indian flag image.
      • <img src="https://upload.wikimedia.org/" alt="Indian Flag" class="flag">
        • Displays the Indian flag image. The alt attribute provides an alternative text description of the image for accessibility.
    • <div class="message-container">
      • A div that contains the main message and the countdown timer.
      • <h1>Happy Republic Day!</h1>
        • Displays a heading with the message "Happy Republic Day!"
      • <p class="dynamic-message">Celebrating the spirit of unity, democracy, and freedom on this special day - 26th January 2025.</p>
        • A paragraph with a dynamic message, celebrating the values of the Republic Day. The class="dynamic-message" allows specific styling (like animation) to be applied.
      • <p>On this day, India adopted its Constitution and became a Republic. Let us honor the values of liberty, equality, and fraternity that our nation stands for.</p>
        • A paragraph providing additional information about Republic Day.
      • <div class="countdown">
        • A div containing the countdown to Republic Day.
        • <h2>Countdown to Republic Day 2025:</h2>
          • A heading introducing the countdown.
        • <div id="countdown-timer"></div>
          • A div where the countdown timer will be displayed dynamically via JavaScript.
      • <div class="quote-container">
        • A div containing a quote related to Republic Day.
        • <h3>Republic Day Quote</h3>
          • A heading introducing the quote section.
        • <p class="quote">"Democracy is the government of the people, by the people, for the people." - Abraham Lincoln</p>
          • A paragraph displaying a quote by Abraham Lincoln.

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

  • Links to an external JavaScript file (script.js) that will handle functionality like the countdown timer.
Read Alsostep-by-step tutorial creating animated checkbox with html and css.jpgCreating Animated Checkbox with HTML and CSS | Step-by-Step Tutorial

Step 2 (CSS Code):

Create a styles.css file to design the webpage. Here's a detailed explanation of each section:

1. body

  • margin: 0; padding: 0;
    • Removes the default margin and padding around the body to ensure the page content takes up the full width and height of the viewport.
  • font-family: 'Poppins', sans-serif;
    • Sets the font for the page to "Poppins" (imported from Google Fonts), falling back to a generic sans-serif font if "Poppins" is unavailable.
  • display: flex; justify-content: center; align-items: center;
    • Uses Flexbox to center the content both horizontally and vertically within the body.
  • background-color: #f0f4f8;
    • Sets a light grayish-blue background color for the entire page.

2. .background

  • position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    • Positions the .background element to cover the entire viewport, from top-left to bottom-right.
  • background: #f0f4f8;
    • Sets the background color of the .background element to match the body background color.
  • z-index: -1;
    • Ensures that the .background element stays behind other content on the page.

3. .container

  • display: flex; justify-content: center; align-items: center;
    • Centers the content inside the .container div both horizontally and vertically using Flexbox.
  • flex-direction: column;
    • Arranges the child elements (flag, message, countdown, quote) in a vertical column.
  • text-align: center;
    • Centers the text horizontally inside the container.
  • color: #333;
    • Sets the text color to a dark gray for better readability.
  • max-width: 800px;
    • Limits the width of the .container to a maximum of 800px.
  • padding: 20px;
    • Adds padding inside the container to prevent content from touching the edges.

4. .flag-container

  • margin-bottom: 20px;
    • Adds space below the flag container.
  • animation: wave 5s infinite;
    • Applies an animation called wave (defined later) to the flag, causing it to "wave" every 5 seconds in a continuous loop.

5. .flag

  • width: 250px; height: auto;
    • Sets the flag's width to 250px and adjusts the height automatically to maintain the aspect ratio.

6. .message-container

  • background-color: #fff;
    • Sets the background color of the message container to white.
  • padding: 30px;
    • Adds padding inside the container to create space around the content.
  • border-radius: 10px;
    • Rounds the corners of the message container.
  • box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    • Adds a subtle shadow around the message container for a floating effect.
  • width: 100%; max-width: 600px;
    • Ensures the message container takes up the full width of its parent, but does not exceed 600px in width.

7. h1

  • color: #825CFF;
    • Sets the color of the main heading to a purple shade.
  • font-size: 40px;
    • Sets the font size of the heading to 40px.
  • margin-bottom: 15px;
    • Adds space below the heading.

8. .dynamic-message

  • font-size: 18px; font-weight: bold;
    • Sets the font size to 18px and makes the text bold.
  • color: #825CFF;
    • Sets the text color to the same purple shade used for the heading.
  • line-height: 1.6;
    • Sets the line height to 1.6 for better readability.
  • animation: fadeInOut 3s infinite;
    • Applies an animation called fadeInOut (defined later) to the dynamic message, causing it to fade in and out every 3 seconds.

9. @keyframes fadeInOut

  • Defines the fadeInOut animation:
    • 0% { opacity: 0; }: The text starts fully transparent.
    • 50% { opacity: 1; }: The text becomes fully visible.
    • 100% { opacity: 0; }: The text becomes fully transparent again.
  • This causes the dynamic message to fade in and out in a continuous loop.

10. .countdown

  • margin-top: 20px;
    • Adds space above the countdown section.

11. #countdown-timer

  • font-size: 24px; font-weight: bold;
    • Sets the font size to 24px and makes the countdown timer bold.
  • color: #825CFF;
    • Sets the countdown timer color to the same purple shade.

12. .quote-container

  • background-color: #fff;
    • Sets the background color of the quote container to white.
  • padding: 15px;
    • Adds padding inside the container.
  • border-radius: 8px;
    • Rounds the corners of the quote container.
  • box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    • Adds a subtle shadow for a floating effect.

13. .quote

  • font-size: 18px; font-style: italic;
    • Sets the font size to 18px and makes the quote italic.
  • color: #6a47b8;
    • Sets the quote text color to a lighter purple shade.

14. @keyframes wave

  • Defines the wave animation for the flag:
    • 0% { transform: rotate(0deg); }: The flag starts with no rotation.
    • 50% { transform: rotate(5deg); }: The flag rotates 5 degrees to the right.
    • 100% { transform: rotate(0deg); }: The flag returns to its original position.
  • This creates a waving effect for the flag.
body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f4f8;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f0f4f8;
  z-index: -1;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  color: #333;
  max-width: 800px;
  padding: 20px;
}

.flag-container {
  margin-bottom: 20px;
  animation: wave 5s infinite;
}

.flag {
  width: 250px;
  height: auto;
}

.message-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  color: #333;
}

h1 {
  color: #825CFF;
  font-size: 40px;
  margin-bottom: 15px;
}

.dynamic-message {
  font-size: 18px;
  font-weight: bold;
  color: #825CFF;
  line-height: 1.6;
  animation: fadeInOut 3s infinite;
}

@keyframes fadeInOut {
  0% {
      opacity: 0;
  }
  50% {
      opacity: 1;
  }
  100% {
      opacity: 0;
  }
}

.countdown {
  margin-top: 20px;
}

#countdown-timer {
  font-size: 24px;
  font-weight: bold;
  color: #825CFF;
}

.quote-container {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quote {
  font-size: 18px;
  font-style: italic;
  color: #6a47b8;
}


/* Flag Animation */
@keyframes wave {
  0% {
      transform: rotate(0deg);
  }
  50% {
      transform: rotate(5deg);
  }
  100% {
      transform: rotate(0deg);
  }
}

Step 3 (JavaScript Code):

Create a script.js file to add a countdown timer functionality. Here's a detailed explanation:

  1. Function Definition:
    function countdown() {
    • The countdown function calculates the remaining time until Republic Day and updates the countdown timer on the webpage.
  1. Target Date:
    const targetDate = new Date("January 26, 2025 00:00:00").getTime();
    • targetDate is the timestamp for January 26, 2025, at 00:00:00.
    • new Date() creates a Date object, and .getTime() converts it into a numeric timestamp in milliseconds since January 1, 1970.
  1. Current Date: 
    const now = new Date().getTime();
    • now holds the current timestamp in milliseconds.
  1. Time Difference: 
    const distance = targetDate - now;
    • distance calculates the time remaining (in milliseconds) until the target date.
  1. Time Calculations: 
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
    • Days: Divide distance by the number of milliseconds in a day (1000 * 60 * 60 * 24).
    • Hours: Use the remainder of distance divided by a day (distance % (1000 * 60 * 60 * 24)), then divide by the number of milliseconds in an hour.
    • Minutes: Use the remainder of distance divided by an hour, then divide by the number of milliseconds in a minute.
    • Seconds: Use the remainder of distance divided by a minute, then divide by 1000 (milliseconds per second).
  1. Update Timer Display:
    document.getElementById("countdown-timer").innerHTML =
    days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
    • The innerHTML of the HTML element with the ID countdown-timer is updated to show the remaining time in the format: 
      [days]d [hours]h [minutes]m [seconds]s
  1. Check if Countdown is Over:
    if (distance < 0) {
    clearInterval(x);
    document.getElementById("countdown-timer").innerHTML = "Republic Day has arrived!";
}
    • If distance becomes negative (the target date has passed):
      • clearInterval(x) stops the timer.
      • The timer's display is updated to show a message: "Republic Day has arrived!".
  1. Set Interval:
    let x = setInterval(countdown, 1000);
    • The setInterval function calls the countdown function every 1000 milliseconds (1 second).
    • The x variable holds the interval ID, allowing it to be cleared later using clearInterval.
function countdown() {
  const targetDate = new Date("January 26, 2025 00:00:00").getTime();
  const now = new Date().getTime();
  const distance = targetDate - now;

  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById("countdown-timer").innerHTML =
      days + "d " + hours + "h " + minutes + "m " + seconds + "s ";

  if (distance < 0) {
      clearInterval(x);
      document.getElementById("countdown-timer").innerHTML = "Republic Day has arrived!";
  }
}

let x = setInterval(countdown, 1000);

Final Output:

create-26th-january-republic-day-with-html-css-javascript.gif
Read AlsoCreating an e-commerce Website with HTML, CSS, and JavaScript.jpgCreating an Ecommerce Website with HTML, CSS, and JavaScript (Source Code)

Conclusion:

Creating a Republic Day wishes webpage using HTML, CSS, and JavaScript is a fun and engaging way to celebrate this special day. By adding a countdown timer, vibrant colors, and dynamic messages, you can make your webpage more interactive and appealing.

Share this creative project with your friends and family to spread the spirit of patriotism.

Happy Republic Day!

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: republic day wishes, html css javascript, 26th january webpage, countdown timer, independence day, indian flag, india flag, republic day festival, how to create republic day wishes using html; css; and javascript, step-by-step guide for 26th january wishes webpage, republic day animated webpage tutorial
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🥺