WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HALLO MEIN FREUND
1026
anhchoi901
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
13 October 2024
meine sozialen Medien
27 October 2024
Portfolio allgemein (Schritt für Schritt)
21 November 2024
Hallo
HTML
Copy
Message for you
You like me?
Yes
No
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"; });