Explore the perfect blend of creativity and technology with our Happy New Year card design tutorial using HTML, CSS, and JavaScript. Read step-by-step guide to craft visually stunning and interactive New Year cards for a memorable celebration. Elevate your web development skills while spreading joy and wishes in style.
Prerequisites:
Approach
- We are creating an HTML file in which we are creating some elements to show the Happy New Year text on the screen and the balloons.
- Also, we are adding CSS to decorate the page.
- And we are creating a file of JavaScript in which we are setting two countdowns, one countdown is from now until the new year time.
- Another countdown is for after the new year. We are creating a function that will be called once the countdown ends.
- After the end of the countdown, it will show the balloons and the sparkles on the screen.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
< title >Happy New Year Card</ title >
< link rel = "stylesheet" href = "style.css" />
</ head >
< body >
< div class = "container" >
< div class = "clock" >
< div class = "digit-container" >
< div class = "digit" id = "day1" >0</ div >
</ div >
< div class = "digit-container" >
< div class = "digit" id = "day2" >0</ div >
</ div >
< span >:</ 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 class = "countdown" ></ div >
< div class = "card" >
< div class = "decor-container__upper" >
< div class = "decor-container" >
< div class = "strings string1" ></ div >
< div class = "bulb bulb1" ></ div >
</ div >
< div class = "decor-container" >
< div class = "strings string2" ></ div >
< div class = "bulb bulb2" ></ div >
</ div >
< div class = "decor-container" >
< div class = "strings string3" ></ div >
< div class = "bulb bulb3" ></ div >
</ div >
< div class = "decor-container" >
< div class = "strings string4" ></ div >
< div class = "bulb bulb4" ></ div >
</ div >
</ div >
</ div >
< div class = "text-container" >
< h2 >HAPPY NEW YEAR</ h2 >
< h2 >2024</ h2 >
</ div >
< canvas id = "confettiHTMLCanvas" ></ canvas >
</ div >
< script src = "script.js" ></ script >
</ body >
</ html >
|
CSS
* { padding : 0 ;
margin : 0 ;
box-sizing: border-box;
} body { font-family : "Lobster" , sans-serif ;
display : flex;
} canvas { position : absolute ;
top : 0 ;
left : 0 ;
pointer-events: none ;
} .container { color : white ;
width : 550px ;
padding : 2% ;
background-color : #0d2146 ;
display : flex;
flex- direction : column;
align-items: center ;
justify- content : center ;
margin : auto ;
margin-top : 50px ;
border-radius: 10px ;
box-shadow: 2px 4px 8px #0d2146 ;
} .heading { color : #fff ;
} .card { display : flex;
flex- direction : column;
justify- content : space-around;
height : 70% ;
width : 50% ;
margin : 50px 0 ;
/* background-color: #fff; */
border-radius: 10px ;
} .decor-container__upper { display : flex;
justify- content : space-around;
} .decor-container { display : flex;
flex- direction : column;
align-items: center ;
} .strings { height : 0 ;
width : 0.3 rem;
} .bulb { height : 100px ;
width : 100px ;
border-radius: 50% ;
background-color : transparent ;
} .string 1 {
height : 100px ;
background-color : #adeb9c ;
} .bulb 1 {
background-color : #adeb9c ;
} .string 2 {
transition: all infinite ease-in;
height : 180px ;
background-color : #f1a5c5 ;
} .bulb 2 {
background-color : #f1a5c5 ;
} .string 3 {
transition: all infinite ease-in;
height : 60px ;
background-color : #d997dc ;
} .bulb 3 {
background-color : #d997dc ;
} .string 4 {
transition: all infinite ease-in;
height : 150px ;
background-color : #d4db8a ;
} .bulb 4 {
background-color : #d4db8a ;
} .text-container { text-align : center ;
color : #fff ;
} .text-container h 2 {
font-size : 40px ;
letter-spacing : 3px ;
} .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 { position : absolute ;
width : 100% ;
bottom : 0 ;
/* opacity: 0; */
transition: transform 0.3 s ease-in-out, opacity 0.3 s ease-in-out;
color : white ;
} |
Javascript
// Countdown timer code let newSecond1, newSecond2,
newMinute1,
newMinute2,
newHour1,
newHour2,
newDay1,
newDay2 = 0;
let lastSecond1, lastSecond2,
lastMinute1,
lastMinute2,
lastHour1,
lastHour2,
lastDay1,
lastDay2 = 0;
const countdownDiv = document.querySelector( ".countdown" );
const newYearDate = new Date( "31 Dec, 2023, 23:59:59" );
const currentDate = new Date();
const milliDiff = newYearDate.getTime() - currentDate.getTime(); const countDown = () => { const newYearDate = new Date( "31 Dec, 2023, 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;
const remDays = Math.floor(totalHours / 24);
const remHours = totalHours % 24;
if (remMinutes < 10) {
remMinutes = "0" + remMinutes;
}
if (remSeconds < 10) {
remSeconds = "0" + remSeconds;
}
if (totalHours < 10) {
totalHours = "0" + totalHours;
}
// countdownDiv.innerHTML =
`<h1 class= "heading" >Time Remaining: ${remDays}d :
${remHours}h : ${remMinutes}m : ${remSeconds}s</h1>`;
// document.getElementById("hour1").innerHTML =
Math.floor(remHours / 10);
// console.log(document.getElementById("hour1"))
newSecond2 = Math.floor(remSeconds % 10);
newSecond1 = second1.innerText = Math.floor(remSeconds / 10);
newMinute1 = Math.floor(remMinutes / 10);
newMinute2 = Math.floor(remMinutes % 10);
newHour1 = Math.floor(remHours / 10);
newHour2 = Math.floor(remHours % 10);
newDay1 = Math.floor(remDays / 10);
newDay2 = Math.floor(remDays % 10);
slideDigit( "day1" , newDay1, lastDay1);
slideDigit( "day2" , newDay2, lastDay2);
slideDigit( "hour1" , newHour1, lastHour1);
slideDigit( "hour2" , newHour2, lastHour2);
slideDigit( "minute1" , newMinute1, lastMinute1);
slideDigit( "minute2" , newMinute2, lastMinute2);
slideDigit( "second1" , newSecond1, lastSecond1);
slideDigit( "second2" , newSecond2, lastSecond2);
setTimeout(() => {
second2.innerText = lastSecond2 = newSecond2;
second1.innerText = lastSecond1 = newSecond1;
minute2.innerText = lastMinute2 = newMinute2;
minute1.innerText = lastMinute1 = newMinute1;
hour2.innerText = lastHour2 = newHour2;
hour1.innerText = lastHour1 = newHour1;
day2.innerText = lastDay2 = newDay2;
day1.innerText = lastDay1 = newDay1;
}, 500);
}; let myInterval = setInterval(countDown, 1000); // Replacing countdown time to current time setTimeout(() => { clearInterval(myInterval);
setInterval(newTimer, 1000);
startFiringConfetti();
}, milliDiff); const newTimer = () => { const newCurrentDate = new Date();
let hours = newCurrentDate.getHours();
let minutes = newCurrentDate.getMinutes();
let seconds = newCurrentDate.getSeconds();
if (seconds < 10) {
seconds = "0" + seconds;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
if (hours < 10) {
hours = "0" + hours;
}
// countdownDiv.innerHTML =
`<h1 class= "heading" >CountDown: ${hours} : ${minutes} : ${seconds}</h1>`;
}; function startFiringConfetti() {
const canvas = document.getElementById( "confettiHTMLCanvas" );
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext( "2d" );
const pieces = [];
const numberOfPieces = 200;
const colors = [ "#f00" , "#0f0" , "#00f" , "#ff0" , "#0ff" ];
function newPiece() {
this .x = canvas.width * Math.random();
this .y = canvas.height * Math.random() - canvas.height;
this .rotation = Math.random() * 360;
this .color =
colors[Math.floor(Math.random() * colors.length)];
this .diameter = Math.random() * 10 + 5;
this .speed = this .diameter / 2;
this .rise = 0;
this .angle = 0;
}
for (let i = 0; i < numberOfPieces; i++) {
pieces.push( new newPiece());
}
function updateNewPiece(piece) {
piece.rotation += 0.5;
piece.angle += 0.01;
piece.rise += 0.5;
piece.y -= piece.speed;
piece.x += Math.sin(piece.angle) - 0.5 + Math.random();
if (piece.y <= -20) {
piece.y = canvas.height + 20;
piece.x = Math.random() * canvas.width;
}
}
function drawNewPiece(piece) {
ctx.beginPath();
ctx.lineWidth = piece.diameter;
ctx.strokeStyle = piece.color;
ctx.moveTo(piece.x + piece.diameter / 4, piece.y);
ctx.lineTo(piece.x, piece.y + piece.diameter / 4);
ctx.stroke();
ctx.closePath();
}
function animateConfetti() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
pieces.forEach((piece) => {
updateNewPiece(piece);
drawNewPiece(piece);
});
requestAnimationFrame(animateConfetti);
}
animateConfetti();
} const bulb1 = document.querySelector( ".bulb1" );
const bulb2 = document.querySelector( ".bulb2" );
const bulb3 = document.querySelector( ".bulb3" );
const bulb4 = document.querySelector( ".bulb4" );
const blinkBulb1 = () => { bulb1.classList.toggle( "bulb1" );
}; setInterval(blinkBulb1, 500); const blinkBulb2 = () => { bulb2.classList.toggle( "bulb2" );
}; setInterval(blinkBulb2, 800); const blinkBulb3 = () => { bulb3.classList.toggle( "bulb3" );
}; setInterval(blinkBulb3, 300); const blinkBulb4 = () => { bulb4.classList.toggle( "bulb4" );
}; setInterval(blinkBulb4, 400); function slideDigit(id, value, lastValue) {
console.log( "slide" );
const digit = document.getElementById(id);
if (value !== lastValue) {
digit.style.transform = "translateY(-100%)" ; // Move digit upwards
digit.style.opacity = "0" ; // Fade out current digit
setTimeout(() => {
digit.style.transform = "translateY(0)" ;
// Slide back to original position
digit.textContent = value; // Set new digit value
digit.style.opacity = "1" ; // Fade in new digit
}, 300); // Adjust this timeout as needed
}
} |
Output: