From 5ff8d2f3484451522983ed7edf8ac48b33e75193 Mon Sep 17 00:00:00 2001
From: jeycaarce <149430677+jeycaarce@users.noreply.github.com>
Date: Mon, 20 Nov 2023 19:02:35 +0800
Subject: [PATCH] Add files via upload
---
index.html | 20 +++++++++++++++++++
script.js | 23 ++++++++++++++++++++++
style.css | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 99 insertions(+)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 style.css
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..509c7a7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,20 @@
+
+
+
+
+
+ message for you
+
+
+
+
+
Will you go out with me?
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..f6c1ad1
--- /dev/null
+++ b/script.js
@@ -0,0 +1,23 @@
+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 = "Yay, see you on the 18th!";
+ gif.src =
+ "https://media.giphy.com/media/UMon0fuimoAN9ueUNP/giphy.gif";
+});
+
+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";
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..a716c98
--- /dev/null
+++ b/style.css
@@ -0,0 +1,56 @@
+*
+{
+ 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 {
+ height: 100%;
+ width: 100%;
+}
+
+h2 {
+ 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;
+}
\ No newline at end of file