Answer

CSS/styles.css

@@ -0,0 +1,45 @@
+html {
+    font-size: 62.5%;
+    font-family: Arial, Helvetica, sans-serif;
+    background: url('../IMAGES/pexels-photo-10768835.jpeg');
+    background-size: cover;
+}
+
+h1 {
+    font-size: 5rem;
+}
+
+p,
+h2,
+h3,
+.hint {
+    font-size: 2rem;
+    margin: 5rem 20rem;
+    color: white;
+}
+
+#scientificName,
+#family {
+    font-size: 5rem;
+}
+
+#wikiHeader {
+    padding-bottom: 1rem;
+}
+
+header,
+section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+header div,
+section div {
+    text-align: center;
+}
+
+button,
+input {
+    padding: 1rem 5rem;
+}

JS/script.js

@@ -0,0 +1,69 @@
+//User will enter a city's name and get the weather for that area
+
+//need event listener that runs user's input
+document.querySelector('button').addEventListener('click', getSpecies)
+
+// https://api.gbif.org/v1/species/search?q=${value}
+
+function getSpecies() {
+    let value = document.querySelector('input').value
+    let url = `https://api.gbif.org/v1/species/search?q=${value}`
+    fetch(url)
+    .then(response => response.json())
+    .then(data => {
+    console.log(data)
+    document.querySelector('#scientificName').innerText = ''
+    //target only animals
+    if (data.results[0].kingdom === 'Animalia' || data.results[0].kingdom === 'Phasianidae') {
+        document.querySelector('#scientificName').innerText = data.results[0].scientificName
+        document.querySelector('#family').innerText = data.results[0].family
+    } else {
+        document.querySelector('#family').innerText = 'Oops! You entered a colloquial name so the results are undefined or you ented a colloquial name that is actually a scientific name for a different species. Try again.'
+        document.querySelector('#wikiHeader').innerText = ''
+        document.querySelector('#wikiInfo').innerText = ''
+    }
+    //second fetch
+    let scifamily = data.results[0].family
+    let dictUrl = `https://en.wikipedia.org/api/rest_v1/page/summary/${scifamily}?redirect=false`
+    fetch(dictUrl)
+    .then(res => res.json())
+    .then(data => {
+        console.log(data)
+        document.querySelector('#wikiHeader').innerText = `What is a ${scifamily}?`
+        document.querySelector('#wikiInfo').innerText = data.extract
+        document.querySelector('#wikiImg').src = data.originalimage.source
+    })
+    .catch(err => {
+        console.log(`error ${err}`)
+    })
+    })
+    .catch(err => {  
+        console.log(`error ${err}`)
+    });
+}
+
+
+// {
+//     method: 'GET',
+//     mode: 'no-cors',
+//     headers: {
+//         'access-control-allow-origin': '*'
+//     }
+// }
+
+
+
+
+// var city = 'london'
+// $.ajax({
+//     method: 'GET',
+//     url: 'https://api.api-ninjas.com/v1/weather?city=' + city,
+//     headers: { 'X-Api-Key': 'YOUR_API_KEY'},
+//     contentType: 'application/json', // this line does not work in fetch API... need to see what content type is and what is CORS
+//     success: function(result) {
+//         console.log(result);
+//     },
+//     error: function ajaxError(jqXHR) {
+//         console.error('Error: ', jqXHR.responseText);
+//     }
+// });

README.md

@@ -1,22 +1,17 @@
-# 📊 Project: Complex API 2
+# Taxonomy Time Complex API
 
-### Goal: Use data returned from one api to make a request to another api and display the data returned
+Live Preview: https://codedbycass.github.io/Taxonomy-Time/
 
-### How to submit your code for review:
+<img width="1467" alt="Screenshot 2023-10-23 at 12 13 41 AM" src="https://github.com/codedbycass/Taxonomy-Time/assets/122684139/7d208889-61fd-4680-a533-56e69299187a">
 
-- 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!
+## What
 
-Example:
-```
-I completed the challenge: 5
-I feel good about my code: 4
-I'm not sure if my constructors are setup cleanly...
-```
+This project makes a request to 2 external servers using a biology database and the wikimedia API. It's purpose to learn more about an animal's taxonomic family!
+
+## How it works
+Tools: HTML, CSS, JavaScript
+
+I used 2 fetches and nested them; first the biology database API and the wikimedia API. I strategically chose wikimedia, because it has a page for almost everything, whereas my first option (a dictonary) lacked some capacity to define all scientific terms.
+
+## Lessons learned
+This project was a challenge in choosing the correct API that will be the most generative for users. Since the initial API was weak, as in, it was inconsistent and some animals lacked their key/values, it would sometimes return undefined. I chose to be strategic and chose the "family" key to pass it is a parameter in the Wikimedia API. 

index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="CSS/styles.css">
+    <title>Recipes</title>
+</head>
+<body>
+    <header>
+        <div>
+    <h1>Taxonomy Time!</h1>
+    <p>Directions: Enter the scientific name of an animal in the input box to get their scientific family and learn more about what that scientific family entails!</p>
+    <p class="hint">Hint: Cat -> Felis Catus, Dog -> Canis lupus, Tuna -> Thunnus Albacares, Chicken -> Gallus gallus domesticus, Giraffe -> Giraffa </p>
+    <input type="text" placeholder="Enter a scientific name of an animal"></input>
+    <button type="button" name="button">Learn</button>
+        </div>
+    </header>
+    <section>
+        <div>
+            <h2 id="scientificName">Taxonomic Name </h2>
+            <h2 id="family">Taxonomic Family </h2>
+            <h3 id="wikiHeader"></h3>
+            <h3 id="wikiInfo"></h3>
+        </div>
+    </section>
+    <script src="JS/script.js"></script>
+</body>
+</html>