script.js

// // TODO: add code here



window.addEventListener("load", function() {
   fetch("https://handlers.education.launchcode.org/static/astronauts.json")
   .then( function(response) {
      response.json().then( function(json) {
         
        
         const astronauts = document.getElementById("container");
         let teamHoursInSpace = json;

         teamHoursInSpace.sort((a,b) => b.hoursInSpace - a.hoursInSpace);
         // Add HTML that includes the JSON data
         for( let i=0; i<teamHoursInSpace.length; i++) {

         container.innerHTML += `
         <div class="astronaut">
          <div class="bio">
         <h3> ${json[i].firstName} ${json[i].lastName} </h3>
            <ul>
               <li>Hours in space: ${json[i].hoursInSpace}</li>
               <li>Active: ${json[i].active}</li>
               <li>Skills: ${json[i].skills}</li>
               
            </ul></div>
            <img class="avatar" src=${json[i].picture}>
            
            </div>

         `;
         
         }
      });
   });
});