let requestURL = './data.json';
let request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function() {
    let superHeroes = request.response;
    console.log(superHeroes);


    const headerAnchor = document.getElementById('header');
    
    var headerH1  = document.createElement('h1');
    var headerP = document.createElement('p');
    headerH1.textContent = superHeroes["SquadName"];
    headerP.textContent = "Hometown : "  + superHeroes["HomeTown"];

    headerAnchor.appendChild(headerH1);
    headerAnchor.appendChild(headerP);

    const contentAnchor = document.getElementById('content');

    for (let i = 0; i < 3; ++i) {
        
        let article = document.createElement('article');
        let h2 = document.createElement('h2');
        let p = document.createElement('p');
        let p2 = document.createElement('p');
        let p3 = document.createElement('p');
        let ul = document.createElement('ul');

        article.classList.add('col-4');
        h2.textContent = superHeroes["members"][i]["name"];
        p.textContent = "Secret Identity : " + superHeroes["members"][i]["secretIdentity"];
        p2.textContent = "Age : " + superHeroes["members"][i]["age"];
        p3.textContent = "Powers :";
            
        contentAnchor.appendChild(article);
        article.appendChild(h2);
        article.appendChild(p);
        article.appendChild(p2);
        article.appendChild(p3);
        article.appendChild(ul);

        superHeroes["members"][i]["powers"].forEach(power => {
            let li = document.createElement('li');
            li.textContent = power;
            ul.appendChild(li);
        });
        
        
    }


}