From 6407e465aabfc500669d660d3b1d9a66e7ec38fa Mon Sep 17 00:00:00 2001 From: Elvira Keira Ishimwe <97549159+ishelvirakeira@users.noreply.github.com> Date: Mon, 6 Oct 2025 03:51:45 -0400 Subject: [PATCH 1/4] Add files via upload --- index.html | 28 +++++++++++++++++++++ main.js | 33 +++++++++++++++++++++++++ style.css | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 133 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..80df993 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + Simple CAT API + + + + +

Find Cat Information by its breed name

+ + + + +

Cat Name

+ +

Origin:

+

Lifespan:

+

Temperament:

+

Description:

+ + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..7dac095 --- /dev/null +++ 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.' + + }) + +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..c4090ed --- /dev/null +++ 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%; + } +} \ No newline at end of file From 5e15352953608a2b5cf9c40a5fb72a24ef573839 Mon Sep 17 00:00:00 2001 From: Elvira Keira Ishimwe <97549159+ishelvirakeira@users.noreply.github.com> Date: Mon, 6 Oct 2025 04:01:02 -0400 Subject: [PATCH 2/4] Update README.md --- README.md | 20 ++++---------------- 1 file changed, 4 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 788ab5a..a7992eb 100644 --- a/README.md +++ b/README.md @@ -2,21 +2,9 @@ ### 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. +simple cat api -- 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! +Tools used: HTML, CSS, JavaScript, and the cat API -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +I continued to improve my skills of inspecting the API response in the console and extracting the correct properties. From e1cea224577c59f3086351b9fb474dd59bcf69a5 Mon Sep 17 00:00:00 2001 From: Elvira Keira Ishimwe <97549159+ishelvirakeira@users.noreply.github.com> Date: Mon, 6 Oct 2025 04:01:17 -0400 Subject: [PATCH 3/4] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index a7992eb..b6470f2 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ ### Goal: Display data returned from an api 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. + simple cat api Tools used: HTML, CSS, JavaScript, and the cat API From d63917c717913f391300d24d7bdc0467d5054148 Mon Sep 17 00:00:00 2001 From: Elvira Keira Ishimwe <97549159+ishelvirakeira@users.noreply.github.com> Date: Tue, 28 Oct 2025 13:28:32 -0400 Subject: [PATCH 4/4] README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index b6470f2..ff58c6e 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ 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. +Find the live demo at https://ishelvirakeira.github.io/simple-api2-bootcamp/ + simple cat api Tools used: HTML, CSS, JavaScript, and the cat API