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 div = document.getElementById("container");
             // 3.	Add a count of astronauts to the page.
            container.innerHTML = `Number of astronauts: ${json.length}<br><br>`;
            // 1.	Display the astronauts sorted from most to least time in space.
            //      https://www.w3schools.com/js/js_array_sort.asp
            json.sort((a, b) => (a.hoursInSpace > b.hoursInSpace) ? -1 : 1)
            // 
            for (let i = 0; i < json.length; i++) {
                //
                 div.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 id=isActive${i}>Active: ${json[i].active}</li>
                            <li>Skills: ${json[i].skills}</li>
                        </ul>
                    </div>
                        <img class="avatar" src="${json[i].picture}">
                    </div>
                `                ;
                // 2.	Make the "Active: true" text green, for astronauts that are still active (active is true).
                if (json[i].active) {
                    document.getElementById("isActive" + i).style.color = "green";
                }

                
            };
        });
    });
});