Completed Cat http status code activity

Author: konan625

src/assets/activities/cat.jpg

@@ -11,11 +11,13 @@ 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 cat from "../assets/activities/cat.jpg"
 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";
+import { CatHttpCode } from "../pages/activities/CatHttpCode";
 
 export const activities = [
     {
@@ -74,6 +76,13 @@ export const activities = [
         urlTerm: "dog-http-status",
         element: <DogHttpCode />
     },
+    {
+        title: "Cat Http Status Code",
+        description: "Get random cat images or meme",
+        icon: cat,
+        urlTerm: "cat-http-status",
+        element: <CatHttpCode />
+    },
 ];
 
 export const games = [

src/data/content.js

@@ -0,0 +1,42 @@
+import "../../styles/pages/activities/CatHttpCode.css"
+import { useState } from "react";
+
+export const CatHttpCode = () => {
+    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.cat/${httpCode}.jpg`); //Construct the image url
+        }
+    };
+
+    return (
+        <div className="cat-root">
+            <h1>Cat Http Status Code</h1>
+            <form onSubmit={handleSubmit} className="cat-form">
+                <input type="text" className="cat-input" placeholder="Enter the Http status code (e.g. 404)"
+                    value={httpCode} onChange={(e) => setHttpCode(e.target.value)} />
+                <button type="submit" className="cat-submit">Fetch Cat Image</button>
+            </form>
+
+            {error && <p style={{ color: "red" }}>{error}</p>}
+            {imageUrl && (
+                <div>
+                    <img
+                        src={imageUrl}
+                        alt={`Cat image for HTTP status code ${httpCode}`}
+                        style={{ marginTop: "20px", width: "300px", height: "300px" }}
+                        className="cat-image" />
+                </div>
+            )}
+        </div>
+    )
+}

src/pages/activities/CatHttpCode.js

@@ -0,0 +1,58 @@
+.cat-root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.cat-form {
+  display: flex;
+  flex-direction: row;
+  margin: 20px 0;
+}
+
+.cat-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;
+}
+
+.cat-input:focus {
+  outline: none;
+  border-color: blue;
+}
+
+.cat-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;
+}
+
+.cat-submit:hover {
+  cursor: pointer;
+  background-color: rgb(10, 80, 193);
+  color: white;
+  transform: scale(1.1);
+}
+
+.cat-error {
+  color: red;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.cat-image {
+  margin-top: 20px;
+  max-width: 30rem;
+  max-height: 30rem;
+  object-fit: contain;
+}