Collection interactive de films | Tutoriel de développement web

Introduction

Dans ce projet, vous allez apprendre à créer une application web interactive de collection de films utilisant HTML, CSS et JavaScript (jQuery). L'application permet aux utilisateurs de marquer leurs films préférés, et lorsqu'une collection de films préférés est créée, un message de réussite est affiché.

👀 Aperçu

Démo de collection interactive de films

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer les fichiers du projet et ouvrir le projet dans l'éditeur
Comment implémenter la fonctionnalité de l'icône de film préféré, permettant aux utilisateurs de basculer entre les états creux et plein
Comment implémenter la fonctionnalité de l'icône de collection, affichant un message de réussite lorsqu'au moins un film préféré est ajouté

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Manipuler le DOM à l'aide de jQuery
Gérer les interactions et les événements de l'utilisateur
Afficher et masquer des éléments selon des conditions spécifiques
Utiliser des temporisateurs pour masquer automatiquement des éléments après une certaine durée

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers du projet et ouvrir le projet dans l'éditeur.

Ouvrez l'éditeur et vous devriez voir les fichiers suivants : index.html, style.css, jquery.min.js et le dossier images.
Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour la voir.

Structure de projet inachevée

Implémenter la fonctionnalité de l'icône de film préféré

Dans cette étape, vous allez implémenter la fonctionnalité de l'icône de film préféré.

Dans le fichier index.html, localisez le code pour l'icône de film préféré :

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

Ajoutez le code JavaScript suivant dans la section <script> en bas du fichier index.html :

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();
});

Ce code bascule l'icône de film préféré entre les états creux et plein lorsque l'utilisateur clique sur l'icône de film préféré. Lorsque l'icône de film préféré est cliquée, la boîte de réussite (class=toast__container) est affichée seulement si l'icône de film préféré est pleine, après 2 secondes la boîte est automatiquement cachée, ou la boîte est cachée en cliquant sur le bouton de fermeture au-dessus de la boîte (class=toast__close).