fetch("https://raw.githubusercontent.com/Laboratoria/LIM011-data-lovers/master/src/data/potter/potter.json").then(x => x.json()).then(y => megjelenit(y));

function megjelenit(tomb){
    console.log(tomb);
    let szoveg = "";
    for (let elem of tomb) {
        szoveg += "<option value=\"\">"+elem.name+"</option>";
    }
    document.getElementById("lenyilo").innerHTML = szoveg;

//////////////////////////////////////////////////////////////////

    let szoveg2 = "";
    for(let elem of tomb){
        szoveg2 += "<tr>";
        szoveg2 += "<td>";
        szoveg2 += elem.name;
        szoveg2 += "</td>";
        szoveg2 += "<td>";
        szoveg2 += elem.gender;
        szoveg2 += "</td>";
        szoveg2 += "<td>";
        szoveg2 += elem.house;
        szoveg2 += "</td>";
        szoveg2 += "<td>";
        szoveg2 += elem.actor;
        szoveg2 += "</td>";
        szoveg2 += "</tr>";
    }

    document.getElementById("torzs").innerHTML = szoveg2;

    ///////////////////////////////////////////////////////////////////
    let szoveg3 = "";

    for (let elem of tomb) {
        szoveg3 += '<div class="col-md-4 col-sm-6">';
        szoveg3+= '<img class="img-fluid w-75" src="' +elem.image+ '">' 
        szoveg3 += '<br>';
        szoveg3+= '<div style="font-style: italic; text-align:center; padding: 10px;">';
        szoveg3 += elem.name
        szoveg3 += '</div>';
        szoveg3 += '</div>';
    }

    document.getElementById("kepek").innerHTML = szoveg3;

}