Completed the joke page

xobe19 · Jan 23, 2022 · 950d6dc · 950d6dc
1 parent acf50c2
commit 950d6dc
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 0 deletions.
diff --git a/image_assets/kyle_think_final.png b/image_assets/kyle_think_final.png
diff --git a/image_assets/laughing.png b/image_assets/laughing.png
diff --git a/joke.html b/joke.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="./stylesheets/home_page.css" />
+  <link rel="stylesheet" href="./stylesheets/joke.css" />
+  <link rel="stylesheet" href="./stylesheets/mobile.css" />
+  <title>Anbot - The Serverless Bot</title>
+</head>
+
+<body>
+  <div id="nav-bar">
+    <div id="nav-bar-flex-container">
+      <div id="logo">
+        <img src="./image_assets/kyle_50x50.png" alt="anbot_logo" />
+        <div id="logo-text">
+          <p>Anbot, inc.</p>
+        </div>
+      </div>
+      <div id="feedback-btn" class="button">
+        <div id="feedback-btn-flx-cntr">
+          <p>Feedback</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="homepage-flex-container">
+    <div id="homepage-content">
+      <br />
+      <br />
+      <img id="main-img" src="./image_assets/kyle_think_final.png" alt="Anbot Says Hi" />
+      <div id="main-text">
+        <p>Thinking</p>
+      </div>
+      <div id="description-text">
+        <p></p>
+      </div>
+      <br />
+      <div id="main-button-div">
+        <div class="button" id="get-started-btn">
+          <div id="get-started-btn-flx-cntr">
+            <p>Do it Again!</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="./scripts/joke.js"></script>
+</body>
+
+</html>
diff --git a/scripts/joke.js b/scripts/joke.js
@@ -0,0 +1,20 @@
+let joke_title = document.querySelector("#main-text p");
+let joke_text = document.querySelector("#description-text p");
+let button = document.querySelector("#get-started-btn");
+let joke_loaded = false;
+let img = document.querySelector("#main-img");
+let dots = 1;
+fetch("https://backend-omega-seven.vercel.app/api/getjoke")
+  .then((res) => res.json())
+  .then((data) => {
+    data = data[0];
+    joke_title.innerText = data.question;
+    joke_text.innerText = data.punchline;
+    joke_loaded = true;
+    joke_text.parentElement.style.display = "block";
+    button.style.display = "block";
+    img.setAttribute("src", "./image_assets/laughing.png")
+  });
+
+
+
diff --git a/stylesheets/joke.css b/stylesheets/joke.css
@@ -0,0 +1,15 @@
+body {
+  background-image: url("../image_assets/bg_flipped.jpg");
+}
+#homepage-content img {
+  width: 300px;
+}
+#homepage-content {
+  align-items: center;
+}
+#description-text {
+  display: none;
+}
+.button {
+  display: none;
+}