Completed the dog http status code actuivity

src/data/content.js

@@ -3,17 +3,19 @@ import { MagicSquares } from "../pages/games/MagicSquares";
 import { TicTacToe } from "../pages/games/TicTacToe";
 import { Wordle } from "../pages/games/Wordle";
 import { GuessTheFlag } from "../pages/games/GuessFlag";
-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 { 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 { RandomAnimeQuote } from "../pages/activities/RandomAnimeQuote";
 import meme from "../assets/activities/meme.jpg"
+import dog from "../assets/activities/dogimage.jpeg"
 import numberblocs from "../assets/numberblocks.png"
 import wordleicon from "../assets/games/Wordle/wordlejpg.png"
 import flagger from "../assets/games/flag guess/flagger.png"
 import Calculator from "../pages/activities/Calculator"
+import { DogHttpCode } from "../pages/activities/DogHttpCode";
 
 export const activities = [
     {
@@ -40,14 +42,14 @@ export const activities = [
     {
         title: "Fortune Card",
         description: "Get your fortune",
-        icon: "https://aws.astrotalk.com/assets/images/wheel_of_fortune.webp" ,
+        icon: "https://aws.astrotalk.com/assets/images/wheel_of_fortune.webp",
         urlTerm: "get-your-fortune",
         element: <FortuneCard />
     },
     {
         title: "Search Words",
         description: "Get any definition",
-        icon: "https://www.i2symbol.com/pictures/emojis/f/2/0/4/f2042fedcbc0cdaee2967c4449b62845.png" ,
+        icon: "https://www.i2symbol.com/pictures/emojis/f/2/0/4/f2042fedcbc0cdaee2967c4449b62845.png",
         urlTerm: "search-any-word",
         element: <SearchWord />
     },
@@ -64,7 +66,14 @@ export const activities = [
         icon: "https://cdn2.iconfinder.com/data/icons/ios7-inspired-mac-icon-set/512/Calculator_512.png",
         urlTerm: "calculator",
         element: <Calculator />
-    }
+    },
+    {
+        title: "Dog Http Status Code",
+        description: "Get random dog images or meme",
+        icon: dog,
+        urlTerm: "dog-http-status",
+        element: <DogHttpCode />
+    },
 ];
 
 export const games = [
@@ -90,18 +99,18 @@ export const games = [
         element: <Jitter />,
     },
     {
-        title:"Wordle Game",
-        description:"The normal wordle but you can play as much as you want",
-        icon:wordleicon,
-        urlTerm:"Wordle",
-        element:<Wordle/>
+        title: "Wordle Game",
+        description: "The normal wordle but you can play as much as you want",
+        icon: wordleicon,
+        urlTerm: "Wordle",
+        element: <Wordle />
     },
     {
-        title:"Guess The Flag",
-        description:"Learn geography in fun way",
-        icon:flagger,
-        urlTerm:"GuessTheFlag",
-        element:<GuessTheFlag/>
+        title: "Guess The Flag",
+        description: "Learn geography in fun way",
+        icon: flagger,
+        urlTerm: "GuessTheFlag",
+        element: <GuessTheFlag />
     }
 ];
 

src/pages/activities/DogHttpCode.js

@@ -0,0 +1,42 @@
+import "../../styles/pages/activities/DogHttpCode.css"
+import { useState } from "react";
+
+export const DogHttpCode = () => {
+    const [httpCode, setHttpCode] = useState("");
+    const [imageUrl, setImageUrl] = useState("");
+    const [error, setError] = useState("");
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+
+        if (httpCode < 100 || httpCode > 599 || isNaN(httpCode)) {
+            setError("Please enter a valid HTTP status code (100-599).");
+            setImageUrl("");
+        } else {
+            setError(""); //Clear any existing error
+            setImageUrl(`https://http.dog/${httpCode}.jpg`); //Construct the image url
+        }
+    };
+
+    return (
+        <div className="dog-root">
+            <h1>Dog Http Status Code</h1>
+            <form onSubmit={handleSubmit} className="dog-form">
+                <input type="text" className="dog-input" placeholder="Enter the Http status code (e.g. 404)"
+                    value={httpCode} onChange={(e) => setHttpCode(e.target.value)} />
+                <button type="submit" className="dog-submit">Fetch Dog Image</button>
+            </form>
+
+            {error && <p style={{ color: "red" }}>{error}</p>}
+            {imageUrl && (
+                <div>
+                    <img
+                        src={imageUrl}
+                        alt={`Dog image for HTTP status code ${httpCode}`}
+                        style={{ marginTop: "20px", width: "300px", height: "300px" }}
+                        className="dog-image" />
+                </div>
+            )}
+        </div>
+    )
+}

src/styles/pages/activities/DogHttpCode.css

@@ -0,0 +1,58 @@
+.dog-root {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 20px;
+}
+
+.dog-form {
+    display: flex;
+    flex-direction: row;
+    margin: 20px 0;
+}
+
+.dog-input {
+    width: 25rem;
+    height: 5rem;
+    padding: 0.5rem;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    margin-right: 10px;
+    transition: border-color 300ms;
+}
+
+.dog-input:focus {
+    outline: none;
+    border-color: blue;
+}
+
+.dog-submit {
+    font-size: 18px;
+    background-color: white;
+    border: 1px solid blue;
+    color: blue;
+    padding: 10px 15px;
+    border-radius: 10px;
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.dog-submit:hover {
+    cursor: pointer;
+    background-color: rgb(10, 80, 193);
+    color: white;
+    transform: scale(1.1);
+}
+
+.dog-error {
+    color: red;
+    font-size: 16px;
+    margin-top: 10px;
+}
+
+.dog-image {
+    margin-top: 20px;
+    max-width: 30rem;
+    max-height: 30rem;
+    object-fit: contain;
+}