studio completed

craigb28 · Mar 5, 2024 · 3373e7a · 3373e7a
1 parent ddcff0d
commit 3373e7a
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 0 deletions.
diff --git a/fetch/chapter-examples/fetching-data/fetch-weather-part-3.html b/fetch/chapter-examples/fetching-data/fetch-weather-part-3.html
@@ -15,6 +15,7 @@
                     <li>Wind Speed ${json.windSpeed}</li>
                     <li>Status ${json.status}</li>
                     <li>Chance of Precip ${json.chanceOfPrecipitation}</li>
+                    <li>ZIP ${json.zipcode}</li>
                   </ul>
                 `;
               });

diff --git a/fetch/fetch_planets.html b/fetch/fetch_planets.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Fetch Planets</title>
+    <script>
+      window.addEventListener("load", function () {
+        // TODO: fetch planets JSON
+        /* let json = [];
+        fetch(
+          "https://handlers.education.launchcode.org/static/planets.json"
+        ).then(function (response) {
+          response.json().then(function (json) {
+            console.log(json);
+          });
+        });
+        const destination = document.getElementById("destination");
+        destination.innerHTML = `<h3>Planet ${json[0].name}</h3>`;
+      }); */
+        fetch(
+          "https://handlers.education.launchcode.org/static/planets.json"
+        ).then(function (response) {
+          response.json().then(function (json) {
+            const destination = document.getElementById("destination");
+            let index = 0;
+            const button = document.getElementById("buttonPlanet")
+            button.addEventListener("click", function () {
+              destination.innerHTML = `
+            <div>
+               <h3>Planet ${json[index].name}</h3>
+               <img src=${json[index].image} height=500px></img>
+            </div>`;
+              index = (index + 1) % json.length;
+            });
+          });
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <button id="buttonPlanet">Click Here!</button>
+    <h1>Destination</h1>
+    <div id="destination">
+      <h3>Planet</h3>
+    </div>
+  </body>
+</html>
diff --git a/fetch/studio/script.js b/fetch/studio/script.js
@@ -1 +1,34 @@
 //TODO: Add Your Code Below
+window.addEventListener("load", function () {
+  let jsonResponse = fetch(
+    "https://handlers.education.launchcode.org/static/astronauts.json"
+  );
+  jsonResponse.then(function (response) {
+    response.json().then(function (json) {
+      let container = document.getElementById("container");
+      json.sort((a, b) => a.hoursInSpace - b.hoursInSpace);
+      for (i = 0; i < json.length; i++) {
+        let color = "";
+        if (json[i].active){
+            color = "green";
+        } else if (json[i].active === false){
+            color = "red"
+        }
+        container.innerHTML +=
+          `
+                <div class="astronaut">
+                  <div class="bio">
+                <h3>${json[i].firstName} ${json[i].lastName}</h3><br>
+                  <ul>
+                    <li>Hours in space: ${json[i].hoursInSpace}</li>
+                    <li style="color: ${color};">Active: ${json[i].active}</li>
+                    <li>Skills ${json[i].skills.join(", ")}</li>
+                  </ul>
+                  </div>
+                <img class="avatar" src=${json[i].picture}>
+              </div>`;
+}
+
+    });
+  });
+});