dwyci
diff --git a/‎fetch/fetch_planets.html
Lines changed: 38 additions & 0 deletions b/‎fetch/fetch_planets.html
Lines changed: 38 additions & 0 deletions
diff --git a/‎fetch/studio/script.js
Lines changed: 12 additions & 0 deletions b/‎fetch/studio/script.js
Lines changed: 12 additions & 0 deletions
diff --git a/‎fetch/studio/style.css
Lines changed: 5 additions & 0 deletions b/‎fetch/studio/style.css
Lines changed: 5 additions & 0 deletions
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+   <head>
+      <title>Fetch Planets</title>
+      <script>
+         window.addEventListener("load", function(){
+              
+
+            // TODO: fetch planets JSON
+            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;
+               destination.addEventListener("click", function(){                   
+                    destination.innerHTML = `
+                     <div>
+                        <h3>Planet ${json[index].name}</h3>
+                        <img src=${json[index].image} height=250></img>
+                     </div>
+                  `;
+                  index = (index + 1) % json.length;
+            });
+   });
+   
+
+   
+});
+               
+            });
+      </script>
+   </head>
+   <body>
+      <h1>Destination</h1>
+      <div id="destination">
+         <h3>Planet</h3>
+      </div>
+   </body>
+</html>
@@ -7,14 +7,26 @@ window.addEventListener("load", function() {
 
     fetch("https://handlers.education.launchcode.org/static/astronauts.json").then(function(response){
         response.json().then(function(data){
+
+            //sort astronauts by descending order
+            data.sort((a, b) => b.hoursInSpace - a.hoursInSpace);
+
+             // Select the container to append astronaut cards
+             let container = document.getElementById("container");
+
             for (let i=0; i<data.length; i++){
                 let astronaut = data[i];
+
+            // Determine the class for the 'Active' status based on astronaut's active status
+            let activeClass = astronaut.active ? "active" : "inactive";
+
                 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>Active: ${astronaut.active}</li>
                     <li>Skills: ${astronaut.skills}</li>
                     </ul>
 
@@ -14,3 +14,8 @@
     margin-bottom: 20px;
     border-radius: 6px;
 }
+
+.active {
+    color: green;
+}
+
Original file line number	Diff line number	Diff line change
`@@ -14,3 +14,8 @@`
`14`	`14`	`margin-bottom: 20px;`
`15`	`15`	`border-radius: 6px;`
`16`	`16`	`}`
	`17`	`+`
	`18`	`+.active {`
	`19`	`+ color: green;`
	`20`	`+}`
	`21`	`+`