Happy New Year 2024 | New Year Card Design using HTML CSS and JavaScript

Last Updated : 26 Apr, 2024

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

@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap"); 
  
* { 
    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.3rem; 
} 
  
.bulb { 
    height: 100px; 
    width: 100px; 
    border-radius: 50%; 
    background-color: transparent; 
} 
  
.string1 { 
    height: 100px; 
    background-color: #adeb9c; 
} 
  
.bulb1 { 
    background-color: #adeb9c; 
} 
  
.string2 { 
    transition: all infinite ease-in; 
    height: 180px; 
    background-color: #f1a5c5; 
} 
  
.bulb2 { 
    background-color: #f1a5c5; 
} 
  
.string3 { 
    transition: all infinite ease-in; 
    height: 60px; 
    background-color: #d997dc; 
} 
  
.bulb3 { 
    background-color: #d997dc; 
} 
  
.string4 { 
    transition: all infinite ease-in; 
    height: 150px; 
    background-color: #d4db8a; 
} 
  
.bulb4 { 
    background-color: #d4db8a; 
} 
  
.text-container { 
    text-align: center; 
    color: #fff; 
} 
  
.text-container h2 { 
    font-size: 40px; 
    letter-spacing: 3px; 
} 
  
.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 { 
    position: absolute; 
    width: 100%; 
    bottom: 0; 
    /* opacity: 0; */
    transition: transform 0.3s ease-in-out, opacity 0.3s 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 
    } 
} 