async function fetchEvents() {
try {
const response = await fetch("/api/events"); // Proxy naar backend
const events = await response.json();
displayEvents(events);
} catch (error) {
console.error("Fout bij ophalen van events:", error);
document.getElementById("events-container").innerText = "Kon evenementen niet laden.";
}
}
function displayEvents(events) {
const container = document.getElementById("events-container");
if (!events.length) {
container.innerHTML = "
Geen evenementen gepland.
";return;
}
container.innerHTML = events.map(event => `
`).join("");
}
fetchEvents();
.event-card {
border: 1px solid #ddd;
padding: 15px;
margin: 10px 0;
border-radius: 8px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}
.event-card img {
width: 100%;
border-radius: 5px;
}
.event-card a {
display: block;
padding: 10px;
background: #007BFF;
color: white;
text-align: center;
border-radius: 5px;
text-decoration: none;
}