I Love You with Heart Rain

What the Project Does

This small website shows a cute “I ❤️ You” message on the screen and adds raining heart emojis in the background. The hearts fall from the top of the screen to the bottom, making the page look romantic and beautiful.

1. index.html (The Structure)

This is the main file that holds everything together. It looks like this:

Copy Code
<!DOCTYPE html>
<html>
<head>
  <title>I Love You</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="raining-hearts-container"></div>
  <h1>I ❤️ You</h1>

  <script src="script.js"></script>
  <script src="raining-hearts.js"></script>
</body>
</html>

What’s going on:

  • The <link> tag connects the CSS file for styling.
  • <div class="raining-hearts-container"> is a hidden container that JavaScript will fill with falling hearts.
  • <h1>I ❤️ You</h1> is the main message.
  • Two <script> tags at the bottom load the JavaScript files that control animations.

2. style.css (The Look and Feel)

This file controls how everything looks on the screen.

Here’s a key part of it:

Copy Code
.raining-hearts-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

This makes the heart container cover the whole screen, sit in the background, and not block clicks.

And for the hearts:

Copy Code
.heart {
    position: absolute;
    top: -2rem;
    font-size: 3rem;
    animation-name: fall;
    animation-timing-function: linear;
}

It means:

  • Each heart starts above the screen (top: -2rem)
  • It’s big (3rem)
  • It uses the animation called fall

Then we define the animation itself:

Copy Code
@keyframes fall {
    to {
        transform: translateY(100vh);
        opacity: 0;
    }
}

This moves each heart from the top to the bottom of the screen (100vh) and makes it slowly disappear (opacity: 0).

3. raining-hearts.js (The Falling Hearts Code)

This is where the magic happens. Here’s the important part:

Copy Code
const container = document.querySelector('.raining-hearts-container');

function createHeart() {
    const heart = document.createElement('div');
    heart.classList.add('heart');
    heart.style.left = Math.random() * 100 + 'vw';
    heart.style.animationDuration = 2 + Math.random() * 3 + 's';
    heart.innerText = '❤️';
    container.appendChild(heart);

    setTimeout(() => {
        heart.remove();
    }, 5000);
}

setInterval(createHeart, 100);

Here’s what this code does:

  • It picks the container on the page.
  • Every 100 milliseconds (10 times per second), it creates a new <div> with a heart emoji (❤️).
  • Each heart appears in a random spot across the screen (left = random vw).
  • Each one falls at a slightly different speed.
  • After 5 seconds, the heart disappears to keep things clean.

Complete Code