Resilient-Labs · sed1177 · Oct 6, 2025 · Nov 9, 2025 · Nov 12, 2025
diff --git 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
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" href="style.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>COMPLEX 1 API PROJECT</title>
+</head>
+<body>
+
+  <h1>🐶 Dog + Advice API Interaction!!!!</h1>
+  <p>Click the button to get a random dog breed and some “custom” advice for it!</p>
+
+  <button id="btn">Fetch Dog & Advice</button>
+
+  <div id="output">Click the button to FETCH DOG AND ADVICE</div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json 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
@@ -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 = `<h3>🐾 Here's a ${breed}!</h3>
+    <img src="${dogImage}" alt="${breed}">
+    <p>Getting some advice for your ${breed}...</p>`;
+
+    // 💭 Fetch random advice next
+    return fetch(adviceAPI);
+})
+.then(res => res.json())
+.then(adviceData => {
+    console.log(adviceData);
+    let advice = adviceData.slip.advice;
+
+    output.innerHTML += `<h3>💭 Advice for your ${breed}:</h3>
+    <p><i>"${advice}"</i></p>`;
+});
+}
diff --git a/style.css 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;
+}