diff --git a/README.md b/README.md index 83ce771..85fca72 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,20 @@ -# πŸ“Š Project: Complex API 2 - -### Goal: Use data returned from one api to make a request to another api and display the data returned - -### 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... -``` +# Fetch Dog Photo & Advice Project! + +This project will allow users to fetch a dog photo, the breed of the dog, and also fetch another API to give advice for the dog! + +## How It's Made: + +**Tech used:** HTML, CSS, and JavaScript + +I used html for the markup, css for the styling, andI used Javascript for the logic of this project. + +## Lessons Learned: + +I learned how to interact 2 different APIs and output 1 result, and I learned how to get data from an API URL, and use that information on the frontend when the information isn't present in the API. Ex: I took the breed of the dog, from the URL because the APi did not have the corresponding information for the dog breed, that i needed! + +## Image of Project: + +![Dogadviceproject image](complexapi1.jpg) + + +[Live Link](https://complex-api2-bootcamp.onrender.com/) diff --git a/complexapi1.jpg b/complexapi1.jpg new file mode 100644 index 0000000..3f9d38f Binary files /dev/null and b/complexapi1.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..deb16cc --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + COMPLEX 1 API PROJECT + + + +

🐢 Dog + Advice API Interaction!!!!

+

Click the button to get a random dog breed and some β€œcustom” advice for it!

+ + + +
Click the button to FETCH DOG AND ADVICE
+ + + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..a24e550 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "complex-api2-bootcamp", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..c68e68f --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "complex-api2-bootcamp", + "version": "1.0.0", + "main": "server.js", + "scripts": { + "start": "node server.js" + }, + "dependencies": { + "express": "^4.18.2", + "node-fetch": "^3.3.2" + } +} diff --git a/script.js b/script.js new file mode 100644 index 0000000..7f548ed --- /dev/null +++ b/script.js @@ -0,0 +1,54 @@ +/* +on click call the dog api to fetch a dog photo +- then get the breed of the dog from the image URL since the api doesn't contain +a breed index + +-- this link help: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace + +take the output and turn it into an html tag then fetch the next API for "dog advice and combine" + + + +*/ + + +let button = document.querySelector('#btn'); +let output = document.querySelector('#output'); + +button.addEventListener('click', getDogAndAdvice); + +function getDogAndAdvice() { +output.innerText = "Fetching a random dog photo..."; + +let dogAPI = 'https://dog.ceo/api/breeds/image/random?'; +let adviceAPI = 'https://api.adviceslip.com/advice'; +let breed = ''; + +// πŸ• Fetch a random dog photo +fetch(dogAPI) +.then(res => res.json()) +.then(dogData => { + console.log(dogData); + let dogImage = dogData.message; + + // Extract breed from the URL + let parts = dogImage.split('/'); + let breedPath = parts[parts.length - 2]; + breed = breedPath.replace(/-/g, ' '); + + output.innerHTML = `

🐾 Here's a ${breed}!

+ ${breed} +

Getting some advice for your ${breed}...

`; + + // πŸ’­ Fetch random advice next + return fetch(adviceAPI); +}) +.then(res => res.json()) +.then(adviceData => { + console.log(adviceData); + let advice = adviceData.slip.advice; + + output.innerHTML += `

πŸ’­ Advice for your ${breed}:

+

"${advice}"

`; +}); +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..fd3a198 --- /dev/null +++ b/style.css @@ -0,0 +1,57 @@ +*{ + box-sizing: border-box; +} + + +body { + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; + background: #232324; + color: black; + padding: 30px; + text-align: center; +} + + +h1 { + color: white; +} + + +button { + background: #007bff; + color: white; + border: none; + padding: 12px 18px; + cursor: pointer; + border-radius: 6px; + font-size: 16px; + transition: background 0.2s; +} + +button:hover { + background: #0056b3; +} + +#output { + margin-top: 25px; + background: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 6px rgba(0,0,0,0.1); + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + + +img { + max-width: 300px; + border-radius: 10px; + margin-top: 10px; +} + + +.loading { + font-style: italic; + color: #666; +} \ No newline at end of file