Add files via upload

PreciousPayne · Apr 12, 2024 · f758122 · f758122
commit f758122
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 0 deletions.
diff --git a/Sick.mp3 b/Sick.mp3
diff --git a/assets/date.png b/assets/date.png
diff --git a/assets/erm-fingers.gif b/assets/erm-fingers.gif
diff --git a/assets/img.png b/assets/img.png
diff --git a/assets/oh-yay.gif b/assets/oh-yay.gif
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Ask For Date</title>
+  </head>
+  <body>
+    <audio id="background-audio" autoplay loop>
+      <source src="sick.mp3" type="audio/mpeg">
+    </audio>
+
+    <img src="assets/img.png" alt="date?" class="header-img" />
+    <div class="container" id="container">
+      <img src="assets/erm-fingers.gif" alt="please" class="image-1" />
+      <img src="assets/oh-yay.gif" alt="yes" class="image-2 hide" />
+      <button class="btn btn-yes">Yes</button>
+      <button class="btn btn-no">No</button>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,50 @@
+const container = document.getElementById("container");
+const imageOne = document.querySelector(".image-1");
+const imageTwo = document.querySelector(".image-2");
+const btnYes = document.querySelector(".btn-yes");
+const btnNo = document.querySelector(".btn-no");
+
+function getRandomNumber(min, max) {
+  // Calculate the random number between min and max (inclusive)
+  const randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
+
+  return randomNumber;
+}
+
+btnNo.addEventListener("mouseover", (event) => {
+  const containerHeight = container.getBoundingClientRect().height;
+  const containerWidth = container.getBoundingClientRect().width;
+  const btnHeight = btnNo.getBoundingClientRect().height;
+  const btnWidth = btnNo.getBoundingClientRect().width;
+  const btnTop = btnNo.getBoundingClientRect().top;
+  const btnLeft = btnNo.getBoundingClientRect().left;
+
+  let newTop = btnTop;
+  let newLeft = btnLeft;
+  while (Math.abs(newTop - btnTop) < containerHeight / 3) {
+    newTop = getRandomNumber(0, containerHeight - btnHeight);
+  }
+
+  while (Math.abs(newLeft - btnLeft) < containerWidth / 3) {
+    newLeft = getRandomNumber(0, containerWidth - btnWidth);
+  }
+
+  btnNo.style.top = Math.floor(newTop) + "px";
+  btnNo.style.left = Math.floor(newLeft) + "px";
+});
+
+btnYes.addEventListener("click", (e) => {
+  btnNo.classList.add("hide");
+  imageOne.classList.add("hide");
+  imageTwo.classList.remove("hide");
+});
+document.addEventListener("DOMContentLoaded", function() {
+  var audio = document.getElementById("background-audio");
+  audio.play()
+    .then(function() {
+      console.log('Audio playback started successfully.');
+    })
+    .catch(function(error) {
+      console.error('Error starting audio playback:', error);
+    });
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,83 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.hide {
+  display: none;
+}
+
+body {
+  padding: 2rem;
+  width: 100%;
+  min-height: 100vh;
+  background-image: linear-gradient(to right bottom, #cffafe, #22d3ee);
+  display: flex;
+  flex-direction: column;
+}
+
+.header-img {
+  display: flex;
+  width: 100%;
+  max-width: 600px;
+  margin-inline: auto;
+  filter: drop-shadow(5px 5px 20px rgba(0, 0, 0, 0.2));
+}
+
+.container {
+  flex: 1;
+  position: relative;
+  isolation: isolate;
+  width: 100%;
+  max-width: 1200px;
+  margin-inline: auto;
+}
+
+.image-1,
+.image-2 {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.image-1 {
+  width: 175px;
+}
+
+.image-2 {
+  width: 250px;
+}
+
+.btn {
+  position: absolute;
+  top: calc(100% - 5rem);
+  min-width: 120px;
+  padding: 0.75rem 1rem;
+  font-size: 1.25rem;
+  outline: none;
+  border: none;
+  background-color: #f8fafc;
+  border-radius: 5px;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.btn:hover {
+  background-color: #e2e8f0;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+.btn-yes {
+  left: 50%;
+  transform: translateX(calc(-100% - 1rem));
+  z-index: 1;
+}
+
+.btn-no {
+  left: calc(50% + 1rem);
+  transition: all 0.5s ease;
+  z-index: 2;
+}