Resilient-Labs · MustafaXScudder · Apr 1, 2025
diff --git a/cat.css b/cat.css
@@ -0,0 +1,47 @@
+.background-video {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    object-fit: cover;
+    z-index: -1;
+}
+body {
+    font-family: Arial, sans-serif;
+    text-align: left;
+    padding: 20px;
+}
+
+button {
+    padding: 10px 20px;
+    background-color: blue;
+    color: white;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    display: flex;
+    justify-content: start;
+
+}
+
+button:hover {
+    background-color: darkblue;
+}
+
+img {
+    margin-top: 20px;
+    max-width: 100%;
+    height: auto;
+    border: 2px solid #ccc;
+    border-radius: 8px;
+   display: flex;
+   justify-content: start;
+
+}
+
+p {
+    font-size: 18px;
+    margin-top: 10px;
+}
diff --git a/cat.js b/cat.js
@@ -0,0 +1,42 @@
+class CatFetcher {
+    constructor(apiKey) {
+        this.apiKey ="live_FDkCbFNEu4MQKmvu4P7zSoTQ3Tknntu3cqwtutIq8bASP7gsRozqMlgmiwObw1lR";
+        this.apiUrl = "https://api.thecatapi.com/v1/images/search?include_breeds=true";
+
+
+        // Select the necessary HTML elements
+        this.button = document.getElementById("getCat");
+        this.imageElement = document.getElementById("catImage");
+        this.breedElement = document.getElementById("breedName");
+
+        // Add event listener to the button
+        this.button.addEventListener("click", () => this.getRandomCat());
+    }
+
+    getRandomCat() {
+        // Fetch data from the API using the proxy and API key
+        fetch(this.apiUrl, {
+            headers: { "x-api-key": this.apiKey }
+        })
+        .then(response => response.json())  // Convert the response to JSON format
+        .then(data => {
+            const catData = data[0];  // Get the first object from the API response
+
+            if (catData && catData.url) {
+                this.imageElement.src = catData.url;  // Set image source to the cat image URL
+            } else {
+                console.error("No image URL found in API response:", catData);
+            }
+
+            // Display breed name if available, otherwise "Unknown Breed"
+            this.breedElement.textContent = catData.breeds.length > 0 ? catData.breeds[0].name : "Unknown Breed";
+        })
+        .catch(error => {
+            console.error("Error fetching cat:", error);
+            this.breedElement.textContent = "Failed to fetch cat. Try again!";  // Display error message
+        });
+    }
+}
+
+// Create an instance of the CatFetcher class with your API key
+const catApp = new CatFetcher("live_FDkCbFNEu4MQKmvu4P7zSoTQ3Tknntu3cqwtutIq8bASP7gsRozqMlgmiwObw1lR");
diff --git a/image.png b/image.png
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random Cat Fetcher</title>
+    <link rel="stylesheet" href="cat.css">
+</head>
+<body>
+    <video class="background-video" autoplay muted loop playsinline>
+        <source src="rat.mp4" type="video/mp4">
+        Your browser does not support the video tag.
+    </video>
+    <button id="getCat">Get Random Cat</button>
+    <img id="catImage" src="image.png" alt="image.png" width="600" background= none>
+    <p id="breedName"></p>
+
+    <script src="cat.js"></script>
+</body>
+</html>
diff --git a/rat.mp4 b/rat.mp4