Merge pull request #14 from fac30/jokes-api

Jokes api
fac30sb · Mar 12, 2024 · 25d13e5 · 25d13e5
2 parents dd760f4 + 4cf9a1c
commit 25d13e5
Show file tree

Hide file tree

Showing 5 changed files with 177 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -48,8 +48,10 @@
                     <input type="search" name="search" id="search" class="search__bar margin-top-sm">
                     <button type="submit" class="search-btn">Search</button>
                 </div>
-
-
+
+                <div class="search-result">
+                    <p id="joke"></p>
+                </div>
 
 
 

diff --git a/package.json b/package.json
@@ -1,16 +1,20 @@
 {
+  "type": "module",
   "name": "api-project--egbie-ollie",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "nodemon server.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "eslint": "^8.57.0",
-    "express": "^4.18.3"
+    "express": "^4.18.3",
+    "node-fetch": "^3.3.2",
+    "nodemon": "^3.1.0"
   }
 }
diff --git a/server.js b/server.js
@@ -0,0 +1,34 @@
+import fetch from "node-fetch"; // for HTTP requests
+import express from "express"; // for HTTP requests
+import path from "path";
+import { fileURLToPath } from 'url';
+
+// Workaround for __dirname in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const app = express();
+const PORT = process.env.PORT || 3000;
+
+// Serve static files from the "static" directory
+app.use(express.static(path.join(__dirname, "static")));
+
+// Route to handle requests for jokes
+app.get("/joke", async (req, res) => {
+  try {
+    // Request to JokeAPI
+    const response = await fetch("https://v2.jokeapi.dev/joke/Any?contains=pint");
+    const data = await response.json();
+    const joke = data.contents.jokes[0].joke.text;
+
+    // Send the joke back as JSON
+    res.json({ joke });
+  } catch (error) {
+    console.error("Error fetching joke:", error);
+    res.status(500).json({ error: "Failed to fetch joke" });
+  }
+});
+
+app.listen(PORT, () => {
+  console.log(`Server is listening on port ${PORT}`);
+});
diff --git a/static/index.html b/static/index.html
@@ -0,0 +1,119 @@
+<!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="static/css/styles.css">
+    <script src="static/js/script.js" defer></script>
+    <title>Clever name</title>
+</head>
+<body>
+
+    <nav class="container">
+        <div class="nav-head flex-center padding-top-sm padding-bottom-sm">
+            <div class="logo">
+                logo
+            </div>
+
+            <div class="header-body anton-regular text-upper font-md">
+                some clever name here
+            </div>
+
+            <div class="header-footer">
+                <img src="static/image/alternate-sign-in.svg" alt="A login image" class="icon">
+                <span>login</span>
+            </div>
+        </div>
+
+        <div class="nav-body flex-center padding-top-sm padding-bottom-sm berkshire-swash-regular font-md">
+            <a href="#" class="nav-link">Films</a>
+            <a href="#" class="nav-link">Venues</a>
+            <a href="#" class="nav-link">Events</a>
+            <a href="#" class="nav-link">Membership</a>
+            <a href="#" class="nav-link">Gifts</a>
+            <a href="#" class="nav-link">Private hire</a>
+
+        </div>
+
+    </nav>
+
+    <!-- The main section starts here -->
+    <main>
+
+        <section id="movie-content">
+
+            <div class="container">
+
+                <div class="search">
+                    <input type="search" name="search" id="search" class="search__bar margin-top-sm">
+                    <button type="submit" class="search-btn">Search</button>
+                </div>
+
+                <div class="search-result">
+                    <p id="joke"></p>
+                </div>
+
+
+
+
+
+            </div>
+
+
+        </section>
+
+
+    </main>
+    <!-- The mains end here -->
+
+    <footer>
+
+        <div class="container padding-top-lg padding-bottom-lg">
+
+            <div class="flex-space-between">
+
+                <div class="subscription flex-col">
+                    <h1 class="anton-regular white-text berkshire-swash-regular">Some clever name here</h1>
+                    <p class="subtitle white-text padding-top-md">Sign up to our newsletter for special bribes, incentives and Everyman listings each week.</p>
+                     <button type="button" class="text-upper button-sm margin-top-sm">Join for free</button>
+                </div>
+
+                <div class="links flex-col">
+                    <a href="#">Movies Films and Downloads</a>
+                    <a href="#">Careers</a>
+                    <a href="#">About some site name here</a>
+                    <a href="#">FAQs</a>
+                    <a href="#">Contact us</a>
+                    <a href="#">Privacy settings</a>
+                </div>
+
+
+                <div class="socials">
+
+                    <div class="social-icons padding-top-sm">
+                       <img src="static/image/instagram.svg" alt="" srcset="" class="icon">
+                       <img src="static/image/facebook (1).svg" alt="" class="icon">
+                       <img src="static/image/whatsapp.svg" alt="" class="icon">
+                       <img src="static/image/twitter-original (1).svg" alt="" class="icon">
+
+                    </div>
+                </div>
+
+            </div>
+
+
+        </div>
+        <div class="policies padding-top-xsm padding-bottom-xsm">
+            <div class="policies__wrapper">
+                <a href="#">© Privacy Policy</a>
+                <a href="#">© Terms and Conditions</a>
+                <a href="#">Cookie Policy</a>
+            </div>
+
+        </div>
+
+
+    </footer>
+
+</body>
+</html>
diff --git a/static/js/script.js b/static/js/script.js
@@ -0,0 +1,14 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const jokeElement = document.getElementById("joke");
+
+    // Fetch joke from server and update HTML
+    fetch("/joke")
+      .then((response) => response.json())
+      .then((data) => {
+        jokeElement.textContent = data.joke;
+      })
+      .catch((error) => {
+        console.error("Error fetching joke:", error);
+        jokeElement.textContent = "Failed to fetch joke";
+      });
+  });