diff --git a/.DS_Store b/.DS_Store index b58b51e..1a753e6 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/public/.DS_Store b/public/.DS_Store index 006c957..fcb0475 100644 Binary files a/public/.DS_Store and b/public/.DS_Store differ diff --git a/public/css/desktop.css b/public/css/desktop.css index eeccd96..03ce1cb 100644 --- a/public/css/desktop.css +++ b/public/css/desktop.css @@ -388,13 +388,17 @@ } - #menue { + #menue1, + #menue2, + #menue3 { width: 35px; height: 25px; margin-left: 10px; } - .content .gesamtbetrag { + .content .gesamtbetrag1, + .content .gesamtbetrag2, + .content .gesamtbetrag3 { font-weight: bold; color: black; position: absolute; @@ -403,12 +407,6 @@ right: 15px; } - .gesamtbetrag { - position: absolute; - font-size: 1em; - bottom: 15px; - right: 15px; - } .button_hinzufuegen { background-color: #9BB558; @@ -455,6 +453,7 @@ padding-left: 50px; margin-top: 22.5px; margin-left: auto; + margin-right: 150px; margin-bottom: 22.5px; display: grid; grid-template-rows: auto auto; @@ -463,7 +462,7 @@ .content .kostenContainer { position: relative; - width: 300px; + width: 320px; height: 60px; font-weight: bold; font-size: 0.9em; @@ -475,7 +474,7 @@ color: black; display: inline-block; margin-left: 0px; - margin-right: 110px; + margin-right: 118px; text-align: right; } diff --git a/public/javascript/.DS_Store b/public/javascript/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/public/javascript/.DS_Store differ diff --git a/public/javascript/warenkorb.js b/public/javascript/warenkorb.js index 8df8f51..27a9911 100644 --- a/public/javascript/warenkorb.js +++ b/public/javascript/warenkorb.js @@ -1,542 +1,52 @@ -var warenkorb = []; -if (window.location.pathname.includes("/produkte.html")) { - document.addEventListener("DOMContentLoaded", function () { +let standardWerte = [10, 10, 10]; +const preise = [0.95, 2.0, 1.10]; +window.addEventListener('DOMContentLoaded', berechnePreise); - const produktpreise = { - "karotte": 0.95, // Preis für Karotten - "sellerie": 1.10, // Preis für Sellerie - "birnen": 0.50, // Preis für Birnen - "kiwi": 0.95, // Preis für Kiwi - "orangen": 2.0, //Preis für Orangen - "äpfel": 2.0 //Preis für Äpfel - }; - // Hole button1 - button6 - for (let i = 1; i <= 6; i++) { - const button = document.getElementById("button" + i); +function entferneAusWarenkorb(index) { + let inputId = 'menue' + index; + let inputElement = document.getElementById(inputId); + let testVar = inputElement.value; - button.addEventListener("click", function (event) { - // verhindern Sie das Standardverhalten des Links - event.preventDefault(); - - // ermitteln Sie die ausgewählte Anzahl, die ID und den Preis des Produkts - const select = button.previousElementSibling; - const anzahl = select.options[select.selectedIndex].value; - const produktID = this.parentElement.parentElement.querySelector('img[data-id]').getAttribute('data-id'); - console.log(produktID); - const preis = produktpreise[produktID]; - - //Produkt in den Warenkorb hinzufügen - produktHinzufuegen(produktID, anzahl, preis); - }); - } - - - function produktHinzufuegen(produktID, anzahl, preis) { - // Objekt mit Produktinformationen erstellen - let produkt = { - id: produktID, - anzahl: anzahl, - preis: preis // Gesamtpreis berechnen - }; - - // Produkt zum Warenkorb hinzufügen - warenkorb.push(produkt); - const notification = document.getElementById('notification'); - - // Anzeigen der Nachricht - notification.textContent = 'Produkt wurde zum Warenkorb hinzugefügt!'; - notification.style.display = 'block'; - - // Nachricht nach 3s ausblenden - setTimeout(function () { - notification.style.display = 'none'; - }, 3000); - - // Ausgabe des aktuellen Warenkorbs (zum Testen) - console.log(warenkorb); - - localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); - } - - }); -} -function createWarenkorbDiv(warenkorb) { - - for (const produkt of warenkorb) { - if (produkt.id === "karotte") { - const warenkorbDiv = document.createElement("div"); - warenkorbDiv.setAttribute("data-id", "karotte"); - warenkorbDiv.classList.add("produkte_warenkorb"); - const produktBild = document.createElement("img"); - produktBild.src = "pictures/karotte_ohne_preis.webp" - produktBild.alt = produkt.id; - warenkorbDiv.appendChild(produktBild); - - const produktDetails = document.createElement("div"); - produktDetails.classList.add("produkte_details"); - const produktBeschreibung = document.createTextNode("Karotten 1kg"); - const produktPreis = document.createTextNode("Kosten: 0.95€"); - const aufLager = document.createTextNode("Auf Lager: 250"); - produktDetails.appendChild(produktBeschreibung); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(produktPreis); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(aufLager); - - const buttonMitMenue = document.createElement("div"); - buttonMitMenue.classList.add("button_mit_menue"); - const paraButton = document.createElement("p"); - const buttonEntfernen = document.createElement("a"); - buttonEntfernen.classList.add("button_entfernen"); - buttonEntfernen.innerText = "Entfernen"; - buttonEntfernen.setAttribute("href", "#"); - - const menue = document.createElement("input"); - menue.setAttribute("type", "number"); - menue.setAttribute("id", "menue"); - menue.setAttribute("value", produkt.anzahl); - menue.setAttribute("max", produkt.anzahl); - menue.setAttribute("min", "0"); - menue.setAttribute("pattern", "[0-9]*"); - paraButton.appendChild(buttonEntfernen); - buttonMitMenue.appendChild(paraButton); - buttonMitMenue.appendChild(menue); - - const gesamtPreis = document.createElement("p"); - gesamtPreis.classList.add("gesamtbetrag"); - const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2))); - gesamtPreis.appendChild(gesamtPreisText); - - - warenkorbDiv.appendChild(produktDetails); - warenkorbDiv.appendChild(gesamtPreis); - warenkorbDiv.appendChild(buttonMitMenue); - const warenkorbContainer = document.querySelector(".warenkorb-container"); - warenkorbContainer.appendChild(warenkorbDiv); - buttonEntfernen.addEventListener("click", function (event) { - if (produkt.anzahl > 1) { - produkt.anzahl--; - localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); - } else { - entferneProdukt("karotte"); - console.log("Hier ausgabe vom Warenkorb:"); - console.log(warenkorb); - const karotteContainer = document.querySelector('[data-id="karotte"]'); - //Löschen vom warenkorbDiv - warenkorbContainer.removeChild(karotteContainer); - } - location.reload(true); - }); - } else if (produkt.id === "sellerie") { - const warenkorbDiv = document.createElement("div"); - warenkorbDiv.setAttribute("data-id", "sellerie"); - warenkorbDiv.classList.add("produkte_warenkorb"); - const produktBild = document.createElement("img"); - produktBild.src = "pictures/sellerie_ohne_preis.webp" - produktBild.alt = produkt.id; - warenkorbDiv.appendChild(produktBild); - - const produktDetails = document.createElement("div"); - produktDetails.classList.add("produkte_details"); - - const produktBeschreibung = document.createTextNode("Sellerie 1 Stück"); - const produktPreis = document.createTextNode("Kosten: 1.10€"); - const aufLager = document.createTextNode("Auf Lager: 1000"); - - produktDetails.appendChild(produktBeschreibung); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(produktPreis); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(aufLager); - - const buttonMitMenue = document.createElement("div"); - buttonMitMenue.classList.add("button_mit_menue"); - const paraButton = document.createElement("p"); - const buttonEntfernen = document.createElement("a"); - buttonEntfernen.classList.add("button_entfernen"); - buttonEntfernen.innerText = "Entfernen"; - buttonEntfernen.setAttribute("href", "#"); - - const menue = document.createElement("input"); - menue.setAttribute("type", "number"); - menue.setAttribute("id", "menue"); - menue.setAttribute("value", produkt.anzahl); - menue.setAttribute("max", produkt.anzahl); - menue.setAttribute("min", "0"); - menue.setAttribute("pattern", "[0-9]*"); - paraButton.appendChild(buttonEntfernen); - buttonMitMenue.appendChild(paraButton); - buttonMitMenue.appendChild(menue); - - const gesamtPreis = document.createElement("p"); - gesamtPreis.classList.add("gesamtbetrag"); - const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2))); - gesamtPreis.appendChild(gesamtPreisText); - - - warenkorbDiv.appendChild(produktDetails); - warenkorbDiv.appendChild(gesamtPreis); - warenkorbDiv.appendChild(buttonMitMenue); - const warenkorbContainer = document.querySelector(".warenkorb-container"); - warenkorbContainer.appendChild(warenkorbDiv); - buttonEntfernen.addEventListener("click", function (event) { - if (produkt.anzahl > 1) { - produkt.anzahl--; - localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); - } else { - entferneProdukt("sellerie"); - console.log("Hier ausgabe vom Warenkorb:"); - console.log(warenkorb); - const sellerieContainer = document.querySelector('[data-id="sellerie"]'); - //Löschen vom warenkorbDiv - warenkorbContainer.removeChild(sellerieContainer); - } - location.reload(true); - }); - } else if (produkt.id === "birnen") { - const warenkorbDiv = document.createElement("div"); - warenkorbDiv.setAttribute("data-id", "birnen"); - warenkorbDiv.classList.add("produkte_warenkorb"); - const produktBild = document.createElement("img"); - produktBild.src = "pictures/birne_ohne_preis.webp" - produktBild.alt = produkt.id; - warenkorbDiv.appendChild(produktBild); - - const produktDetails = document.createElement("div"); - produktDetails.classList.add("produkte_details"); - - const produktBeschreibung = document.createTextNode("Birne 0.5kg"); - const produktPreis = document.createTextNode("Kosten: 0.50€"); - const aufLager = document.createTextNode("Auf Lager: 500"); - - produktDetails.appendChild(produktBeschreibung); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(produktPreis); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(aufLager); - - const buttonMitMenue = document.createElement("div"); - buttonMitMenue.classList.add("button_mit_menue"); - const paraButton = document.createElement("p"); - const buttonEntfernen = document.createElement("a"); - buttonEntfernen.classList.add("button_entfernen"); - buttonEntfernen.innerText = "Entfernen"; - buttonEntfernen.setAttribute("href", "#"); - - const menue = document.createElement("input"); - menue.setAttribute("type", "number"); - menue.setAttribute("id", "menue"); - menue.setAttribute("value", produkt.anzahl); - menue.setAttribute("max", produkt.anzahl); - menue.setAttribute("min", "0"); - menue.setAttribute("pattern", "[0-9]*"); - paraButton.appendChild(buttonEntfernen); - buttonMitMenue.appendChild(paraButton); - buttonMitMenue.appendChild(menue); - - const gesamtPreis = document.createElement("p"); - gesamtPreis.classList.add("gesamtbetrag"); - const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2))); - gesamtPreis.appendChild(gesamtPreisText); - - - warenkorbDiv.appendChild(produktDetails); - warenkorbDiv.appendChild(gesamtPreis); - warenkorbDiv.appendChild(buttonMitMenue); - const warenkorbContainer = document.querySelector(".warenkorb-container"); - warenkorbContainer.appendChild(warenkorbDiv); - buttonEntfernen.addEventListener("click", function (event) { - if (produkt.anzahl > 1) { - produkt.anzahl--; - localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); - } else { - entferneProdukt("birnen"); - console.log("Hier ausgabe vom Warenkorb:"); - console.log(warenkorb); - const birnenContainer = document.querySelector('[data-id="birnen"]'); - //Löschen vom warenkorbDiv - warenkorbContainer.removeChild(birnenContainer); - } - location.reload(true); - }); - } else if (produkt.id === "kiwi") { - const warenkorbDiv = document.createElement("div"); - warenkorbDiv.setAttribute("data-id", "kiwi"); - warenkorbDiv.classList.add("produkte_warenkorb"); - const produktBild = document.createElement("img"); - produktBild.src = "pictures/kiwi_ohne_preis.png.avif" - produktBild.alt = produkt.id; - warenkorbDiv.appendChild(produktBild); - - const produktDetails = document.createElement("div"); - produktDetails.classList.add("produkte_details"); - - const produktBeschreibung = document.createTextNode("Kiwi 0.5kg"); - const produktPreis = document.createTextNode("Kosten: 0.95€"); - const aufLager = document.createTextNode("Auf Lager: 250"); - produktDetails.appendChild(produktBeschreibung); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(produktPreis); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(aufLager); - - const buttonMitMenue = document.createElement("div"); - buttonMitMenue.classList.add("button_mit_menue"); - const paraButton = document.createElement("p"); - const buttonEntfernen = document.createElement("a"); - buttonEntfernen.classList.add("button_entfernen"); - buttonEntfernen.innerText = "Entfernen"; - buttonEntfernen.setAttribute("href", "#"); - - const menue = document.createElement("input"); - menue.setAttribute("type", "number"); - menue.setAttribute("id", "menue"); - menue.setAttribute("value", produkt.anzahl); - menue.setAttribute("max", produkt.anzahl); - menue.setAttribute("min", "0"); - menue.setAttribute("pattern", "[0-9]*"); - paraButton.appendChild(buttonEntfernen); - buttonMitMenue.appendChild(paraButton); - buttonMitMenue.appendChild(menue); - - const gesamtPreis = document.createElement("p"); - gesamtPreis.classList.add("gesamtbetrag"); - const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2))); - gesamtPreis.appendChild(gesamtPreisText); - - - warenkorbDiv.appendChild(produktDetails); - warenkorbDiv.appendChild(gesamtPreis); - warenkorbDiv.appendChild(buttonMitMenue); - const warenkorbContainer = document.querySelector(".warenkorb-container"); - warenkorbContainer.appendChild(warenkorbDiv); - buttonEntfernen.addEventListener("click", function (event) { - if (produkt.anzahl > 1) { - produkt.anzahl--; - localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); - } else { - entferneProdukt("kiwi"); - console.log("Hier ausgabe vom Warenkorb:"); - console.log(warenkorb); - const kiwiContainer = document.querySelector('[data-id="kiwi"]'); - //Löschen vom warenkorbDiv - warenkorbContainer.removeChild(kiwiContainer); - } - location.reload(true); - }); - } else if (produkt.id === "orangen") { - const warenkorbDiv = document.createElement("div"); - warenkorbDiv.setAttribute("data-id", "orangen"); - warenkorbDiv.classList.add("produkte_warenkorb"); - const produktBild = document.createElement("img"); - produktBild.src = "pictures/orangen_ohne_preis.png.avif"; - produktBild.alt = produkt.id; - warenkorbDiv.appendChild(produktBild); - - const produktDetails = document.createElement("div"); - produktDetails.classList.add("produkte_details"); - - const produktBeschreibung = document.createTextNode("Orangen 1kg"); - const produktPreis = document.createTextNode("Kosten: 2€"); - const aufLager = document.createTextNode("Auf Lager: 350"); - - produktDetails.appendChild(produktBeschreibung); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(produktPreis); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(aufLager); - - const buttonMitMenue = document.createElement("div"); - buttonMitMenue.classList.add("button_mit_menue"); - const paraButton = document.createElement("p"); - const buttonEntfernen = document.createElement("a"); - buttonEntfernen.classList.add("button_entfernen"); - buttonEntfernen.innerText = "Entfernen"; - buttonEntfernen.setAttribute("href", "#"); - - const menue = document.createElement("input"); - menue.setAttribute("type", "number"); - menue.setAttribute("id", "menue"); - menue.setAttribute("value", produkt.anzahl); - menue.setAttribute("max", produkt.anzahl); - menue.setAttribute("min", "0"); - menue.setAttribute("pattern", "[0-9]*"); - paraButton.appendChild(buttonEntfernen); - buttonMitMenue.appendChild(paraButton); - buttonMitMenue.appendChild(menue); - - const gesamtPreis = document.createElement("p"); - gesamtPreis.classList.add("gesamtbetrag"); - const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2))); - gesamtPreis.appendChild(gesamtPreisText); - - - warenkorbDiv.appendChild(produktDetails); - warenkorbDiv.appendChild(gesamtPreis); - warenkorbDiv.appendChild(buttonMitMenue); - const warenkorbContainer = document.querySelector(".warenkorb-container"); - warenkorbContainer.appendChild(warenkorbDiv); - buttonEntfernen.addEventListener("click", function (event) { - if (produkt.anzahl > 1) { - produkt.anzahl--; - localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); - } else { - entferneProdukt("orangen"); - console.log("Hier ausgabe vom Warenkorb:"); - console.log(warenkorb); - const orangenContainer = document.querySelector('[data-id="orangen"]'); - //Löschen vom warenkorbDiv - warenkorbContainer.removeChild(orangenContainer); - } - location.reload(true); - }); - } else if (produkt.id === "äpfel") { - const warenkorbDiv = document.createElement("div"); - warenkorbDiv.setAttribute("data-id", "äpfel"); - warenkorbDiv.classList.add("produkte_warenkorb"); - const produktBild = document.createElement("img"); - produktBild.src = "pictures/äpfel_ohne_preis.png.avif" - produktBild.alt = produkt.id; - warenkorbDiv.appendChild(produktBild); - - const produktDetails = document.createElement("div"); - produktDetails.classList.add("produkte_details"); - - const produktBeschreibung = document.createTextNode("Äpfel 1kg"); - const produktPreis = document.createTextNode("Kosten: 2€"); - const aufLager = document.createTextNode("Auf Lager: 500"); - - produktDetails.appendChild(produktBeschreibung); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(produktPreis); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(document.createElement("br")); - produktDetails.appendChild(aufLager); - - const buttonMitMenue = document.createElement("div"); - buttonMitMenue.classList.add("button_mit_menue"); - const paraButton = document.createElement("p"); - const buttonEntfernen = document.createElement("a"); - buttonEntfernen.classList.add("button_entfernen"); - buttonEntfernen.innerText = "Entfernen"; - buttonEntfernen.setAttribute("href", "#"); - - const menue = document.createElement("input"); - menue.setAttribute("type", "number"); - menue.setAttribute("id", "menue"); - menue.setAttribute("value", produkt.anzahl); - menue.setAttribute("max", produkt.anzahl); - menue.setAttribute("min", "0"); - menue.setAttribute("pattern", "[0-9]*"); - paraButton.appendChild(buttonEntfernen); - buttonMitMenue.appendChild(paraButton); - buttonMitMenue.appendChild(menue); - - const gesamtPreis = document.createElement("p"); - gesamtPreis.classList.add("gesamtbetrag"); - const gesamtPreisText = document.createTextNode("Betrag Gesamt (inkl. MwSt): " + ((produkt.preis * produkt.anzahl).toFixed(2))); - gesamtPreis.appendChild(gesamtPreisText); - - - warenkorbDiv.appendChild(produktDetails); - warenkorbDiv.appendChild(gesamtPreis); - warenkorbDiv.appendChild(buttonMitMenue); - const warenkorbContainer = document.querySelector(".warenkorb-container"); - warenkorbContainer.appendChild(warenkorbDiv); - buttonEntfernen.addEventListener("click", function (event) { - if (produkt.anzahl > 1) { - produkt.anzahl--; - localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); - } else { - entferneProdukt("äpfel"); - console.log("Hier ausgabe vom Warenkorb:"); - console.log(warenkorb); - const apfelContainer = document.querySelector('[data-id="äpfel"]'); - //Löschen vom warenkorbDiv - warenkorbContainer.removeChild(apfelContainer); - } - location.reload(true); - }); - } - - } - const contentContainer = document.querySelector(".content"); - const äußererContainer = document.createElement("div"); - äußererContainer.classList.add("äußererContainer"); - const kostenContainer = document.createElement("div"); - kostenContainer.classList.add("kostenContainer"); - - const lieferkostenText = document.createElement("p"); - lieferkostenText.classList.add("lieferkosten_text"); - lieferkostenText.innerText = "Lieferkosten:"; - - const lieferkostenPreis = document.createElement("p"); - lieferkostenPreis.classList.add("lieferkosten_preis"); - lieferkostenPreis.innerText = "2.90€"; - - const preisZusammen = ermittleGesamtpreis() + 2.9; - const gesamtPreisText = document.createElement("p"); - gesamtPreisText.classList.add("gesamtkosten_text") - gesamtPreisText.innerText = "Gesamtkosten (inkl. MwSt): "; - const gesamtPreis = document.createElement("p"); - gesamtPreis.classList.add("gesamtpreis"); - gesamtPreis.innerText = "" + preisZusammen.toFixed(2) + "€"; - const buttonBestellungAbschließen = document.createElement("div"); - const buttonBestellungAbschließenAnchor = document.createElement("a"); - buttonBestellungAbschließenAnchor.classList.add("button_bestellung_abschließen"); - buttonBestellungAbschließenAnchor.setAttribute("href", "bestellformular.html"); - buttonBestellungAbschließenAnchor.innerText = "Kostenpflichtig bestellen"; - console.log(preisZusammen); - localStorage.setItem("gesamtpreis", preisZusammen); - - if (warenkorb.length === 0) { - const warenkorbLeer = document.createElement("p"); - warenkorbLeer.classList.add("warenkorbLeer"); - warenkorbLeer.innerText = "Der Warenkorb ist zur Zeit leer."; - contentContainer.appendChild(warenkorbLeer); + if (/^[0-9]+$/.test(testVar) === false) { + zeigeHinweisfenster("Keine gültige Zahl eingegeben."); } else { - contentContainer.appendChild(äußererContainer); - äußererContainer.appendChild(kostenContainer); - kostenContainer.appendChild(lieferkostenText); - kostenContainer.appendChild(lieferkostenPreis); - kostenContainer.appendChild(gesamtPreisText); - kostenContainer.appendChild(gesamtPreis); - buttonBestellungAbschließen.appendChild(buttonBestellungAbschließenAnchor); - äußererContainer.appendChild(buttonBestellungAbschließen); - } -} -function ermittleGesamtpreis() { - var preis = 0; - const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || []; - console.log(warenkorb); - for (produkt of warenkorb) { - preis += produkt.preis * produkt.anzahl; - } - return preis; -} -function entferneProdukt(produktID) { - const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || []; - for (let i = 0; i < warenkorb.length; i++) { - if (warenkorb[i].id === produktID) { - warenkorb.splice(i, 1)// entferne das Element aus dem Array + let verringereUm = parseInt(inputElement.value); - break; // breche die Schleife ab, da das Element gefunden wurde + if ((standardWerte[index - 1] - verringereUm) < 0) { + zeigeHinweisfenster("Der Wert darf nicht negativ sein."); + } else { + zeigeHinweisfenster(""); + let aktuellerWert = standardWerte[index - 1] - verringereUm; + standardWerte[index - 1] = aktuellerWert; + inputElement.value = aktuellerWert; } } - localStorage.setItem("warenkorb", JSON.stringify(warenkorb)); // speichere das aktualisierte Array im LocalStorage + berechnePreise(); + +} +function berechnePreise() { + for (let i = 0; i < standardWerte.length; i++) { + let preisID = 'gesamtbetrag' + (i + 1); + let preisElement = document.getElementById(preisID); + let preisEinzeln = (standardWerte[i] * preise[i]).toFixed(2); + preisElement.innerText = "Betrag Gesamt (inkl. MwSt.): " + preisEinzeln + '€'; + + } + gesamtpreis = ((standardWerte[0] * preise[0]) + (standardWerte[1] * preise[1]) + (standardWerte[2] * preise[2])) + 2.90; + let gesamtkostenText = document.getElementById("gesamtpreis"); + gesamtkostenText.innerText = gesamtpreis.toFixed(2) + "€"; + localStorage.setItem("gesamtpreis", gesamtpreis); } -// prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV -document.addEventListener("DOMContentLoaded", function () { - // prüfe, ob der Benutzer sich auf der warenkorb.html-Seite befindet und erstelle das DIV - if (window.location.pathname.includes("/warenkorb.html")) { - const warenkorb = JSON.parse(localStorage.getItem("warenkorb")) || []; - createWarenkorbDiv(warenkorb); +function zeigeHinweisfenster(text) { + var hinweisfenster = document.getElementById("notification"); + hinweisfenster.innerText = text; + if (text !== "") { + hinweisfenster.style.display = "block"; + } else { + hinweisfenster.style.display = "none"; } -}); +} + + diff --git a/public/pictures/äpfel.png b/public/pictures/aepfel.png similarity index 100% rename from public/pictures/äpfel.png rename to public/pictures/aepfel.png diff --git a/public/pictures/äpfel_ohne_preis.png.avif b/public/pictures/aepfel_ohne_preis.png.avif similarity index 100% rename from public/pictures/äpfel_ohne_preis.png.avif rename to public/pictures/aepfel_ohne_preis.png.avif diff --git a/public/produkte.html b/public/produkte.html index bfe7274..5d16b17 100644 --- a/public/produkte.html +++ b/public/produkte.html @@ -135,7 +135,7 @@
- Äpfel + Äpfel
FoodAmpel gelb +
+
@@ -40,14 +40,15 @@
-