fetch studio

Author: Lbeckap

fetch/studio/script.js

@@ -1 +1,39 @@
 //TODO: Add Your Code Below
+function init() {
+ 
+    fetch('https://handlers.education.launchcode.org/static/astronauts.json')
+    .then(response => response.json())
+    .then(data => {
+        data.sort((a, b) => b.hoursInSpace - a.hoursInSpace);
+
+        const astronautCount = document.createElement('h2');
+        const container = document.getElementById('container');
+        astronautCount.textContent = `Total Number of Astronauts: ${data.length}`;
+        document.body.insertBefore(astronautCount, container);
+
+        data.forEach(astronaut => {
+            let activeText = `Active: ${astronaut.active}`;
+            if (astronaut.active) {
+                activeText = `<span style="color: green;">Active: ${astronaut.active}</span>`;
+            }
+
+            const astronautHTML = `
+                <div class="astronaut">
+                    <div class="bio">
+                        <h3>${astronaut.firstName} ${astronaut.lastName}</h3>
+                        <ul>
+                            <li>Hours in space: ${astronaut.hoursInSpace}</li>
+                            <li>${activeText}</li>
+                            <li>Skills: ${astronaut.skills.join(', ')}</li>
+                        </ul>
+                    </div>
+                    <img class="avatar" src="${astronaut.picture}">
+                </div>
+            `;
+            container.innerHTML += astronautHTML;
+        });
+    })
+ 
+}
+
+window.addEventListener('load', init);

fetch/studio/style.css

@@ -10,7 +10,24 @@
     justify-content: space-between;
     width: 500px;
     align-items: center;
-    padding: 5px;
+    padding: 10px;
     margin-bottom: 20px;
     border-radius: 6px;
+    box-shadow: 5px 5px 10px rgba(75, 75, 75, 0.392);
+    background-color: white;
 }
+
+#container {
+    margin: 0 auto;
+    max-width: 80%;
+
+}
+
+ h1 ,h2 {
+    text-align: center;
+}
+
+ body {
+    font-family: Arial, Helvetica, sans-serif;
+    background-image: linear-gradient(rgb(255, 197, 88), rgb(0, 0, 148));
+ }