Création d'une application de vote

Introduction

Dans ce projet, vous allez apprendre à construire une application de vote qui permet aux utilisateurs de créer et de gérer les options de vote, ainsi que de supprimer les options si nécessaire. L'application inclut également des fonctionnalités de prise en charge de la sélection multiple et des résultats de vote publics.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment initialiser la structure HTML pour l'application de vote
• Comment implémenter la fonctionnalité pour ajouter de nouvelles options de vote
• Comment implémenter la fonctionnalité pour supprimer les options de vote
• Comment tester l'application pour vous assurer que la fonctionnalité fonctionne comme prévu

🏆 Réalisations

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

• Configurer la structure HTML de base pour une application de vote
• Utiliser JavaScript pour ajouter et supprimer dynamiquement des options de vote dans l'application
• Gérer les interactions de l'utilisateur, telles que le clic sur le bouton "Ajouter une option" et l'icône de suppression
• Tester l'application pour vous assurer qu'elle répond aux exigences
• Construire des applications web interactives utilisant HTML, CSS et JavaScript

Skills Graph

Configure la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├── css
|   ├── style.css
|   └── bootstrap.min.css
├── images
|   ├── x.svg
|   └── plus-square.svg
├── js
│   └── jquery.min.js
└── index.html

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour la voir.

Implémentez la fonctionnalité d'ajout d'options

Dans cette étape, vous allez implémenter la fonctionnalité d'ajout de nouvelles options de vote à l'application.

1. Dans le fichier index.html, localisez la section <script> en bas du fichier.
2. Dans la section <script>, vous devez d'abord ajouter itemNumber et renderList, et le code ajouté ressemblera à ceci :

let itemNumber = 2; // Valeur par défaut de 2 données
let initRender = (txt) => {
  return `<div class="mb-3 row">
          <label class="col-sm-2 col-form-label txt">${txt}</label>
          <div class="col-sm-9">
              <input type="text" class="form-control">
         </div>
      </div>`;
};
// Affiche le HTML avec x (bouton de suppression) pour les données supérieures
let renderList = (txt) => {
  return `<div class="mb-3 row item">
          <label class="col-sm-2 col-form-label txt">${txt}</label>
          <div class="col-sm-9">
              <input type="text" class="form-control">
          </div>
          <div class="col-sm-1">
              <img class="del-icon" src="./images/x.svg" alt="">
          </div>
      </div> `;
};

Ces fonctions sont utilisées pour générer la structure HTML des options de vote.

3. Localisez le bloc de code suivant dans la section <script> :

$(
  (function () {
    // Lors de l'initialisation, les deux données suivantes apparaissent sans le symbole de suppression
    for (let index = 0; index < 2; index++) {
      let initList = initRender(`Option${index + 1}`);
      $(".list").append(initList);
    }

    // Cliquez sur le signe plus
    $(".add").click(function () {
      // TODO : Terminez le code ici
    });
  })()
);

4. Dans le bloc $(".add").click(function () {... }), ajoutez le code suivant :

$(".list").html("");
itemNumber++;
for (let index = 0; index < itemNumber; index++) {
  let list = renderList(`Option${index + 1}`);
  $(".list").append(list);
}

Ce code effacera les options existantes, incrémentera la variable itemNumber, puis affichera les nouvelles options en utilisant la fonction renderList.

Avec ce code en place, lorsque l'utilisateur clique sur le bouton "Ajouter une option", une nouvelle option de vote sera ajoutée à la liste.

Implémentez la fonctionnalité de suppression

Dans cette étape, vous allez implémenter la fonctionnalité de suppression d'options de vote dans l'application.

1. Dans la section <script> du fichier index.html, localisez le bloc de code suivant :

// Cliquez sur le bouton de suppression x, l'icône de suppression ne sera pas affichée si la liste contient moins de 2 éléments
$(document).on("click", ".del-icon", function () {
  // TODO : Terminez le code ici
});

2. Dans ce bloc de code, ajoutez le code suivant :

$(".list").html("");
itemNumber--;
if (itemNumber <= 2) {
  for (let index = 0; index < itemNumber; index++) {
    let list = initRender(`Option${index + 1}`);
    $(".list").append(list);
  }
} else {
  for (let index = 0; index < itemNumber; index++) {
    let list = renderList(`Option${index + 1}`);
    $(".list").append(list);
  }
}

Ce code effacera les options existantes, décrémentera la variable itemNumber, puis affichera les options restantes en utilisant la fonction appropriée (initRender ou renderList) en fonction du nombre d'options.

Avec ce code en place, lorsque l'utilisateur clique sur l'icône "x" à côté d'une option de vote, cette option sera supprimée de la liste.

Testez l'application

1. Enregistrez le fichier index.html et rafraîchissez la page index.html dans votre navigateur.
2. Vérifiez que les deux premières options de vote initiales sont affichées sans l'icône de suppression.
3. Cliquez sur le bouton "Ajouter une option" et observez qu'une nouvelle option de vote est ajoutée à la liste, avec l'icône de suppression affichée.
4. Cliquez sur l'icône de suppression à côté d'une des options de vote et vérifiez que l'option est supprimée de la liste.
5. Continuez à tester l'application en ajoutant et en supprimant des options de vote pour vous assurer que la fonctionnalité fonctionne comme prévu.

Le résultat final est le suivant :

Félicitations ! Vous avez terminé l'implémentation de l'application de vote.

Sommaire

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