Frontend dolgozat megoldása, valamint Tusjak óra (2024. 11. 22.)

Suli/13.b/Frontend/Dolgozatok/Dolgozat_2024. 11. 22/Feladat1/feldolgozo.js

@@ -0,0 +1,37 @@
+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()
+})