Looking for a fun and creative coding project?
This “Do You Love Me?” webpage is a playful interactive design
created using HTML, CSS, and JavaScript.
It’s a popular mini project idea for beginners who want to practice web development while having fun.
Project Features
- Interactive “Do You Love Me?” question
- Funny effect – the No button runs away when you hover
- Click Yes to see a heart animation and a love gif
- Made with pure HTML, CSS, and JavaScript
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="do_you_love_me.css" />
<title>Do You Love Me?</title>
</head>
<body>
<div class="question-container container">
<h2 class="question">Do you love me?</h2>
<div class="button-container">
<button class="yes-btn btn js-yes-btn">Yes</button>
<button class="no-btn btn js-no-btn">No</button>
</div>
</div>
<div class="result-container container">
<video class="gif-result" src="cute love gif.mp4" autoplay loop></video>
<h2>I knew it😍!</h2>
</div>
<div class="cssload-main">
<div class="cssload-heart">
<span class="cssload-heartL"></span>
<span class="cssload-heartR"></span>
<span class="cssload-square"></span>
</div>
<div class="cssload-shadow"></div>
</div>
<script src="do_you_love_me.js"></script>
</body>
</html>
JavaScript Code
// Save this file as do_you_love_me.js
const questionContainer = document.querySelector(".question-container");
const resultContainer = document.querySelector(".result-container");
const gifResult = document.querySelector(".gif-result");
const heartLoader = document.querySelector(".cssload-main");
const yesBtn = document.querySelector(".js-yes-btn");
const noBtn = document.querySelector(".js-no-btn");
// Move "No" button randomly
noBtn.addEventListener("mouseover", () => {
const newX = Math.floor(Math.random() * questionContainer.offsetWidth);
const newY = Math.floor(Math.random() * questionContainer.offsetHeight);
noBtn.style.left = `${newX}px`;
noBtn.style.top = `${newY}px`;
});
// "Yes" button functionality
yesBtn.addEventListener("click", () => {
questionContainer.style.display = "none";
heartLoader.style.display = "inherit";
setTimeout(() => {
heartLoader.style.display = "none";
resultContainer.style.display = "inherit";
gifResult.play();
}, 3000);
});
Download Project Files
Please wait 30 seconds to unlock the download link…
Conclusion
This funny mini project is a perfect way to practice HTML, CSS, and JavaScript.
It’s engaging, entertaining, and can even be shared with friends as a playful webpage.
Try customizing the text, gifs, or animations to make it more personal
