Javascript // Dropdown Menü und Slideshow


Ausgangspunkt zur Bearbeitung der Aufgaben ist der Code aus der Musikfestivals Aufgabe. Dieser ist über folgenden Einladungslink erreichbar.

Bitte comitten und pushen Sie ihren Code nach jedem Step.

Step 1: JavaScript Datei anlegen

Legen Sie im src-Verzeichnis ein Verzeichnis mit der Bezeichnung scripts an und darin die Datei main.js.

Step 2: JavaScript Datei einbinden

Bitte binden Sie die main.js am Ende der index.html ein.

Step 3: Hamburger Toggle Menu

Erzeugen Sie JavaScript Code, der bei einem Mausklick auf das Hamburger Icon das Hauptmenü ein- bzw. ausgeklappt.

In diesem Zuge soll sich auch die Darstellung des Hamburger Icons ändern.

Nutzen Sie bitte das vorgegebene HTML und CSS.

Step 4: Slideshow

In der index.html rechts in der Marginalspalte befinden sich in dem Abschnitt „Maiwoche” mehre Bilder die übereinandergelegt sind. Erstellen Sie aus diesen Bildern eine Slideshow via JavaScript. Über die beiden Schaltflächen soll es möglich sein, ein Bild vor und zurück zu schalten.

Auch hier ist das HTML und CSS vollständig vorgegeben.

Step 5: Slideshow in Klasse oder Konstruktorfunktion kapseln

Erzeugen Sie eine Datei slide-show.js und binden Sie diese in der index.html vor der main.js ein.

Lagern Sie ihren Slideshow Code in die slide-show.js aus.

Kapseln Sie den Code nun in eine Klasse oder Konstruktorfunktion so, dass mehrere Slideshows auf einer HTML Seite erzeugt werden können, die unabhängig voneinander funktionieren.

Step 6: Slideshow Objekte erzeugen

Erzeugen Sie eine Routine in der main.js, welche aus beiden Bilderstapeln in der Marginalspalte Slideshows erzeugt. Dazu sollen Objekte aus der zuvor erstellen Klasse bzw. Konstruktorfunktion erzeugt werden.