Merge pull request #163 from shukria-sultani/features

Added the joke generator challenge
BeehiveCommunity · Oct 7, 2024 · cc46754 · cc46754
2 parents b18b5e6 + d73437a
commit cc46754
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 1 deletion.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+    "workbench.colorCustomizations": {
+        "activityBar.background": "#392836",
+        "titleBar.activeBackground": "#50384B",
+        "titleBar.activeForeground": "#FBFAFB"
+    }
+}
diff --git a/24-joke-generator/design/desktop-design.jpg b/24-joke-generator/design/desktop-design.jpg
diff --git a/24-joke-generator/design/mobile-design.jpg b/24-joke-generator/design/mobile-design.jpg
diff --git a/24-joke-generator/index.html b/24-joke-generator/index.html
@@ -0,0 +1,25 @@
+<!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="style.css">
+    <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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+    <title>Joke Generator</title>
+</head>
+<body>
+       <div class="container">
+            <span>&#128514;</span>  
+            <p id="jokeText"></p> 
+            <button id="btn">Generate Joke</button>
+       </div> 
+
+       <div class="designer">
+      Be happy! Designed by <a href="https://github.com/shukria-sultani">Shurkia💙</a>
+       </div> 
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/24-joke-generator/script.js b/24-joke-generator/script.js
@@ -0,0 +1,22 @@
+const jokeText = document.getElementById('jokeText');
+let button = document.getElementById('btn');
+let url = "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,explicit&type=single"
+
+const getJoke = () => {
+    return new Promise((resolve, reject) => {
+        fetch(url)
+            .then(data => data.json())
+            .then(item => {
+                jokeText.textContent = item.joke;
+                resolve();
+            })
+            .catch(error => {
+                console.error('Error fetching joke:', error);
+            });
+    });
+}
+
+button.addEventListener('click', getJoke);
+
+
+
diff --git a/24-joke-generator/style.css b/24-joke-generator/style.css
@@ -0,0 +1,50 @@
+*{
+font-family: "Montserrat", sans-serif;
+}
+body{
+    background-color: orange;
+}
+.container{
+    position: absolute;
+    padding: 50px , 40px;
+    transform: translate(-50%,-50%);
+    left: 50%;
+    top: 50%;
+    background-color: black;
+    box-shadow: 20px 15px 20px 0 #232323;
+    width: 80vmin;
+}
+.container span{
+    display: block;
+    text-align: center;
+    font-size: 100px;
+}
+.container p{
+    color: #fff;
+    text-align: center;
+    word-wrap: break-word;
+    margin: 10px 5;
+    font-weight: 400;
+    padding: 10px;
+    line-height: 30px;
+}
+.container button{
+    display: block;
+    background-color: orange;
+    border: none;
+    padding: 12px 25px;
+    margin: 0 auto;
+    margin-bottom: 10px;
+    font-size: 18px;
+    text-align: center;
+    border-radius: 10px;
+    cursor: pointer;
+
+}
+.container button:hover{
+     box-shadow: 3px 0px 5px 5px orange;
+}
+.designer{
+text-align: center;
+padding-top: 20px;
+}
diff --git a/script.js b/script.js
@@ -67,6 +67,9 @@ const projects = [
   {
     name: "23-Weather-App",
   },
+  {
+    name: "24-joke-generator",
+  },
 ];
 
 const list = document.getElementById("list");

diff --git a/style.css b/style.css
@@ -1,5 +1,4 @@
 * {
-
     margin: 0px;
     padding: 0px;
     box-sizing: border-box;
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,6 +67,9 @@ const projects = [ @@
       {
         name: "23-Weather-App",
       },
+      {
+        name: "24-joke-generator",
+      },
     ];
     const list = document.getElementById("list");
@@ Expand Down @@