Interaktive Filmbibliothek | Webdesign-Tutorial

Einführung

In diesem Projekt lernst du, wie du eine interaktive Sammlung von Filmen-Webanwendung mit HTML, CSS und JavaScript (jQuery) erstellst. Die Anwendung ermöglicht es Benutzern, ihre Lieblingsfilme zu markieren, und wenn eine Sammlung von Lieblingsfilmen erstellt wird, wird eine Erfolgsmeldung angezeigt.

👀 Vorschau

Demo interaktiver Filmbibliothek

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du die Projekt-Dateien einrichtest und das Projekt im Editor öffnest
Wie du die Funktionalität für das Lieblingssymbol implementierst, sodass Benutzer zwischen hohlem und gefülltem Zustand umschalten können
Wie du die Funktionalität für das Sammel-Symbol implementierst, eine Erfolgsmeldung anzeigt, wenn mindestens ein Lieblingsfilm hinzugefügt wird

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Die DOM mit jQuery zu manipulieren
Benutzerinteraktionen und -ereignisse zu behandeln
Elemente basierend auf bestimmten Bedingungen anzuzeigen und auszublenden
Timer zu verwenden, um Elemente automatisch nach einer bestimmten Zeitspanne auszublenden

Projektstruktur einrichten

In diesem Schritt wirst du die Projekt-Dateien einrichten und das Projekt im Editor öffnen.

Öffne den Editor und du solltest folgende Dateien sehen: index.html, style.css, jquery.min.js und den Ordner images.
Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
Öffne "Web 8080" oben in der VM und aktualisiere es manuell, um die Seite zu sehen.

unfertige Projektstruktur

Implementiere die Funktionalität des Lieblingssymbols

In diesem Schritt wirst du die Funktionalität für das Lieblingssymbol implementieren.

Im index.html-Datei finde den Code für das Lieblingssymbol:

<div class="card-body-option card-body-option-favorite">
  <img src="./images/hollow.svg" alt="" />
</div>

Füge folgenden JavaScript-Code im <script>-Abschnitt am Ende der index.html-Datei hinzu:

window.timer = null;
let flag = false;
$(".card-body-option-favorite").click(function () {
  flag = !flag;
  if (flag) {
    $(this).find("img").attr("src", "./images/solid.svg");
    $("#toast__container").show();
    timer = setTimeout(() => {
      $("#toast__container").fadeOut();
    }, 2000);
  } else {
    $(this).find("img").attr("src", "./images/hollow.svg");
  }
});

$(".toast__close img").click(function () {
  $("#toast__container").fadeOut();
});

Dieser Code wechselt das Lieblingssymbol zwischen hohlem und gefülltem Zustand, wenn der Benutzer auf das Lieblingssymbol klickt. Wenn das Lieblingssymbol angeklickt wird, wird das Erfolgsfenster (class=toast__container) nur dann angezeigt, wenn das Lieblingssymbol gefüllt ist. Nach 2 Sekunden wird das Fenster automatisch ausgeblendet, oder das Fenster wird durch Klicken auf die Schließknopf oberhalb des Fensters (class=toast__close) ausgeblendet.