India Republic Day 2024 | Design Tiranga Flag with HTML and CSS - Coding

Create a Republic Day wishing card using HTML, CSS, and JavaScript. A Republic Day card contains the Republic Day wishing text and some animations with the Indian flag and colors.

Approach

Create a folder with the name of the project and three different files for HTML, CSS, and JavaScript.
Inside the HTML file, define the structure of the web page using HTML elements like div, headings, paragraphs, etc. with the IDs and classes.
Now, select the elements with their IDs and classes inside the CSS file and use the CSS styling properties to style the HTML document to make it attractive.
Use CSS animations and transitions to make the page look more animated and dynamic.
After that, create a countdown using the JavaScript from current day till the Republic Day.
Use the HTML Canvas element and JavaScript together to rain the flowers once the timer ends.
Create interactive and attractive animations using the setTimeout() and setInterval() methods inside JavaScript.

Example: The below code example implements the HTML, CSS and JavaScript to create an Republic Day wishing card with interactive animations.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Republic Day Card</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="card-container">
        <div id="countdown" class="countdown-container">
            <div class="clock">
                <div id="day01" class="digit-container">
                    <div class="digit" id="day1">0</div>
                </div>
                <div id="day02" class="digit-container">
                    <div class="digit" id="day2">0</div>
                </div>
                <span id="daySpan">:</span>
                <div class="digit-container">
                    <div class="digit" id="hour1">0</div>
                </div>
                <div class="digit-container">
                    <div class="digit" id="hour2">0</div>
                </div>
                <span>:</span>
                <div class="digit-container">
                    <div class="digit" id="minute1">0</div>
                </div>
                <div class="digit-container">
                    <div class="digit" id="minute2">0</div>
                </div>
                <span>:</span>
                <div class="digit-container">
                    <div class="digit" id="second1">0</div>
                </div>
                <div class="digit-container">
                    <div class="digit" id="second2">0</div>
                </div>
            </div>
        </div>

        <div id="ourCard" class="text-container">
            <canvas id="rainingFlowerCanvas"></canvas>
            <div id="ourFlag" class="flag-container">
                <div class="saffron"></div>
                <div class="white">
                    <div class="ashok-chakra bigger-chakra">
                        <div class="spikes bigger-spikes">
                            <div class="spike bigger-spike" 
                                 style="--i: 1"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 2"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 3"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 4"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 5"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 6"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 7"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 8"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 9"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 10"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 11"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 12"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 13"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 14"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 15"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 16"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 17"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 18"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 19"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 20"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 21"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 22"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 23"></div>
                            <div class="spike bigger-spike" 
                                 style="--i: 24"></div>
                        </div>
                    </div>
                </div>
                <div class="green"></div>
            </div>

            <h2 class="heading2">GeeksforGeeks</h2>

            <div class="spinning-flag-container">
                <div class="spinning-flag-color greenPolygon"></div>
                <div class="spinning-flag-color whitePolygon"></div>
                <div class="spinning-flag-color saffronPolygon">
                    <div class="ashok-chakra">
                        <div class="spikes">
                            <div class="spike" style="--i: 1"></div>
                            <div class="spike" style="--i: 2"></div>
                            <div class="spike" style="--i: 3"></div>
                            <div class="spike" style="--i: 4"></div>
                            <div class="spike" style="--i: 5"></div>
                            <div class="spike" style="--i: 6"></div>
                            <div class="spike" style="--i: 7"></div>
                            <div class="spike" style="--i: 8"></div>
                            <div class="spike" style="--i: 9"></div>
                            <div class="spike" style="--i: 10"></div>
                            <div class="spike" style="--i: 11"></div>
                            <div class="spike" style="--i: 12"></div>
                            <div class="spike" style="--i: 13"></div>
                            <div class="spike" style="--i: 14"></div>
                            <div class="spike" style="--i: 15"></div>
                            <div class="spike" style="--i: 16"></div>
                            <div class="spike" style="--i: 17"></div>
                            <div class="spike" style="--i: 18"></div>
                            <div class="spike" style="--i: 19"></div>
                            <div class="spike" style="--i: 20"></div>
                            <div class="spike" style="--i: 21"></div>
                            <div class="spike" style="--i: 22"></div>
                            <div class="spike" style="--i: 23"></div>
                            <div class="spike" style="--i: 24"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wish-container">
                <p class="para">Wishes you a very</p>
                <h1 class="heading1">
                    Happy 75 <sup>th</sup><br>
                    Republic Day <br> 
                    2024
                </h1>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS

