alvin/Schoolkantine
1
0
Fork 0
mirror of https://github.com/Alvin-Zilverstand/Schoolkantine.git synced 2026-03-06 13:26: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
function showItemDetails(item) {
var items = [];
var title = "";
var imageSrc = "";
var description = "";
// Afhankelijk van het geselecteerde item, pas de details aan
// Stel de inhoud in afhankelijk van het geselecteerde item
// Afhankelijk van het geselecteerde item, pas de details aan
if (item === 'Broodjes') {
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.";
} else if (item === 'drinks') {
title = "Spa Water";
imagesrc = "spa.jpg";
imageSrc = "media/spa.jpg";
description = "Koude verfrissende water.";
} else if (item === 'Snacks') {
title = "Frikandel";
imagesrc = "frikandel.jpg";
imageSrc = "media/frikandel.jpg";
description = "Een frikandel, dat wil je wel!";
} else if (item === 'deserts') {
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!).";
} else if (item === 'Deals') {
title = "Deals";
imageSrc = "media/deals.jpg";
description = "Onze beste deals met de beste prijzen!";
} else if (item === 'soep') {
title = "soepen";
imageSrc = "media/soep.jpg";
description = "soep van de dag! (Allergieen? Meld het bij ons!";
} else if (item === 'Placeholder 2') {
title = "Placeholder 2";
imageSrc = "";
description = "Beschrijving voor Placeholder 2.";
}
} else if (item === 'Deals') {
title = "Deals";
imageSrc = "media/deals.jpg";
description = "Onze beste deals met de beste prijzen!";
} else if (item === 'Soepen') {
title = "Soepen";
imageSrc = "media/soep.jpg";
description = "Soep van de dag! (Allergieën? Meld het bij ons!)";
} else if (item === 'Placeholder2') {
title = "Placeholder 2";
imageSrc = "";
description = "Beschrijving voor Placeholder 2.";
}
// Toon de details aan de rechterkant
document.getElementById("item-title").innerText = title;
document.getElementById("item-image").src = imageSrc;
document.getElementById("item-description").innerText = description;
// Update de inhoud van het modaal venster
document.getElementById("modal-title").innerText = title;
document.getElementById("modal-image").src = imageSrc;
document.getElementById("modal-description").innerText = description;
// Zet het modaal venster zichtbaar
document.getElementById("modal").style.display = "block";
@@ -48,3 +48,10 @@ function showItemDetails(item) {
function closeModal() {
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();
}
}