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: + + + + +[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 @@ + + +
+ + + +Click the button to get a random dog breed and some βcustomβ advice for it!
+ + + +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}"
`; +}); +} \ 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