Html und JavaScript Code?
Hallo zusammen,
ich möchte für eine Webseite ein Widget erstellen, das die nächsten Veranstaltungen anzeigen soll. Diese werden in dem Code dann hinzugefügt. Auf dem Widget welches auf der Webseite angezeigt wird dürfen aber immer nur zwei Veranstaltungen gleichzeitig dargestellt werden. Das Datum der Veranstaltungen soll immer mit dem aktuellen Datum verglichen werden. Ist das Datum der ganz oben also an erster Stelle stehenden Veranstaltung seit einem Tag überschritten soll diese gesamte Veranstaltung ausgeblendet werden. Die darunter stehende also an zweiter Stelle befindliche Veranstaltung rückt dann an erste Stelle und an Zweite Stelle rückt dann eine bisher noch nicht angezeigt Veranstaltung. Immer so das halt nur zwei Veranstaltungen gleichzeitig angezeigt werden. Das Datum vergleichen und ein/ausblenden und neu ordnen der Veranstaltungen funktioniert bei meinem Code noch nicht so ganz. Kann mir dabei bitte jemand helfen. Wenn das möglich ist am besten den Code so anpassen damit diese Funktionen so funktionieren.
Mit freundlichen Grüßen
Tim
Hier ist mein aktueller Code davon:
<!DOCTYPE html>
<html>
<head>
<style>
/* Stil für das Widget */
.event-widget {
border: 1px solid #ccc;
padding: 6px;
max-width: 215px; /* Breiteres Widget */
background-color: #f7f7f7;
}
/* Stil für die Hellschwarze Hauptüberschrift */
.event-widget h3 {
color: #454545; /* Hellschwarz */
font-size: 18px; /* Kleinere Schriftgröße für die Hauptüberschrift */
text-align: center; /* Zentriert den Text */
margin: 0; /* Entfernt den oberen und unteren Abstand der Überschrift */
}
/* Stil für die einzelnen Veranstaltungen */
.event-widget ul li {
margin-bottom: 10px; /* Fügt einen Abstand zwischen den Veranstaltungen hinzu */
padding-bottom: 5px; /* Fügt zusätzlichen Abstand zwischen dem Trennungsstrich und dem Text hinzu */
}
/* Fügt einen Trennungsstrich zwischen den Veranstaltungen hinzu */
.event-item + .event-item {
border-top: 1px solid #ccc;
margin-top: 10px;
padding-top: 5px;
}
/* Stil für die übrigen Texte */
.event-title {
color: #8B0000; /* Weinrot */
font-size: 15px; /* Kleinere Schriftgröße für den übrigen Text */
}
/* Stil für die Uhrzeit */
.event-time {
font-weight: bold;
font-size: 12px; /* Kleinere Schriftgröße */
}
</style>
</head>
<body>
<div class="event-widget">
<h3>Nächste Veranstaltungen</h3>
<ul id="event-list">
<!-- Hier kannst du Veranstaltungen hinzufügen -->
<li class="event-item">
<strong class="event-title">Seniorentreff mit Kaffee und Kuchen:</strong>
<br>
Datum: 2023-11-09
<br>
Zeit: 14:30 - 16:00 Uhr
<br>
Ort: Feuerwehrhaus
</li>
<li class="event-item">
<strong class="event-title">Volkstrauertag:</strong>
<br>
Datum: 2023-11-19
<br>
Zeit: 15:00 - 16:00 Uhr
<br>
Ort: Am Ehrenmal Ahrenshöft
</li>
<li class="event-item">
<strong class="event-title">Seniorentreff mit Kaffee und Kuchen:</strong>
<br>
Datum: 2023-12-14
<br>
Zeit: 14:30 - 16:00 Uhr
<br>
Ort: Feuerwehrhaus
</li>
<!-- Weitere Veranstaltungen hier hinzufügen -->
</ul>
</div>
<script>
function updateEvents() {
const eventList = document.getElementById("event-list");
const events = eventList.getElementsByClassName("event-item");
const currentDate = new Date();
const displayedEvents = 2;
for (let i = 0; i < events.length; i++) {
const eventDateString = events[i].querySelector("br:nth-child(2)").textContent.replace("Datum: ", "");
const eventDate = new Date(eventDateString);
// Überprüfe, ob das Datum um einen Tag überschritten ist
if (eventDate < currentDate) {
events[i].style.display = "none"; // Verstecke vergangene Veranstaltungen
} else {
events[i].style.display = "block"; // Zeige zukünftige Veranstaltungen
}
// Überprüfe, ob die maximale Anzahl von angezeigten Veranstaltungen erreicht ist
if (i >= displayedEvents) {
events[i].style.display = "none";
}
}
}
// Aktualisiere die Veranstaltungen beim Laden der Seite
document.addEventListener("DOMContentLoaded", updateEvents);
</script>
</body>
</html>
1 Antwort
Bei dieser JavaScript-Lösung würde ich die Daten nicht aus dem Text parsen, sondern die Werte in data-Attributen ablegen.
<li class="event-item" data-time="2022-11-09">
Im JavaScript-Code holst du dir nur die Einträge, die auch sicher so ein Attribut besitzen:
const events = eventList.querySelectorAll(".event-item[data-time]");
Für die Konversion dieser Zeichenkette kann später die parse-Methode des Date-Objekts verwendet werden.
Die Anzahl an Funden musst du außerdem innerhalb der Schleife mitzählen und in das Abbruchkriterium einfügen. Deine Iterationsvariable (i) gibt darüber keinen Aufschluss.
let found = 0;
for (const eventEntry of events) {
const eventDateString = eventEntry.dataset.time;
const eventDate = Date.parse(eventDateString);
if (found < displayedEvents && eventDate > currentDate) {
eventEntry.style.display = "block";
++found;
}
else {
eventEntry.style.display = "none";
}
}
Es wäre im Übrigen besser, den Einträgen CSS-Klassenselektoren zuzuordnen und in der CSS-Regel dann das display-Property zu manipulieren.
eventEntry.classList.add("is-past");
eventEntry.classList.remove("is-past")
Zum einen trennst du so Anwendungslogik und Styling, zum anderen fällt es später leichter, bei Bedarf den Einträgen weitere CSS-Properties zuzuordnen.
Vielen Dank für deine Antwort. Jetzt bin ich nich der Profi in diesem Gebiet und kenne die ganzen Befehle noch nicht so ganz. Könntest du vielleicht den Code mit deinen Gedanken anpassen, das er dann vielleicht funktioniert. Wenn du das machen könntest wäre ich dir wirklich sehr dankbar. Es ist für eine Gemeindewebseite.