Application web de gestion d'adresses

Introduction

Dans ce projet, vous allez apprendre à créer une nouvelle adresse et à gérer les adresses dans une application web. Le projet consiste à implémenter une liste déroulante cascading d'état-villes, une validation de formulaire, un style de libellé et le rendu de nouvelles adresses.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment initialiser la liste déroulante de province avec les données du fichier data.js
• Comment implémenter la fonctionnalité de liste déroulante cascading d'état-villes
• Comment ajouter un événement de clic aux libellés de la liste d'étiquettes, permettant à l'étiquette sélectionnée d'être activée et les autres d'être désactivées
• Comment valider les champs d'adresse, de contact et de numéro de téléphone avant d'enregistrer une nouvelle adresse
• Comment créer et ajouter un nouvel élément de liste d'adresses à la liste d'adresses

🏆 Réalisations

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

• Manipuler le DOM à l'aide de JavaScript
• Gérer les interactions et les événements de l'utilisateur
• Implémenter la validation de formulaire et la gestion des données
• Créer et ajouter dynamiquement des éléments HTML

Configurer 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 :

├── index.html
├── css
├── images
└── js
    ├── data.js
    └── index.js

Où :

• index.html est la page principale.
• css est le dossier pour les fichiers de style.
• images est le dossier pour les images.
• js/data.js contient les données des provinces et des villes.
• js/index.js est le fichier JavaScript qui doit être complété.

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émenter une liste déroulante cascading d'état-villes

Dans cette étape, vous allez apprendre à implémenter la fonctionnalité de liste déroulante cascading d'état-villes.

1. Localisez la fonction provincechange() dans le fichier js/index.js.
2. Cette fonction est responsable de la mise à jour de la liste déroulante de villes lorsqu'un état est sélectionné.
3. Tout d'abord, elle obtient une référence à l'élément de liste déroulante de province sélectionnée en utilisant document.getElementById("param_province").
4. Ensuite, elle obtient une référence à l'élément de liste déroulante de villes en utilisant document.getElementById("param_city").
5. Ensuite, elle récupère l'index de la province sélectionnée à partir de la liste déroulante de province en utilisant selectedProvince.value.
6. Elle utilise ensuite l'index de la province sélectionnée pour accéder aux villes correspondantes dans le tableau towns du fichier data.js.
7. Enfin, elle définit la longueur des options de la liste déroulante de villes sur le nombre de villes, puis parcourt les villes pour définir le texte et la valeur de chaque option de liste déroulante.

// Implémentez la liste déroulante cascading d'état-villes.
function provincechange() {
  var selectedProvince = document.getElementById("param_province");
  var city = document.getElementById("param_city");
  var { value } = selectedProvince;
  var cities = towns[value];
  city.length = cities.length;
  for (var i = 0; i < cities.length; i++) {
    city.options[i].text = cities[i];
    city.options[i].value = i;
  }
}

Ajouter un événement de clic aux étiquettes

Dans cette étape, vous allez apprendre à ajouter un événement de clic aux étiquettes de la liste d'étiquettes, ce qui activera le style de l'étiquette sélectionnée et désactivera les autres étiquettes.

1. Localisez la fonction addClick() dans le fichier js/index.js.
2. Cette fonction est responsable de l'ajout de l'événement de clic aux étiquettes.
3. Tout d'abord, elle obtient une référence à tous les éléments d'étiquette en utilisant document.querySelectorAll(".mark a").
4. Ensuite, elle obtient une référence au champ de saisie param_mark, qui stockera l'index de l'étiquette sélectionnée.
5. Ensuite, elle parcourt les éléments d'étiquette et ajoute un écouteur d'événement de clic à chacun d'eux.
6. Dans l'écouteur d'événement, elle supprime d'abord la classe active de toutes les étiquettes en utilisant labels.forEach((l) => l.classList.remove("active")).
7. Ensuite, elle ajoute la classe active à l'étiquette cliquée en utilisant label.classList.add("active").
8. Enfin, elle définit la valeur du champ de saisie param_mark sur l'index de l'étiquette cliquée.

function addClick() {
  var labels = document.querySelectorAll(".mark a");
  var input = document.getElementById("param_mark");

  labels.forEach((label, index) => {
    label.addEventListener("click", () => {
      labels.forEach((l) => l.classList.remove("active"));
      label.classList.add("active");
      input.value = index;
    });
  });
}

Valider et enregistrer les informations d'adresse

Dans cette étape, vous allez apprendre à valider les informations d'adresse et à enregistrer la nouvelle adresse dans la liste d'adresses.

1. Localisez la fonction saveInfo() dans le fichier js/index.js.
2. Cette fonction est responsable de la validation des champs de saisie et de l'enregistrement de la nouvelle adresse.
3. Tout d'abord, elle récupère les valeurs des champs de saisie de province, de ville, d'adresse, de marque, de nom et de numéro de téléphone.
4. Elle vérifie ensuite si les champs de province, d'adresse, de nom ou de numéro de téléphone sont vides. Si l'un de ces champs requis est vide, elle affiche une boîte de dialogue d'avertissement.
5. Si tous les champs requis sont remplis, elle crée un nouvel élément d'élément de liste (<li>) et le remplit avec les informations d'adresse.
6. Le nouvel élément de liste d'adresses inclut l'étiquette (en fonction de la marque sélectionnée), l'adresse complète (province et ville), l'adresse, et le nom et le numéro de téléphone.
7. Enfin, elle ajoute le nouvel élément de liste d'adresses à l'élément .address-list et appelle la fonction back() pour rediriger vers la page de gestion des adresses.

function saveInfo() {
  var { value: provinceIdx, options: provinces } =
    document.getElementById("param_province");
  var { value: cityIdx, options: cities } =
    document.getElementById("param_city");
  var { value: address } = document.getElementById("param_address");
  var { value: markId } = document.getElementById("param_mark");
  var labelNodes = document.querySelectorAll(".mark a");
  var label = labelNodes[markId].text;
  var { value: name } = document.getElementById("param_name");
  var { value: phone } = document.getElementById("param_phone");

  if (provinceIdx === 0 || !address || !name || !phone) {
    document.querySelector(".warning-dialog").style.display = "block";
    return;
  }

  var addressListElement = document.querySelector(".address-list");
  var newAddressElement = document.createElement("li");
  newAddressElement.innerHTML = `
    <div class="show-area">
      <label class="school">${label}</label>
      <span>${provinces[provinceIdx].text}${cities[cityIdx].text}</span>
    </div>
    <div class="show-address">
      <span>${address}</span>
      <a><img src="./images/edit.png" /></a>
    </div>
    <div class="show-info">
      <span>${name}</span>
      <span>${phone}</span>
    </div>
  `;
  addressListElement.appendChild(newAddressElement);
  back();
}

En suivant ces étapes, vous avez réussi à implémenter la fonctionnalité "Ajouter une nouvelle adresse" dans le projet. Félicitations!

L'effet final de la page devrait être le suivant :

Résumé

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