Interaktive Filmbibliothek-Webanwendung

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

🎯 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

Skills Graph

Projektstruktur einrichten

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

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

Implementiere die Funktionalität des Lieblingssymbols

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

1. 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>

2. 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.

3. Speichere die index.html-Datei.
4. Aktualisiere den Browser, um das fertige Ergebnis zu sehen.

Der Effekt sieht so aus:

Glückwunsch! Du hast das Projekt "Sammlung von Filmen" erfolgreich abgeschlossen.

Zusammenfassung

Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labore absolvieren, um deine Fähigkeiten zu verbessern.