From c150c9060db131a32a99d2d65b5c969b7bb7e6ff Mon Sep 17 00:00:00 2001 From: Fadma1234 Date: Sat, 4 Oct 2025 14:07:10 -0400 Subject: [PATCH 1/6] done --- index.html | 33 +++++++++++++++++ main.js | 38 ++++++++++++++++++++ style.css | 104 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 175 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css 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; + } +} From 5249daf77c5b837cdc3a8c9a2066a1caeb9966af Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Tue, 7 Oct 2025 14:33:57 -0400 Subject: [PATCH 2/6] Update README.md --- README.md | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index a9a4cc6..9879798 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,13 @@ -# 📊 Project: Simple API 1 +# 📊 Project: ### Goal: Display data returned from an api -### How to submit your code for review: +### **Tech Stack:** +- **HTML** - For the structure. +- **CSS** - For styling. +- **JavaScript** - For API requests and displaying data. -- 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... -``` +### **How to View:** +1. Download or clone this repo. +2. Open `index.html` in your browser. +3. Click the link on the right under **About** to see the live demo. From 8dc947bb7eac34e2b6ed748ac6d7f0388992b8d7 Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Tue, 7 Oct 2025 14:39:32 -0400 Subject: [PATCH 3/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9879798..951a417 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# 📊 Project: +# 📊 Project: Click to see the "Abyssinian" information ### Goal: Display data returned from an api From e8a508f8a37e1967fea04245eaab25759ef66d98 Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Fri, 7 Nov 2025 12:03:35 -0500 Subject: [PATCH 4/6] Fix header formatting in README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 951a417..d2411db 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# 📊 Project: Click to see the "Abyssinian" information +# Project: Click to see the "Abyssinian" information +image ### Goal: Display data returned from an api From d3619d088d0a9ca56bd61d86111c24927551812e Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Mon, 10 Nov 2025 12:29:08 -0500 Subject: [PATCH 5/6] Update README.md --- README.md | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index d2411db..d05a80e 100644 --- a/README.md +++ b/README.md @@ -3,12 +3,13 @@ ### Goal: Display data returned from an api -### **Tech Stack:** -- **HTML** - For the structure. -- **CSS** - For styling. -- **JavaScript** - For API requests and displaying data. - -### **How to View:** -1. Download or clone this repo. -2. Open `index.html` in your browser. -3. Click the link on the right under **About** to see the live demo. +### Tech Stack +- HTML + +- CSS + +- JavaScript + +### Live Demo +Click the link on the right under About to see the live demo. + From 3d6e3287f6526266a99bf4459f98146fff33426e Mon Sep 17 00:00:00 2001 From: Fadma Belkhouraf Date: Fri, 14 Nov 2025 18:09:11 -0500 Subject: [PATCH 6/6] Revise project title and enhance description Updated project title and added project description. --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index d05a80e..b9d0553 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,11 @@ -# Project: Click to see the "Abyssinian" information +# Project:"Abyssinian" information image -### Goal: Display data returned from an api +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