html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Calculator ❤️</title>
</head>
<body>
<div class="heart-container"></div>
<div class="card">
<div class="heart">❤️</div>
<h2>Love Calculator</h2>
<p>Enter your names to calculate love percentage!</p>
<input type="text" id="name1" placeholder="Your Name">
<input type="text" id="name2" placeholder="Partner's Name">
<button class="btn" onclick="calculateLove()">Calculate Love</button>
<p class="result" id="result"></p>
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
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-color: #ffccd5;
overflow: hidden;
font-family: 'Arial', sans-serif;
position: relative;
}
.card {
position: relative;
background: white;
padding: 20px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 350px;
z-index: 2;
}
.heart {
color: red;
font-size: 50px;
}
.result {
display: none;
font-size: 20px;
Enter to Rename, Shift+Enter to Preview
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
function calculateLove() {
const name1 = document.getElementById("name1").value.trim();
const name2 = document.getElementById("name2").value.trim();
if (name1 === "" || name2 === "") {
alert("Please enter both names!");
return;
}
const lovePercentage = Math.floor(Math.random() * 101);
const resultText = `${name1} ❤️ ${name2} = ${lovePercentage}% Love!`;
document.getElementById("result").textContent = resultText;
document.getElementById("result").style.display = "block";
}
function createHeart() {
const heart = document.createElement("div");
heart.classList.add("floating-heart");
heart.innerHTML = "❤️";
document.querySelector(".heart-container").appendChild(heart);
heart.style.left = Math.random() * 100 + "vw";
heart.style.animationDuration = Math.random() * 3 + 2 + "s";
setTimeout(() => { heart.remove(); }, 5000);
}
setInterval(createHeart, 500);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run