diff --git a/README.md b/README.md
index a9a4cc6..b9d0553 100644
--- a/README.md
+++ b/README.md
@@ -1,22 +1,19 @@
-# 📊 Project: Simple API 1
-
-### Goal: Display data returned from an api
-
-### How to submit your code for review:
-
-- 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!
-
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+# Project:"Abyssinian" information
+
+
+This project manages the client-side interaction for a simple application that interfaces with The Cat API. An event listener on a button triggers the getPic function, which uses the fetch() API to make a GET request to a specific, hardcoded API endpoint URL. The script then parses the returned JSON data and dynamically updates the webpage by setting the src attribute of an image element to the cat's picture URL, and populating paragraph and heading elements with the cat's description, origin, and height data, demonstrating basic API consumption and DOM manipulation.
+
+
+
+
+
+### Tech Stack
+- HTML
+
+- CSS
+
+- JavaScript
+
+### Live Demo
+Click the link on the right under About to see the live demo.
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8c0df30
--- /dev/null
+++ b/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+
+ Simple Api1
+
+
+
+
+
+
+
+
+
Click to see the
+"Abyssinian" information
+
+
+
+
+
origin
+
Description
+
height
+
+
+
+
+
+
+
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..056cb64
--- /dev/null
+++ b/main.js
@@ -0,0 +1,38 @@
+//pseudo code
+// Goal: Display data returned from an api
+//look for a free working api
+//after securing api key read through documentation fo figure out how to use it in the url
+//check on postman if its working if not look for another one
+//after getting the api
+//start coding and run the api on the console to see what data it shows
+//choose the data i want and create my html based on it to make it easy the display on dom
+//work on js file using event listener to run my function
+//inside my function create my variables inside
+//start my fetch to get my json res
+//turn it into readable data
+//grab it from the html and display it on the dom using the data i got back on my console
+//create my catch for errors
+//after making my app working i will style iti in css
+//push into github
+//https://api.thecatapi.com/v1/images/0XYvRd7oD?Api=live_961r9DKGemqoKojNOvaRAq0cYKv0XaUlIEADq4dwY3kLyFv6J4ImwFU6Rd839RFd
+
+document.querySelector('button').addEventListener('click', getPic)
+
+function getPic() {
+ // const pic = document.querySelector('input').value;
+ const url = `https://api.thecatapi.com/v1/images/0XYvRd7oD?ApiKey=live_961r9DKGemqoKojNOvaRAq0cYKv0XaUlIEADq4dwY3kLyFv6J4ImwFU6Rd839RFd`
+
+
+
+ fetch(url)
+ .then(res => res.json())
+ .then(data => {
+ console.log(data)
+ document.querySelector('img').src = data.url
+ document.querySelector('p').innerText = data.breeds[0].description
+ document.querySelector('h3').innerText = data.breeds[0].origin
+ document.querySelector('h4').innerText = data.height
+
+
+ })
+}
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..438a908
--- /dev/null
+++ b/style.css
@@ -0,0 +1,104 @@
+/* used google hepl to style my project */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: Arial, sans-serif;
+ background-color: #2c3e50; /* Dark blue-gray background */
+ color: #ecf0f1; /* Light text for contrast */
+ display: flex; /* Centers the content vertically and horizontally */
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ text-align: center;
+}
+
+main {
+ background-color: #34495e; /* A slightly lighter, cohesive background for the content */
+ padding: 2.5rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ width: 90%;
+ max-width: 600px;
+}
+
+h1 {
+ font-size: 2.5rem;
+ margin-bottom: 1rem;
+ color: #f1c40f; /* Yellow accent color */
+}
+
+a {
+ color: #3498db; /* A distinct blue for the link */
+ text-decoration: none;
+ font-size: 1rem;
+ margin-bottom: 1rem;
+ display: block; /* Makes the link take up its own line */
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+.lo {
+ display: block;
+ width: 100%;
+ padding: 0.75rem;
+ margin: 0.5rem 0;
+ font-size: 1rem;
+ border-radius: 5px;
+ border: none;
+ transition: all 0.3s ease;
+}
+
+input.lo {
+ background-color: #ecf0f1;
+ color: #2c3e50;
+ margin-bottom: 1rem;
+}
+
+button.lo {
+ background-color: #e74c3c; /* Red button color */
+ color: white;
+ cursor: pointer;
+ font-weight: bold;
+}
+
+button.lo:hover {
+ background-color: #c0392b;
+}
+
+img {
+ max-width: 100%;
+ border-radius: 10px;
+ margin-top: 1.5rem;
+ border: 5px solid #bdc3c7; /* A silver-colored border */
+ display: none; /* Initially hidden until a cat photo is loaded */
+}
+
+h3, h4, p {
+ margin: 1rem 0;
+ font-size: 1.2rem;
+}
+
+h3 {
+ color: #9b59b6; /* Purple color for the name */
+}
+
+p {
+ font-style: italic;
+ color: #bdc3c7;
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 600px) {
+ main {
+ padding: 1rem;
+ }
+ h1 {
+ font-size: 2rem;
+ }
+}