Preview:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Student Birthday Board</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    overflow-x: hidden;
    text-align: center;
}

.container {
    max-width: 600px;
    margin: 80px auto;
    background: white;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
    z-index: 2;
}

h1 {
    color: #d81b60;
}

.student-card {
    background: #fff3e0;
    padding: 20px;
    margin: 15px 0;
    border-radius: 15px;
    animation: pop 0.5s ease-in-out;
}

.student-photo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 4px solid #ff4081;
}

@keyframes pop {
    0% { transform: scale(0.5); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.no-birthday {
    color: red;
    font-weight: bold;
    font-size: 18px;
}

/* 🎈 Balloons */
.balloon {
    width: 50px;
    height: 70px;
    border-radius: 50%;
    position: absolute;
    bottom: -100px;
    animation: float 8s infinite ease-in;
}

.balloon:before {
    content: "";
    width: 2px;
    height: 60px;
    background: #555;
    position: absolute;
    left: 50%;
    top: 70px;
}

@keyframes float {
    0% { transform: translateY(0) translateX(0); }
    100% { transform: translateY(-110vh) translateX(30px); }
}
</style>
</head>

<body>

<div class="container">
    <h1>🎂 Today's Birthday 🎉</h1>
    <div id="birthdayList">Loading...</div>
</div>

<script>

// 🎈 Balloon Animation
function createBalloons() {
    const colors = ["#ff4d4d", "#4da6ff", "#66ff66", "#ffcc00", "#cc66ff"];
    for(let i = 0; i < 15; i++){
        let balloon = document.createElement("div");
        balloon.className = "balloon";
        balloon.style.left = Math.random() * 100 + "vw";
        balloon.style.background = colors[Math.floor(Math.random() * colors.length)];
        balloon.style.animationDuration = (5 + Math.random() * 5) + "s";
        document.body.appendChild(balloon);
    }
}
createBalloons();

// 🔗 Your Script URL
const url = "https://script.google.com/macros/s/AKfycby0GeN0gj6gsJp8y0Csqrb3gpLQFVBsdUzL8l9nRcHFPCuJUHh45msaEVNQSG3kzGT1Ig/exec";

fetch(url)
.then(res => res.json())
.then(data => {

    const today = new Date();
    const todayMonth = today.getMonth();
    const todayDate = today.getDate();

    let output = "";
    let birthdayFound = false;

    data.forEach(student => {

        if(student.month === todayMonth && student.day === todayDate){
            birthdayFound = true;

            let photoURL = student.photo ? student.photo : "https://via.placeholder.com/130";

            output += `
                <div class="student-card">
                    <img src="${photoURL}" 
                         class="student-photo"
                         onerror="this.src='https://via.placeholder.com/130'">
                    <h2>🎉 ${student.name}</h2>
                    <p>${student.class}</p>
                </div>
            `;
        }
    });

    if(!birthdayFound){
        output = `<div class="no-birthday">🎈 No birthdays today</div>`;
    }

    document.getElementById("birthdayList").innerHTML = output;

});
</script>

</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter