Skip to main content
Creative Coding Projects

Will You Be My Valentine? — Interactive Website with HTML, CSS & JavaScript

Create the iconic "Will You Be My Valentine?" interactive website with a dodging No button, heart animations, and confetti celebrations.

P

Pakua De

Frontend Developer & Creative Coding Lead

Published

Jul 16, 2026

Read Time

12 min read

love.html
💝
Creative Coding Projects

🎯 What You'll Build

The classic "Will You Be My Valentine?" website where the "No" button dodges the cursor every time they try to click it, the "Yes" button grows bigger with each dodge, and clicking "Yes" triggers a massive confetti celebration! 🎉

---

🔗 Live Demo

👉 Try the Live Demo →

---

📦 Get the Source Code

> ☕ Download on Buy Me a Coffee → > > Includes: 5 theme variants • Music support • Custom message • Photo integration

---

🛠️ The Dodging "No" Button — Core Logic

This is the heart of the project. When the user hovers over "No", it teleports to a random position:

javascript
123456789101112131415161718192021222324252627282930313233 
let noCount = 0;
const noMessages = [
    "Are you sure? 🥺",
    "Please reconsider... 😢", 
    "Don't do this to me! 💔",
    "I'll cry... 😭",
    "Pretty please? 🙏",
    "I'll share my fries with you! 🍟"
];

function dodgeNo() {
    const btn = document.getElementById('noBtn');
    
    // Random position
    const x = Math.random() * (window.innerWidth - 120);
    const y = Math.random() * (window.innerHeight - 50);
    btn.style.position = 'fixed';
    btn.style.left = x + 'px';
    btn.style.top = y + 'px';
    
    // Shrink No button
    btn.style.transform = `scale(${Math.max(1 - noCount * 0.1, 0.2)})`;
    
    // Grow Yes button
    const yesBtn = document.getElementById('yesBtn');
    yesBtn.style.fontSize = Math.min(1.2 + noCount * 0.15, 2.5) + 'rem';
    
    // Show funny message
    document.getElementById('msg').textContent = 
        noMessages[Math.min(noCount, noMessages.length - 1)];
    
    noCount++;
}

CSS Floating Hearts

css
12345678910111213 
.heart {
    position: fixed;
    color: #ff4d6d;
    font-size: 20px;
    opacity: 0.6;
    animation: heartFloat linear infinite;
    pointer-events: none;
}

@keyframes heartFloat {
    0%   { transform: translateY(100vh) rotate(0deg); opacity: 0.6; }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}
javascript
12345678910 
function spawnHeart() {
    const h = document.createElement('div');
    h.className = 'heart';
    h.textContent = ['❤️','💕','💖','💝'][Math.floor(Math.random()*4)];
    h.style.left = Math.random() * 100 + '%';
    h.style.animationDuration = (4 + Math.random() * 6) + 's';
    document.body.appendChild(h);
    setTimeout(() => h.remove(), 10000);
}
setInterval(spawnHeart, 2000);

The "Yes" Celebration

javascript
1234567891011121314 
function sayYes() {
    // Hide question, show celebration
    document.getElementById('question').style.display = 'none';
    document.getElementById('celebration').classList.add('active');
    
    // Confetti burst
    for (let i = 0; i < 200; i++) {
        particles.push(new Particle(
            canvas.width / 2,
            canvas.height * 0.5
        ));
    }
    animateConfetti();
}

---

🎨 Customization

WhatHow
Change the questionEdit the <h1> text
Change dodge messagesEdit the noMessages array
Change colorsModify CSS gradient values
Add musicAdd <audio> tag, play on "Yes" click
Add your photoReplace the bear emoji with an <img>

---

🔗 Related

P

About the Author: Pakua De

Frontend Developer & Creative Coding Lead

Pakua spends most weekends turning odd ideas — bouncing DVD logos, generative art, tiny browser games — into working code. He writes Geeky Script's Creative Coding series, teaching JavaScript and CSS through playful, visual projects rather than dry syntax drills.

PREVIOUS ARTICLE Beginner's Guide to Machine Learning in 2026