Wir werden zur Bearbeitung der Aufgaben wieder GitHub Classroom nutzen. Das Assignment, welches für diese Session erstellt wurde, ist über diesen Einladungslink erreichbar.
Wenn Sie auf den Link klicken, wird automatisch ein Repository, mit dem Startcode des Assignments, erstellt. Klonen Sie bitte anschließend das Repository auf ihren Rechner und bearbeiten Sie die Aufgaben darin.
Erzeugen Sie einen scripts Ordner in ihrem Projektordner und darin eine Datei main.js.
Binden Sie anschließend die JavaScript Datei am Ende der spaghetti-aglio-olio-e-peperoncino.html ein.
Erzeugen Sie Javascript Code in der main.js, welcher bei einem Klick auf den ersten Link in der Navigation den Content des Navigations Elements auf der Konsole ausgibt.
Erweitern Sie Ihr JavaScript dahingegend, dass der Eventhandler aus der vorherigen Aufgabe für alle Links in der Navigation greift.
Erweitern Sie den Eventhandler so, dass dem Navigations-Element, auf welches geklickt wurde, das Attribut-Wert-Paar [data-state='active'] angehangen wird und bei allen anderen Elementen entfernt wird.
Fügen Sie eine CSS Regel hinzu, welche das angeklickte Element visuell hervorhebt.
Entwickeln Sie nun, mit Hilfe des Intersection Observers, einen Scrollspy für One Page Navigation.
Dabei soll beim Scrollen der Seite immer das Element hervorgehoben werden, das zu der Sektion gehört, welche sich gerade im Viewport befindet. Nutzen Sie zum Highlighten der Navigations-Elemente wieder das DatA-Attribut.