Resilient-Labs · ishelvirakeira · Oct 6, 2025 · Oct 6, 2025 · Oct 6, 2025 · Oct 28, 2025
diff --git a/README.md b/README.md
@@ -2,21 +2,12 @@
 
 ### Goal: Display data returned from an api
 
-### How to submit your code for review:
+This simple API allows a user to enter the breed name of a cat and fetch information about that breed from the CAT API. We display the cat name, its origin, lifespan, temperament, and description in the DOM.
 
-- Fork and clone this repo
-- Create a new branch called answer
-- Checkout answer branch
-- Push to your fork
-- Issue a pull request
-- Your pull request description should contain the following:
-  - (1 to 5 no 3) I completed the challenge
-  - (1 to 5 no 3) I feel good about my code
-  - Anything specific on which you want feedback!
+Find the live demo at https://ishelvirakeira.github.io/simple-api2-bootcamp/
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+<img width="493" height="400" alt="simple cat api" src="https://github.com/user-attachments/assets/d3304ca0-9839-4b0a-b159-8b6868d0bdcd" />
+
+Tools used: HTML, CSS, JavaScript, and the cat API
+
+I continued to improve my skills of inspecting the API response in the console and extracting the correct properties. 
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang = "en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Simple CAT API</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+    <body>
+
+        <h1>Find Cat Information by its breed name</h1>
+
+        <input type="text" name="text" placeholder="Enter breed name of a cat">
+        <button type="button" name="button">Get Cat Info</button>
+
+        <h2>Cat Name</h2>
+
+        <p>Origin: <div class="origin"></div></p>
+        <p>Lifespan:<div class="lifespan"></div></p>
+        <p>Temperament: <div class="temperament"></div></p>
+        <p>Description: <div class="description"></div></p>
+
+
+        <script type="text/javascript" src="main.js"></script>
+
+    </body>
+
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,33 @@
+//user enters breed name of a cat and get cat info in the DOM
+
+//listen for click, call the api
+//get breed name from user
+
+//display cat info in the DOM: temperament, origin, life-span, description
+
+document.querySelector('button').addEventListener('click', getCat)
+
+function getCat(){
+    const breedName = document.querySelector('input').value;
+
+    const url= `https://api.thecatapi.com/v1/breeds/search?q=${breedName}`
+
+    fetch(url)
+        .then(res => res.json())
+        .then(data=>{
+            console.log(data);
+
+            document.querySelector('h2').innerText=data[0].name; 
+            document.querySelector('.origin').innerText= data[0].origin;
+            document.querySelector('.lifespan').innerText = data[0].life_span;
+            document.querySelector('.temperament').innerText=data[0].temperament;
+            document.querySelector('.description').innerText = data[0].description;
+        })
+
+        .catch(err=>{
+            console.log(`error ${err}`);
+            document.querySelector('h2').innerText = 'Something went wrong.'
+
+        })
+
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,72 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    padding: 20px;
+    background-color: rgb(224, 219, 219);
+    color: rgb(66, 64, 64);
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+input[type="text"] {
+    padding: 10px;
+    font-size: 16px;
+    width: 300px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    border: 1px solid lightgrey;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    border-radius: 5px;
+    border: none;
+    background-color: rgb(167, 129, 59);
+    color: white;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+
+button:hover {
+    background-color: rgb(179, 138, 138);
+}
+
+h2 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+p {
+    margin: 5px 0;
+    font-size: 16px;
+    color: rgb(152, 165, 76);
+    font-weight: 550;
+}
+
+p div {
+    display: inline;
+    font-weight: 600;
+    margin-left: 5px;
+}
+
+
+/* Responsive styling */
+@media screen and (max-width: 768px){
+    body {
+        padding: 10px;
+    }
+
+    input[type="text"], button {
+        width: 100%;
+        box-sizing: border-box;
+    }
+}
+
+@media screen and (max-width: 480px){
+    input[type="text"], button, h1, h2, p {
+        width: 100%;
+    }
+}