html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Beats</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="id"><h2>Happy Valentine's Day.<br><br>Tap The Heart</h2></div>
<button class="love-heart pulse" onclick="displayLoveMessage()"></button>
<div class="love-message">Tap the heart!</div>
<audio id="heartbeatSound" src="https://www.fesliyanstudios.com/play-mp3/4387"></audio>
<script src="script.js"></script>
</body>
</html>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: radial-gradient(circle, #ff7eb3, #ff758c);
font-family: 'Poppins', sans-serif;
flex-direction: column;
color: white;
overflow: hidden;
text-align: center;
user-select: none;
}
.love-heart {
position: relative;
width: 120px;
height: 120px;
background: red;
transform: rotate(-45deg);
box-shadow: 0 0 30px rgba(255, 0, 0, 0.8);
transition: transform 0.2s ease, box-shadow 0.2s ease;
cursor: pointer;
border: none;
outline: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const loveQuotes = [
"Love is in the air!",
"You are loved!",
"Spread love and joy!",
"Keep shining!",
"Love makes everything beautiful!",
"Every heartbeat speaks love!",
"You make the world brighter!"
];
function displayLoveMessage() {
const messageBox = document.querySelector('.love-message');
messageBox.textContent = loveQuotes[Math.floor(Math.random() * loveQuotes.length)];
messageBox.classList.add('show-message');
document.getElementById("heartbeatSound").play();
createFloatingHeart();
}
function createFloatingHeart() {
const heart = document.createElement("div");
heart.classList.add("floating-heart");
heart.textContent = "❤️";
heart.style.left = `${Math.random() * 100}%`;
heart.style.animationDuration = `${3 + Math.random() * 3}s`;
document.body.appendChild(heart);
setTimeout(() => heart.remove(), 4000);
}
BROWSER
Console
Run