LaunchCodeEducation · JustJamie313 · Feb 8, 2022 · Feb 8, 2022 · Feb 8, 2022 · Feb 8, 2022
diff --git a/_config.yml b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-minimal
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width">
     <title>Astronauts</title>
     <link href="style.css" rel="stylesheet" type="text/css" />
+    <link href="styles.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
     <script src="script.js"></script>

diff --git a/script.js b/script.js
@@ -1 +1,39 @@
-// TODO: add code here
+window.addEventListener('load',function(){
+    let astronauts = fetch("https://handlers.education.launchcode.org/static/astronauts.json");
+    astronauts.then(function(response){
+        let data = response.json();
+        data.then(function(data){
+            let results = document.querySelector('#container');
+            data.sort((a,b)=>b.hoursInSpace-a.hoursInSpace);
+            for(let a=0;a<data.length;a++){
+                results.innerHTML += `
+                <div class="astronaut">
+                    <div class="bio">
+                    <h3>${data[a].firstName} ${data[a].lastName}</h3>
+                    <ul>
+                        <li>Hours in space: ${data[a].hoursInSpace}</li>
+                        <li id='color'>Active: ${data[a].active}</li>
+                        <li>Skills: ${data[a].skills}</li>
+                    </ul>
+                    </div>
+                    <img class="avatar" src="${data[a].picture}">
+                </div>
+                `;
+            }
+            let count = document.querySelector('h1');
+            count.innerHTML += ` ${data.length}`;
+            setColor();
+        });
+    }); 
+});
+function setColor(){
+    let elements = document.querySelectorAll('li');
+    for(let a=0;a<elements.length;a++){
+        if(elements[a].innerHTML === 'Active: true'){
+            elements[a].style.color = 'green';
+        }
+    }
+}
+
+
+
diff --git a/styles.css b/styles.css
@@ -0,0 +1,3 @@
+#color{
+    color: red;
+}