completed fetch studio

timwebdev1 · timwebdev1 · commit fa77b468df38 · 2024-08-13T13:06:14.000-05:00
diff --git a/fetch/studio/index.html b/fetch/studio/index.html
@@ -9,6 +9,10 @@
   <body>
     <script src="script.js"></script>
     <h1>Astronauts</h1>
+
+     <!-- Bonus mission 3 -->
+    <div id="count"></div>
+
     <div id="container">
         <!-- List of astronauts will be added here dynamically -->
     </div>
diff --git a/fetch/studio/script.js b/fetch/studio/script.js
@@ -1 +1,45 @@
 //TODO: Add Your Code Below
+window.addEventListener("load", function () {
+  // TODO; create object for container element
+  const container = document.getElementById("container");
+
+  // Fetch using traditional syntax
+  fetch(
+    "https://handlers.education.launchcode.org/static/astronauts.json"
+  ).then(function (response) {
+    response.json().then(function (data) {
+      console.log(data);
+
+      // Bonus mission 1
+      data.sort(function (a, b) {
+        return a.hoursInSpace < b.hoursInSpace ? 1 : -1;
+      });
+
+      // Bonus mission 3
+      const count = document.getElementById('count');
+      count.innerHTML = `These ${data.length} people have ventured into outer space.`
+
+      for (let i = 0; 0 < data.length; i++) {
+        let astronaut = data[i];
+
+        // Bonus mission 2
+        let activeClass = astronaut.active ? "active" : "";
+
+
+        container.innerHTML += `
+          <div class = "astronaut">
+            <div class = "bio">
+              <h3>${astronaut.firstName} ${astronaut.lastName}</h3>
+              <ul>
+              <li>Hours in space: ${astronaut.hoursInSpace}</li>
+              <li class = ${activeClass}>Active: ${astronaut.active}</li>
+              <li>Skills: ${astronaut.skills.join(", ")}</li>
+              </ul>
+            </div>
+            <img class = "avatar" src = "${astronaut.picture}"
+          </div>
+        `;
+      }
+    });
+  });
+});
diff --git a/fetch/studio/style.css b/fetch/studio/style.css
@@ -14,3 +14,7 @@
     margin-bottom: 20px;
     border-radius: 6px;
 }
+
+.active {
+    color: green;
+}

Original file line number	Diff line number	Diff line change
`@@ -14,3 +14,7 @@`
`14`	`14`	`margin-bottom: 20px;`
`15`	`15`	`border-radius: 6px;`
`16`	`16`	`}`
	`17`	`+`
	`18`	`+.active {`
	`19`	`+ color: green;`
	`20`	`+}`