WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HELLO MY FRIEND
1027
anhchoi901
Open In Editor
Publish Your Code
10 January 2025
my first calculator
22 April 2025
A Code by hanyhelmy119
HTML
Copy
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Message for you</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <h2 class="question">You like me?</h2> <img class="gif" alt="gif" src="https://raw.githubusercontent.com/DzarelDeveloper/Img/main/gifyou.webp"> <div class="btn-group"> <button class="yes-btn">Yes</button> <button class="no- btn">No</button> </div> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
{ margin: 0; padding: 0; box-sizing: border-box; } body { } display: flex; justify-content: center; align-items: center; min-height: 100vh; background: whitesmoke; font-family: Verdana, Geneva, Tahoma, sans-serif; .gif { } h2 { } height: 100%; width: 100%; text-align: center; font-size: 1.5em; color: #e94d58; margin: 15px 0; .btn-group { } width: 100%; height: 50px; display: flex; justify-content: center; margin-top: 50px; button { } position: absolute; width: 150px; height: inherit; color: white; font-size: 1.2em; border-radius: 30px; outline: none; cursor: pointer; box-shadow: 0 2px 4px gray; border: 2px solid #e94d58; font-size: 1.2em; button:nth-child(1) { margin-left: -200px; background: #e94d58; } button:nth-child(2) { } margin-right: -200px; background: white; color: #e94d58; }
JS
Copy
const wrapper = document.querySelector(".wrapper"); const question = document.querySelector(".question"); const gif document.querySelector(".gif"); const yesBtn = document.querySelector(".yes-btn"); const noBtn = document.querySelector(".no-btn"); yesBtn.addEventListener("click", () => { question.innerHTML = "Aaaaa, I like you too"; gif.src = "https://raw.githubusercontent.com/DzarelDeveloper/Img/main/gif.webp"; }); noBtn.addEventListener("mouseover", () => { const noBtnRect = noBtn.getBoundingClientRect(); const maxX = window.innerWidth noBtnRect.width; const maxY = window.innerHeight noBtnRect.height; const randomX = Math.floor(Math.random() * maxX); const randomY = Math.floor(Math.random() * maxY); noBtn.style.left = randomX + "px"; noBtn.style.top = randomY + "px"; });
