Eine teilbare Suchseite erstellen

Eine teilbare Suchseite erstellen ist ein praktisches Frontend-Projekt für Lernende mit HTML-, CSS- und JavaScript-Grundkenntnissen. Du entwickelst die Suche für Fieldnote, ein fiktives Verzeichnis lokaler Veranstaltungen. Ihr Link öffnet in einem anderen Browserkontext dieselben gefilterten und sortierten Ergebnisse auf derselben Ergebnisseite.

Zwei Guided Labs beginnen mit einer funktionierenden geteilten Ansicht und entwickeln anschließend den URL-basierten Suchzustand und die Browsernavigation. Eine eigenständige Challenge überträgt dieselben Mechanismen auf eine weitere Veranstaltungsausgabe mit anderen Kategorien und einer anderen Seitengröße. Jedes Lab stellt eigene Ausgangsdateien und Daten bereit.

Was du lernen wirst

Nach Abschluss des Kurses kannst du:

• einen vorbereiteten Veranstaltungskatalog filtern, sortieren und in Seiten aufteilen und dabei den Inhalt jedes Datensatzes seiner stabilen ID zuordnen, auch bei gleichnamigen Veranstaltungen;
• q, category, sort und page mit URL und URLSearchParams lesen und normalisieren sowie Leerzeichen, &, ein wörtliches +, unbekannte Werte und ungültige Seiten behandeln;
• abgesendete Filter, sichtbare Bedienelemente, Ergebnisse und Freigabelink konsistent halten und leere Ergebnisse sowie Seitengrenzen verständlich darstellen;
• mit pushState, replaceState und popstate bestätigte Ansichten beim Neuladen und bei echter Zurück-/Vorwärtsnavigation wiederherstellen, ohne unnötige Verlaufseinträge anzulegen;
• einen echten Freigabelink in einem frischen Browserkontext öffnen und dieselben Datensätze in derselben Reihenfolge vergleichen, während aktueller Pfad, fremde Abfrageparameter und Fragment erhalten bleiben.

Für wen dieser Kurs geeignet ist

Der Kurs richtet sich an Lernende, die Browserzustand, JavaScript-Datenverarbeitung und eine nützliche Suchoberfläche miteinander verbinden möchten.

Voraussetzungen: Grundlegender Umgang mit Terminal und Pfaden; HTML-Formulare; CSS-Layout und sichtbarer Fokus; JavaScript-Objekte, Arrays, Funktionen, DOM-Auswahl und -Bearbeitung sowie Ereignisse. Du solltest Projektdateien bearbeiten und speichern können. Die Guided Labs erklären URL-Kodierung, filter/sort/slice, das Kopieren von Arrays, stabile Datensatzidentität und Browserverlauf vor der Challenge. React und Backend-Programmierung sind nicht erforderlich.

Lernumgebung: LabEx stellt eine vorbereitete Programmierumgebung im Browser, eine statische Website und synthetische Veranstaltungsdaten bereit. Du implementierst JavaScript im Browser; der Server liefert nur Dateien aus. Website-Beschriftungen und Laufzeitausgaben bleiben auf Englisch.

Häufig gestellte Fragen

Entwickle ich ein Such-Backend oder speichere ich Besucherpräferenzen?

Nein. Filtern, Sortieren und Paginierung laufen im Browser auf vorbereiteten lokalen Daten. Die URL enthält die bestätigte Ansicht. Ein anderer Browser benötigt daher nicht den gespeicherten Zustand des ersten.

Was passiert mit Änderungen, die ich noch nicht abgesendet habe?

Die Bedienelemente enthalten einen Entwurf, bis du ihn mit Search absendest. Neuladen stellt den bestätigten URL-Zustand wieder her. Du übst außerdem, zu enge Suchbedingungen zu korrigieren und dokumentierte Standardwerte oder Seitenkorrekturen anzuwenden; keine Treffer sind ein gültiges Ergebnis.

Kann ich mit diesem Kurs einen dauerhaften Link veröffentlichen?

Nein. Teilen ist auf das laufende autorisierte Lab und dessen erreichbare Route beschränkt. Ein Link hält keine VM aktiv, garantiert keinen Zugriff zwischen getrennten Lab-VMs und veröffentlicht die Seite nicht im Internet. Produktionsbereitstellung und eine vollständige Barrierefreiheitszertifizierung gehören nicht zum Kurs.