Indian Republic Day 2024 | Design National Flag Tiranga
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" >w3wiki</ 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 : 100 vh; width : 100 vw; position : relative ; } /* countdown CSS */ .clock { display : flex; font-size : 3 rem; } .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.3 s ease-in-out, opacity 0.3 s 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 4 s linear infinite; } .greenPolygon { background-color : #046A38 ; transform: rotate( 0 deg); } .whitePolygon { background-color : #fff ; transform: rotate( 120 deg); } .saffronPolygon { background-color : #FF671F ; transform: rotate( 240 deg); 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( 15 deg * 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.5 deg); 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 2 s ease-in-out; } .slideFlag.flag-container . white .ashok-chakra.bigger-chakra { visibility : hidden ; transition: all 0.3 s ease-in-out; } @keyframes spin { to { transform: rotate( 360 deg); } } .wish-container { text-align : center ; color : #fff ; } /* Utility Classes */ .heading 1 { color : #FF671F ; font-size : 50px ; padding : 5px ; } .heading 2 { 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.6 rem; } .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:
Contact Us