codecommander03: Added RandomJoke

Author: codecommander03

src/data/content.js

@@ -7,6 +7,7 @@ import {FortuneCard} from "../pages/activities/FotuneCard";
 import {SearchWord} from "../pages/activities/getDefinition";
 import {Jitter}  from "../pages/games/Jitter";
 import {RandomMeme} from "../pages/activities/RandomMemes";
+import { RandomJoke } from "../pages/activities/RandomJoke";
 import meme from "../assets/activities/meme.jpg"
 import numberblocs from "../assets/numberblocks.png"
 import wordleicon from "../assets/games/Wordle/wordlejpg.png"
@@ -40,6 +41,13 @@ export const activities = [
         icon: "https://www.i2symbol.com/pictures/emojis/f/2/0/4/f2042fedcbc0cdaee2967c4449b62845.png" ,
         urlTerm: "search-any-word",
         element: <SearchWord />
+    },
+    {
+        title: "Random Jokes",
+        description: "Get random jokes",
+        icon: "https://www.troublefreepool.com/media/joke-png.127455/full",
+        urlTerm: "random-jokes",
+        element: <RandomJoke />
     }
 ];
 

src/pages/activities/RandomJoke.js

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import axios from "axios";
+import "../../styles/pages/activities/RandomJoke.css";
+
+export const RandomJoke = () => {
+
+    const [joke, setJoke] = useState(null);
+    const [error, setError] = useState(null);
+
+    const generateJoke = () => {
+        setJoke(null);
+        axios({
+          method: "GET",
+          url: "https://v2.jokeapi.dev/joke/Any",
+        })
+          .then((res) => setJoke(res.data))
+          .catch((error) => setError(error));
+      };
+
+      useEffect(() => {
+        generateJoke();
+      }, []);
+
+      return (
+        <div className="root">
+          <h1 class="header">Random Joke Generator</h1>
+          <div class="description">
+            Generate any random joke to get some laugh!
+          </div>
+          {joke && (
+            
+            <div className="content">
+                {joke.type === "single" ? (
+                  <div>{joke.joke}</div>
+                ) : (
+                    <div>
+                      <div>{joke.setup}</div>
+                      <div>{joke.delivery}</div>
+                    </div>
+                )}
+            </div>
+
+          )}
+          {error && (
+            <div className="content error">{error.message}</div>
+          )}
+          {!joke && !error && (
+            <div className="spinner-wrapper">
+              <div className="spinner"></div>
+            </div>
+          )}
+          <button className="button" onClick={generateJoke}>
+            Generate Joke
+          </button>
+        </div>
+      );
+};

src/styles/pages/activities/RandomJoke.css

@@ -0,0 +1,130 @@
+.root {
+    margin-top: 25px;
+    font-family: "Fira Code Light";
+  }
+  .header {
+    font-size: 2rem;
+    margin-bottom: 5px;
+  }
+  .description {
+    font-size: 1.2rem;
+    font-weight: 300;
+    font-style: italic;
+  }
+
+  .content {
+    font-style: italic;
+    padding: 15px 10px;
+    background: white;
+    margin: auto;
+    border: 1px solid #4b4b4b;
+    width: 80vw;
+    max-width: 800px;
+    margin-top: 50px;
+    margin-bottom: 20px;
+    border-radius: 15px;
+    box-shadow: 2px 2px 5px #4b4b4b;
+    padding-left: 20px;
+    animation: quote-appeared 0.5s ease;
+  }
+
+  
+  @keyframes quote-appeared {
+    0% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  content:hover {
+    background: #f1f1f1;
+  }
+  
+  .joke {
+    margin: 10px;
+    text-align: left;
+    font-size: 1.8rem;
+    line-height: 2.2rem;
+    font-style: normal;
+    animation: fade 0.3s ease;
+  }
+  
+  @keyframes fade {
+    0% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  
+  .error{
+    color: red;
+    font-size: 1.8rem;
+    padding: 40px 0;
+    font-style: oblique;
+  }
+  
+  
+  @keyframes slide-left {
+    0% {
+      transform: translateX(4%);
+      opacity: 20%;
+    }
+    100% {
+      transform: translateX(0%);
+      opacity: 100%;
+    }
+  }
+  
+  .button {
+    font-size: 1.2rem;
+    background: white;
+    border-radius: 5px;
+    padding: 20px;
+    border: 1px solid #4b4b4b;
+    box-shadow: 1px 1px 3px #4b4b4b;
+    margin: 10px auto;
+    margin-top: 30px;
+    transition-duration: 300ms;
+  }
+  
+  .button:hover {
+    cursor: pointer;
+    background: black;
+    color: white;
+    transform: scale(1.1);
+  }
+  
+  .spinner-wrapper {
+    margin: auto;
+    width: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-height: 200px;
+    height: 200px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  
+  .spinner {
+    border: 6px solid #f3f3f3;
+    border-top: 6px solid #3498db;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    margin: auto;
+    animation: spin 2s linear infinite;
+  }
+  
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }