script.js

// Confetti effect
const btn = document.getElementById('surpriseBtn');
const canvas = document.getElementById('confetti');
const ctx = canvas.getContext('2d');

function resizeCanvas() {
  canvas.width = canvas.parentElement.offsetWidth;
  canvas.height = canvas.parentElement.offsetHeight;
}
resizeCanvas();
window.addEventListener('resize', resizeCanvas);

function randomColor() {
  const colors = ['#f14a95', '#fff6ea', '#ffb5a7', '#ffd6e0', '#f9c6c9', '#fbb1bd', '#ffe0f7'];
  return colors[Math.floor(Math.random() * colors.length)];
}

function makeConfetti(n) {
  let particles = [];
  for (let i = 0; i < n; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: -10,
      r: Math.random() * 5 + 6,
      d: Math.random() * 55 + 12,
      color: randomColor(),
      tilt: Math.random() * 10 - 5,
      tiltAngle: 0,
      tiltAngleIncremental: (Math.random() * 0.07) + 0.05
    });
  }
  return particles;
}

function animateConfetti(particles) {
  let angle = 0;
  function draw() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    for (let i = 0; i < particles.length; i++) {
      let p = particles[i];
      ctx.beginPath();
      ctx.lineWidth = p.r;
      ctx.strokeStyle = p.color;
      ctx.moveTo(p.x + p.tilt + p.r / 3, p.y);
      ctx.lineTo(p.x + p.tilt, p.y + p.tilt + p.r / 5);
      ctx.stroke();
    }
    update();
  }
  function update() {
    angle += 0.01;
    for (let i = 0; i < particles.length; i++) {
      let p = particles[i];
      p.y += (Math.cos(angle + p.d) + 3 + p.r / 2) / 2;
      p.x += Math.sin(angle);
      p.tiltAngle += p.tiltAngleIncremental;
      p.tilt = Math.sin(p.tiltAngle - i) * 15;

      if (p.y > canvas.height) {
        particles[i] = {
          ...p,
          x: Math.random() * canvas.width,
          y: -10,
          r: p.r,
          d: p.d,
          color: randomColor(),
          tilt: Math.random() * 10 - 5,
          tiltAngle: 0,
          tiltAngleIncremental: p.tiltAngleIncremental
        };
      }
    }
  }
  let times = 0;
  let animation = setInterval(()=> {
    draw();
    times++;
    if (times > 100) {
      clearInterval(animation);
      ctx.clearRect(0,0,canvas.width,canvas.height);
    }
  }, 16);
}

btn.onclick = function() {
  animateConfetti(makeConfetti(130));
  btn.textContent = "🎉 Love You! 🎉";
  btn.disabled = true;
};