WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CIAO AMICO MIO
588
anhchoi901
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
21 November 2024
CIAO
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"; });
