├── LICENCE ├── README.md ├── foryou.zip ├── index.html ├── script.js └── style.css /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Dzarel Developer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Demo 2 | https://dzareldeveloper.github.io/ForYou/ 3 | -------------------------------------------------------------------------------- /foryou.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DzarelDeveloper/ForYou/e14cb1f6f9e89c2cb3237a80a4f90ad8b8f18416/foryou.zip -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Message for you 7 | 8 | 9 | 10 |
11 |

You like me?

12 | gif 13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const wrapper = document.querySelector(".wrapper"); 2 | const question = document.querySelector(".question"); 3 | const gif = document.querySelector(".gif"); 4 | const yesBtn = document.querySelector(".yes-btn"); 5 | const noBtn = document.querySelector(".no-btn"); 6 | 7 | yesBtn.addEventListener("click", () => { 8 | question.innerHTML = "Aaaaa, I like you too"; 9 | gif.src = 10 | "https://raw.githubusercontent.com/DzarelDeveloper/Img/main/gif.webp"; 11 | }); 12 | 13 | noBtn.addEventListener("mouseover", () => { 14 | const noBtnRect = noBtn.getBoundingClientRect(); 15 | const maxX = window.innerWidth - noBtnRect.width; 16 | const maxY = window.innerHeight - noBtnRect.height; 17 | 18 | const randomX = Math.floor(Math.random() * maxX); 19 | const randomY = Math.floor(Math.random() * maxY); 20 | 21 | noBtn.style.left = randomX + "px"; 22 | noBtn.style.top = randomY + "px"; 23 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | min-height: 100vh; 13 | background: whitesmoke; 14 | font-family: Verdana, Geneva, Tahoma, sans-serif; 15 | } 16 | 17 | .gif { 18 | height: 100%; 19 | width: 100%; 20 | } 21 | 22 | h2 { 23 | text-align: center; 24 | font-size: 1.5em; 25 | color: #e94d58; 26 | margin: 15px 0; 27 | } 28 | .btn-group { 29 | width: 100%; 30 | height: 50px; 31 | display: flex; 32 | justify-content: center; 33 | margin-top: 50px; 34 | } 35 | button { 36 | position: absolute; 37 | width: 150px; 38 | height: inherit; 39 | color: white; 40 | font-size: 1.2em; 41 | border-radius: 30px; 42 | outline: none; 43 | cursor: pointer; 44 | box-shadow: 0 2px 4px gray; 45 | border: 2px solid #e94d58; 46 | font-size: 1.2em; 47 | } 48 | button:nth-child(1) { 49 | margin-left: -200px; 50 | background: #e94d58; 51 | } 52 | button:nth-child(2) { 53 | margin-right: -200px; 54 | background: white; 55 | color: #e94d58; 56 | } --------------------------------------------------------------------------------