Wir kommen zum endgültigen Auftrag dieses Kurses.
In dieser vierten Aufgabe
werden Sie mit Bootstraps,
jQuery-Unterstützung und auch ein wenig Sass arbeiten.
Diese Zuordnung besteht aus vier Aufgaben.
Ihre erste Aufgabe wäre es, alle diese
Datenattribute sowohl aus dem Login-Link hier als auch aus der Reserve der Tabellen hier zu entfernen.
Nun, in dieser Zuweisung,
werden wir die Modelle mit JavaScript-Code auslösen.
Um dies zu tun,
entfernen wir zuerst die Datenattribute,
sowohl aus dem Reservemodell als auch aus dem Login-Modell als unsere erste Aufgabe in dieser Zuweisung.
Ihre zweite Aufgabe besteht darin,
entsprechenden JavaScript-Code hinzuzufügen, indem Sie die Model-Methoden verwenden,
JavaScript-Methoden, die verfügbar sind,
so dass, wenn auf das Reserve-Tabellenmuster geklickt wird,
dann das entsprechende Reserve-Modell angezeigt wird, wie hier zu sehen.
Wir sehen also, dass dieses Ein- und Ausblenden des Modells
vollständig mit den JavaScript-Methoden dieses Modells ausgelöst wird.
Ihre dritte Aufgabe wäre es, wieder den
entsprechenden Code in das Skript einzufügen, so dass, wenn Sie hier auf den Login-Link klicken,
das Login-Modell angezeigt wird.
Damit dies funktioniert,
müssen Sie die entsprechenden IDs sowohl der Reserve-Tabellenschaltfläche als auch
dem Login-Link angeben, so dass sie dann in Ihrem JavaScript-Code referenziert werden können.
Also, das ist ein Hinweis für Sie,
wie Sie mit der Implementierung fortfahren können.
Die Verwendung der JavaScript-Methoden sollte ziemlich unkompliziert sein.
Der Link zur Bootstrap-Dokumentation, in
der die JavaScript-Methoden beschrieben werden, finden
Sie im Abschnitt „Zusätzliche Ressourcen“ dieser Zuweisung.
Wie Sie vielleicht schon gemerkt haben, dass diese Modelle jetzt viel bunter aussehen.
Also hier ist das Reserve-Tabellenmodell,
und hier ist das Login-Modell.
Also, als Teil der vierten Aufgabe dieser Zuweisung,
werden Sie in einigen SCSS-Code in die Stile starten SCSS-Datei hinzufügen,
so dass die Farben entsprechend eingestellt sind.
Hier sehen Sie also, dass dieser Modellkopf
die dunkle Hintergrundfarbe eingestellt hat und der Text hier in weißer Farbe angezeigt wird.
Und auch diese bestimmte Klasse,
indem Sie eine verschachtelte Klasse hier in Ihrem SCSS-Code verwenden,
können Sie dies auch definieren, um hier eine flache oder weiße Farbe zu verwenden.
Dann verwendet der Modellkörper selbst die blasse Hintergrundfarbe.
Fügen Sie also den entsprechenden SCSS-Code in Ihre
Format-Start-SCSS-Datei ein, damit dies für das Reservemodell von Header und Körper funktioniert,
so dass Sie sehen können, dass die gleiche dunkle Hintergrundfarbe auf die Kopfzeile angewendet
wird und die blasse Hintergrundfarbe auf den Körper Ihres Modells angewendet wird.
Und wenn Sie diese Zuweisung abgeschlossen
haben, möchten Sie möglicherweise einen guten Kommentar machen, um Ihre Änderungen mit der Nachrichtenzuweisung vier zu speichern.