alvin/Schoolkantine
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Schoolkantine.git synced 2026-03-06 21:36:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Refactor item detail display logic and improve modal functionality

Browse Source
This commit is contained in:
vista-man
2025-02-12 11:02:52 +01:00
parent cdedc17c51
commit 3ebac37168
1 changed files with 32 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
website/script.js
View File

@@ -1,44 +1,44 @@
// Functie om de details van een geselecteerd item weer te geven // Functie om de details van een geselecteerd item weer te geven
function showItemDetails(item) { function showItemDetails(item) {
var items = []; var title = "";
var imageSrc = "";
var description = "";
// Afhankelijk van het geselecteerde item, pas de details aan // Afhankelijk van het geselecteerde item, pas de details aan
// Stel de inhoud in afhankelijk van het geselecteerde item
if (item === 'Broodjes') { if (item === 'Broodjes') {
title = "Broodje Gezond"; title = "Broodje Gezond";
imagesrc = "broodje-gezond.jpg"; imageSrc = "media/broodje-gezond.jpg";
description = "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus."; description = "Op dit broodje zit kaas, veldsla, komkommer, tomaat, ei, ham en/of kip en bufkes saus.";
} else if (item === 'drinks') { } else if (item === 'drinks') {
title = "Spa Water"; title = "Spa Water";
imagesrc = "spa.jpg"; imageSrc = "media/spa.jpg";
description = "Koude verfrissende water."; description = "Koude verfrissende water.";
} else if (item === 'Snacks') { } else if (item === 'Snacks') {
title = "Frikandel"; title = "Frikandel";
imagesrc = "frikandel.jpg"; imageSrc = "media/frikandel.jpg";
description = "Een frikandel, dat wil je wel!"; description = "Een frikandel, dat wil je wel!";
} else if (item === 'deserts') { } else if (item === 'deserts') {
title = "Ijsjes"; title = "Ijsjes";
imagesrc = "ijs.png"; imageSrc = "media/ijs.png";
description = "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!)."; description = "Een lekker ijsje met vele smaken, zoals aardbei, vanille, chocolade, mint, bosbes en nog veel meer (alleen in de zomer!).";
} else if (item === 'Deals') { } else if (item === 'Deals') {
title = "Deals"; title = "Deals";
imageSrc = "media/deals.jpg"; imageSrc = "media/deals.jpg";
description = "Onze beste deals met de beste prijzen!"; description = "Onze beste deals met de beste prijzen!";
} else if (item === 'soep') { } else if (item === 'Soepen') {
title = "soepen"; title = "Soepen";
imageSrc = "media/soep.jpg"; imageSrc = "media/soep.jpg";
description = "soep van de dag! (Allergieen? Meld het bij ons!"; description = "Soep van de dag! (Allergieën? Meld het bij ons!)";
} else if (item === 'Placeholder 2') { } else if (item === 'Placeholder2') {
title = "Placeholder 2"; title = "Placeholder 2";
imageSrc = ""; imageSrc = "";
description = "Beschrijving voor Placeholder 2."; description = "Beschrijving voor Placeholder 2.";
} }
// Toon de details aan de rechterkant // Update de inhoud van het modaal venster
document.getElementById("item-title").innerText = title; document.getElementById("modal-title").innerText = title;
document.getElementById("item-image").src = imageSrc; document.getElementById("modal-image").src = imageSrc;
document.getElementById("item-description").innerText = description; document.getElementById("modal-description").innerText = description;
// Zet het modaal venster zichtbaar // Zet het modaal venster zichtbaar
document.getElementById("modal").style.display = "block"; document.getElementById("modal").style.display = "block";
@@ -48,3 +48,10 @@ function showItemDetails(item) {
function closeModal() { function closeModal() {
document.getElementById("modal").style.display = "none"; document.getElementById("modal").style.display = "none";
} }
// Zorg ervoor dat het modaal venster sluit wanneer er buiten het venster wordt geklikt
window.onclick = function(event) {
if (event.target == document.getElementById("modal")) {
closeModal();
}
}