/* style.css */

/* blue color: #06038D
saffron color: #FF671F
white color: #fff
green color: #046A38 */

@import url
('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Playfair Display', serif;
}

.card-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    position: relative;
}

/* countdown CSS */
.clock {
    display: flex;
    font-size: 3rem;
}

.digit-container {
    width: 50px;
    height: 60px;
    background-color: #333;
    color: #fff;
    text-align: center;
    margin: 0 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.digit {
    width: 100%;
    transition: 
transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    color: #fff;
    position: absolute;
    top: -10px;
}

/* text container CSS */
.text-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    height: 80%;
    width: 33%;
    background-color: #d5d4d4;
    border-radius: 10px;
    position: relative;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* Color spinner CSS */
.spinning-flag-container {
    position: relative;
    width: 150px;
    height: 150px;
}

.spinning-flag-color {
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: 
polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    animation: spin 4s linear infinite;
}

.greenPolygon {
    background-color: #046A38;
    transform: rotate(0deg);
}

.whitePolygon {
    background-color: #fff;
    transform: rotate(120deg);
}

.saffronPolygon {
    background-color: #FF671F;
    transform: rotate(240deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Flag CSS */
.flag-container {
    z-index: 9;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid #06038D;
}

.saffron {
    height: 33.3%;
    width: 100%;
    background-color: #FF9933;
}

.white {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 33.3%;
    width: 100%;
    background-color: white;
}

.green {
    height: 33.3%;
    width: 100%;
    background-color: #046A38;
}

/* Ashoka Chakra CSS */
.ashok-chakra.bigger-chakra {
    width: 29%;
    height: 80%;
    border: 5px solid #06038D;
}

.ashok-chakra.bigger-chakra 
.spikes .spike::before {
    width: 10px;
    height: 10px;
    top: -5px;
    left: calc(50% - 8px);
}

.ashok-chakra.bigger-chakra 
.spikes .spike::after {
    width: 6px;
    height: 50%;
    top: -8px;
    left: calc(50% - 5px);
}

.ashok-chakra {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #06038D;
    margin: auto;
}

.ashok-chakra .spikes,
.ashok-chakra .spikes .spike {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ashok-chakra .spikes .spike {
    transform: rotate(calc(15deg * var(--i)));
}

.ashok-chakra .spikes .spike::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background: #06038D;
    border-radius: 50%;
    top: -2px;
    left: calc(50% - 1px);
}

.ashok-chakra .spikes .spike::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 50%;
    background: #06038D;
    top: -4px;
    left: calc(50% - 0px);
    transform-origin: bottom;
    transform: rotate(7.5deg);
    clip-path: 
polygon(50% 5%, 100% 50%, 50% 95%, 0% 50%);
}

.ashok-chakra::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: #06038D;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    border-radius: 50%;
}

/* slideFlag animation class */
.slideFlag.flag-container {
    height: 0;
    visibility: hidden;
    transition: all 2s ease-in-out;
}

.slideFlag.flag-container 
.white .ashok-chakra.bigger-chakra {
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}


@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


.wish-container {
    text-align: center;
    color: #fff;
}


/* Utility Classes */
.heading1 {
    color: #FF671F;
    font-size: 50px;
    padding: 5px;
}

.heading2 {
    color: #046A38;
    font-size: 35px;
    padding: 5px;
}

.para {
    color: #06038D;
    font-size: 20px;
    padding: 5px;
}

/* Responsive CSS styles*/

@media screen and (min-width: 769px) 
and (max-width: 1024px) {
    .text-container{
        width: 75%;
    }
    .ashok-chakra.bigger-chakra {
        height: 125px;
        width: 125px;
    }
}

@media screen and (min-width: 1025px) 
and (max-width: 1440px) {
    .ashok-chakra.bigger-chakra {
        width: 160px;
        height: 161px;
    }
}

@media screen and (min-width: 1441px) 
and (max-width: 2560px) {
    .ashok-chakra.bigger-chakra {
        width: 150px;
        height: 150px;
    }
}

@media screen and (min-width: 431px) 
and (max-width: 768px) {
    .text-container{
        width: 62%;
    }
    .ashok-chakra.bigger-chakra {
        width: 125px;
        height: 125px;
    }
}

@media screen and (max-width: 431px) {
    .text-container{
        width: 100%;
    }
    .clock {
        font-size: 1.6rem;
    }
    .digit-container {
        width: 25px;
        height: 40px;
    }
    .digit {
        top: 0px;
    }
    .ashok-chakra.bigger-chakra {
        width: 141.5px;
        height: 140.5px;
    }
}

JavaScript

// script.js

// Countdown timer code 
let newYearDate = new Date('25 Jan, 2024, 23:59:59');
let currentDate = new Date();
let milliDiff = newYearDate.getTime() - 
                    currentDate.getTime();
let remDays=0, remHours=0, 
remMinutes=0, remSeconds=0;
const countDown = () => {
    const newYearDate = new Date('25 Jan, 2024, 23:59:59');
    const currentDate = new Date();
    const milliDiff = newYearDate.getTime() - 
                        currentDate.getTime();
    const totalSeconds = Math.floor(milliDiff / 1000);
    const totalMinutes = Math.floor(totalSeconds / 60);
    totalHours = Math.floor(totalMinutes / 60);
    remSeconds = totalSeconds % 60;
    remMinutes = totalMinutes % 60;
    remDays = Math.floor(totalHours / 24);
    remHours = totalHours % 24;
    
    second1.innerHTML = Math.floor(remSeconds/10);
    second2.innerHTML = Math.floor(remSeconds%10);
    minute1.innerHTML = Math.floor(remMinutes/10);
    minute2.innerHTML = Math.floor(remMinutes%10);
    hour1.innerHTML = Math.floor(remHours/10);
    hour2.innerHTML = Math.floor(remHours%10);
    day1.innerHTML = Math.floor(remDays/10);
    day2.innerHTML = Math.floor(remDays%10);
}
let myInterval = setInterval(countDown, 1000);

// Replacing countdown time to current time
setTimeout(()=>{
    clearInterval(myInterval);
    countdown.style.display = "none";
    startRainingFlower()
    slideFlag();
}, milliDiff);

// Animating countdown
let lastDays = 0, lastHours = 0, 
lastMinutes = 0, lastSeconds = 0;
function updateClock() {
    slideTimerDigit
      ('day1', Math.floor(remDays/10), 
    Math.floor(lastDays/10));
    slideTimerDigit
    ('day2', Math.floor(remDays%10), 
    Math.floor(lastDays%10));
    slideTimerDigit
    ('hour1', Math.floor(remHours/10), 
    Math.floor(lastHours/10));
    slideTimerDigit
    ('hour2', Math.floor(remHours%10), 
    Math.floor(lastHours%10));
    slideTimerDigit
    ('minute1', Math.floor(remMinutes/10), 
    Math.floor(lastMinutes/10));
    slideTimerDigit
    ('minute2', Math.floor(remMinutes%10), 
    Math.floor(lastMinutes%10));
    slideTimerDigit
    ('second1', Math.floor(remSeconds/10), 
    Math.floor(lastSeconds/10));
    slideTimerDigit
    ('second2', Math.floor(remSeconds%10), 
    Math.floor(lastSeconds%10));

    lastDays = remDays;
    lastHours = remHours;
    lastMinutes = remMinutes;
    lastSeconds = remSeconds;

    setTimeout(updateClock, 1000);
}

// Timer digits Slider
function slideTimerDigit(id, value, lastValue) {
    const digit = document.getElementById(id);
    if (value !== lastValue) {
        digit.style.transform = 'translateY(-100%)';
        digit.style.opacity = '0';
        setTimeout(() => {
            digit.style.transform = 'translateY(0)';
            digit.textContent = value;
            digit.style.opacity = '1';
        }, 300);
    }
}
updateClock();

// Opening card by sliding flag animation
const slideFlag = () =>{
    ourFlag.classList.add('slideFlag');
}

// Flower's rain code
function startRainingFlower() {
    const canvasWidth = ourCard.offsetWidth;
    const canvasHeight = ourCard.offsetHeight;
    const canvas = 
    document.getElementById('rainingFlowerCanvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

    const ctx = canvas.getContext('2d');

    const flowers = [];
    const numberOfFlowers = 100;
    const petalColors = 
    ['#FF671F', '#fff', '#046A38'];

    function newFlower() {
      this.x = canvas.width * Math.random();
      this.y = 
      canvas.height * Math.random() - canvas.height;
      this.rotation = Math.random() * 360;
      this.petalColor = petalColors
      [Math.floor(Math.random() * petalColors.length)];
      this.centerColor = petalColors
      [Math.floor(Math.random() * petalColors.length)];
      this.petalSize = Math.random() * 10 + 3;
      this.centerSize = this.petalSize / 3;
      this.speed = this.petalSize/2;
      this.rise = 0;
      this.angle = 0;
    }

    for (let i = 0; i < numberOfFlowers; i++) {
      flowers.push(new newFlower());
    }

    function changeFlower(flower) {
      flower.rotation += 0.5;
      flower.angle += 0.01;
      flower.rise += 0.5;
      flower.y += flower.speed;
      flower.x += 
      Math.sin(flower.angle) - 0.5 + Math.random();

      if (flower.y >= canvas.height + 20) {
        flower.y = -20;
        flower.x = Math.random() * canvas.width;
      }
    }

    function drawFlower(flower) {
      // Draw flower petals
      for (let i = 0; i < 6; i++) {
        const angle = (i * Math.PI) / 3;
        const petalX = 
        flower.x + Math.cos(angle) * flower.petalSize;
        const petalY = 
        flower.y + Math.sin(angle) * flower.petalSize;

        ctx.beginPath();
        ctx.lineWidth = flower.petalSize / 4;
        ctx.strokeStyle = flower.petalColor;
        ctx.moveTo(petalX + flower.petalSize / 4, petalY);
        ctx.lineTo(petalX, petalY + flower.petalSize / 4);
        ctx.stroke();
        ctx.closePath();
      }

      // Draw flower center
      ctx.beginPath();
      ctx.arc
      (flower.x, flower.y, flower.centerSize, 
      0, 2 * Math.PI, false);
      ctx.fillStyle = flower.centerColor;
      ctx.fill();
      ctx.closePath();
    }

    function animateFlowerConfetti() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      flowers.forEach(flower => {
        changeFlower(flower);
        drawFlower(flower);
      });

      requestAnimationFrame(animateFlowerConfetti);
    }

    animateFlowerConfetti();
  }

Output:

Reffered: https://www.geeksforgeeks.org

JavaScript

Related
JavaScript 2D Arrays
JavaScript setTimeout() Method
JavaScript setInterval() Method
ES6 Tutorial
Copy Constructor in JavaScript

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	20