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
* { 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: