diff --git a/README.md b/README.md index 788ab5a..ff58c6e 100644 --- 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... -``` +simple cat api + +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 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