Application web interactive de collection de films

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

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

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

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

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

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

3. Enregistrez le fichier index.html.
4. Raffraîchissez le navigateur pour voir le résultat final.

L'effet ressemble à ceci :

Félicitations! Vous avez réussi à terminer le projet "Collection de films".

Sommaire

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.