script.js

// TODO: add code here
window.addEventListener("load", function () {
    // Fetch astronauts data
    fetch("https://handlers.education.launchcode.org/static/astronauts.json")
      .then(function (response) {
        return response.json();
      })
      .then(function (astronauts) {
        // Sort astronauts from most to least time in space
        astronauts.sort(function (a, b) {
          return b.hoursInSpace - a.hoursInSpace;
        });

        // Get the container element
        const container = document.getElementById("container");

        // Loop through each astronaut
        astronauts.forEach(function (astronaut) {
          // Create HTML elements for each astronaut
          const astronautDiv = document.createElement("div");
          astronautDiv.className = "astronaut";

          const bioDiv = document.createElement("div");
          bioDiv.className = "bio";

          const h3 = document.createElement("h3");
          h3.textContent = astronaut.firstName + " " + astronaut.lastName;

          const ul = document.createElement("ul");
          const hoursLi = document.createElement("li");
          hoursLi.textContent = "Hours in space: " + astronaut.hoursInSpace;

          const activeLi = document.createElement("li");
          activeLi.textContent = "Active: " + astronaut.active;
          if (astronaut.active) {
            activeLi.classList.add("active");
          }

          const skillsLi = document.createElement("li");
          skillsLi.textContent = "Skills: " + astronaut.skills.join(", ");

          // Append elements to the container div
          container.appendChild(astronautDiv);
          astronautDiv.appendChild(bioDiv);
          bioDiv.appendChild(h3);
          bioDiv.appendChild(ul);
          ul.appendChild(hoursLi);
          ul.appendChild(activeLi);
          ul.appendChild(skillsLi);

          const avatarImg = document.createElement("img");
          avatarImg.className = "avatar";
          avatarImg.src = "images/" + astronaut.picture;
          astronautDiv.appendChild(avatarImg);
        });
      })
      .catch(function (error) {
        console.error("Error fetching astronauts data:", error);
      });
  });