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");
            let name;

            for (let i = 0; i < json.length; i++) {
                for (let j = 0; j < json[i].skills.length; j++) {
                    json[i].skills[j] = " " + json[i].skills[j];
                }
                name = `${json[i].firstName} ${json[i].lastName}`
                div.innerHTML += `
                    <div class="astronaut">
                    <div class="bio">
                        <h3>${name}</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>
                `
            };
        });   
    });
});