Implementierung der Filterfunktionalität

Ziel

Zu guter Letzt besteht der letzte Schritt darin, die Funktionalität zum Filtern der Artikel nach Thema hinzuzufügen, die mit JavaScript implementiert wird.

Mögliche Aufforderung

Können Sie die Funktion zum Filtern von Artikeln nach Thema mit HTML-Buttons und JavaScript implementieren?

Ergebnis

index.html Datei

• Wir fügen einen nav Block zum header hinzu, wo unsere Filtertasten platziert werden;
• Wir versehen jeden Artikel mit dem data-category Attribut und dem entsprechenden Themenwert;
• Wir fügen den Link zur index.js Datei vor dem schließenden body Tag hinzu.

index.css Datei
Wir fügen einige Stile hinzu, um die Filtertasten ansprechend aussehen zu lassen.

index.js Datei
Wir fügen das Skript ein, das die Filterlogik implementiert.

All dies hat uns ChaGPT gesagt zu tun. Wir haben seine Anweisungen befolgt.

Website-Zustand

Video-Tutorial

Hier ist es. Du hast es geschafft. Dies ist deine vollständige, voll funktionsfähige Website. Großartige Arbeit!