const button = document.getElementById("gomb")
const kiiras = document.getElementById("etelek")

button.addEventListener("click", () => {
    const etel = document.querySelector("select").selectedIndex
    let xhttp = new XMLHttpRequest()
    xhttp.open("GET", "http://localhost:5500/Feladat1/receptek.json", true)

    xhttp.onreadystatechange = function() {
        if (xhttp.readyState === 4) {
            if (xhttp.status === 200) {
                const valasztottEtel = JSON.parse(xhttp.responseText)[etel]

                const nev = document.createElement("span")
                const elkeszitesiIdo = document.createElement("span")
                const hozzavalok = document.createElement("span")
                const tapertek = document.createElement("span")

                const tapertekObject = valasztottEtel["Tápérték"]

                nev.innerHTML = `<b>Név</b>: ${valasztottEtel["nev"]}<br>`
                elkeszitesiIdo.innerHTML = `<b>Elkészítési idő</b>: ${valasztottEtel["elkeszitesiIdo"]}<br>`
                hozzavalok.innerHTML = `<b>Hozzávalók</b>: ${valasztottEtel["hozzávalók"].join(", ")}<br>`
                tapertek.innerHTML = `<b>Tápérték</b>: ${tapertekObject["energia"]}, ${tapertekObject["fehérje"]}, ${tapertekObject["szénhidrát"]}, ${tapertekObject["zsír"]}<br><br>`

                kiiras.appendChild(nev)
                kiiras.appendChild(elkeszitesiIdo)
                kiiras.appendChild(hozzavalok)
                kiiras.appendChild(tapertek)
            } else {
                console.log(`Hiba történt: ${xhttp.status}`);
            }
        }
    }

    xhttp.send()
})