Will You Be My Girlfriend? — Interactive Proposal Website Code

🎯 What You'll Build #

An interactive "Will you be my girlfriend?" website with a dodging "No" button, sparkle effects, and a fireworks celebration when she says yes!

---

🔗 Live Demo #

👉 Try the Live Demo →

---

📦 Get the Source Code #

> ☕ Download on Buy Me a Coffee →

---

🛠️ What Makes This Different #

Unlike the Valentine version, this proposal uses fireworks instead of confetti, sparkle particles instead of hearts, and a purple/violet color scheme for a more "special occasion" feel.

The Improved Dodge Logic #

The "No" button not only moves, it also shrinks and fades with each hover — making "Yes" the increasingly obvious choice:

function dodgeNo() {
    const btn = document.getElementById('noBtn');
    
    // Teleport to random screen position
    btn.style.position = 'fixed';
    btn.style.left = Math.random() * (window.innerWidth - 120) + 'px';
    btn.style.top = Math.random() * (window.innerHeight - 50) + 'px';
    
    // Shrink AND fade the No button
    noCount++;
    btn.style.transform = `scale(${Math.max(1 - noCount * 0.1, 0.2)})`;
    btn.style.opacity = Math.max(1 - noCount * 0.08, 0.2);
    
    // Grow the Yes button
    const yesBtn = document.getElementById('yesBtn');
    yesBtn.style.fontSize = Math.min(1.2 + noCount * 0.15, 2.5) + 'rem';
}

Fireworks Effect #

class FireworkParticle {
    constructor(x, y) {
        const angle = Math.random() * Math.PI * 2;
        const speed = 2 + Math.random() * 6;
        this.x = x; this.y = y;
        this.vx = Math.cos(angle) * speed;
        this.vy = Math.sin(angle) * speed;
        this.gravity = 0.05;
        this.life = 1;
        this.trail = [];
    }
    // Particles leave trails for that firework effect
}

---

🔗 Related #

• Will You Be My Valentine?

• Romantic Proposal Website with Slideshow & Music

• 5 Best GitHub Repositories for Romantic Websites