From c5abba96a34f12d9b37ba0b866ef39ad646fd85d Mon Sep 17 00:00:00 2001 From: Shawn1042 Date: Sun, 5 Oct 2025 20:12:42 -0400 Subject: [PATCH 1/3] dog advice project 2 --- README.md | 39 +++++++++++++++------------------ complexapi1.jpg | Bin 0 -> 19339 bytes index.html | 20 +++++++++++++++++ script.js | 54 +++++++++++++++++++++++++++++++++++++++++++++ style.css | 57 ++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 148 insertions(+), 22 deletions(-) create mode 100644 complexapi1.jpg create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/README.md b/README.md index 83ce771..7682a96 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,17 @@ -# πŸ“Š 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) \ No newline at end of file diff --git a/complexapi1.jpg b/complexapi1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..3f9d38fd20fca9bcb97c03c9534959bae1fe7fc3 GIT binary patch literal 19339 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 literal 0 HcmV?d00001 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/script.js b/script.js new file mode 100644 index 0000000..e837e4f --- /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 From 234f8794805eae2728c4b032aabd98e288d81032 Mon Sep 17 00:00:00 2001 From: Shawn1042 Date: Sun, 9 Nov 2025 14:54:15 -0500 Subject: [PATCH 2/3] added project live link and added package.json --- README.md | 5 ++++- package-lock.json | 6 ++++++ package.json | 12 ++++++++++++ script.js | 2 +- 4 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json diff --git a/README.md b/README.md index 7682a96..2d60546 100644 --- a/README.md +++ b/README.md @@ -14,4 +14,7 @@ I learned how to interact 2 different APIs and output 1 result, and I learned ho ## Image of Project: -![Dogadviceproject image](complexapi1.jpg) \ No newline at end of file +![Dogadviceproject image](complexapi1.jpg) + + +[Live Link](https://complex-api2-bootcamp.onrender.com/) 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 index e837e4f..7f548ed 100644 --- a/script.js +++ b/script.js @@ -20,7 +20,7 @@ button.addEventListener('click', getDogAndAdvice); function getDogAndAdvice() { output.innerText = "Fetching a random dog photo..."; -let dogAPI = 'https://dog.ceo/api/breeds/image/random'; +let dogAPI = 'https://dog.ceo/api/breeds/image/random?'; let adviceAPI = 'https://api.adviceslip.com/advice'; let breed = ''; From 01d6e9cebc9c4f663c3ff4f8388978746d6193ac Mon Sep 17 00:00:00 2001 From: Shawn Edward-Homes Date: Wed, 12 Nov 2025 10:54:55 -0500 Subject: [PATCH 3/3] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2d60546..85fca72 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ This project will allow users to fetch a dog photo, the breed of the dog, and al ## How It's Made: -**Tech used:**: HTML, CSS, and JavaScript +**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.