Aplicación web de gestión de direcciones

Introducción

En este proyecto, aprenderás a crear una nueva dirección y a gestionar direcciones en una aplicación web. El proyecto implica implementar un menú desplegable cascada de estado-ciudad, validación de formularios, estilo de etiquetas y renderizado de nuevas direcciones.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo inicializar el menú desplegable de provincia con datos del archivo data.js
• Cómo implementar la funcionalidad del menú desplegable cascada de estado-ciudad
• Cómo agregar un evento de clic a las etiquetas de la lista de etiquetas, permitiendo que la etiqueta seleccionada se active y las demás se desactive
• Cómo validar los campos de dirección, contacto y número de teléfono antes de guardar una nueva dirección
• Cómo crear y adjuntar un nuevo elemento de lista de direcciones a la lista de direcciones

🏆 Logros

Después de completar este proyecto, podrás:

• Manipular el DOM usando JavaScript
• Manejar interacciones y eventos del usuario
• Implementar validación de formularios y manejo de datos
• Crear y adjuntar dinámicamente elementos HTML

Configurar la estructura del proyecto

En este paso, configurarás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

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

Donde:

• index.html es la página principal.
• css es la carpeta para los archivos de estilo.
• images es la carpeta para las imágenes.
• js/data.js es los datos de las provincias y ciudades.
• js/index.js es el archivo de JavaScript que se debe completar.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente para ver la página.

Implementar un menú desplegable cascada de estado-ciudad

En este paso, aprenderás a implementar la funcionalidad del menú desplegable cascada de estado-ciudad.

1. Localiza la función provincechange() en el archivo js/index.js.
2. Esta función se encarga de actualizar el menú desplegable de ciudad cuando se selecciona un estado.
3. Primero, obtiene una referencia al elemento del menú desplegable de provincia seleccionado usando document.getElementById("param_province").
4. Luego, obtiene una referencia al elemento del menú desplegable de ciudad usando document.getElementById("param_city").
5. A continuación, obtiene el índice de la provincia seleccionada del menú desplegable de provincia usando selectedProvince.value.
6. Luego utiliza el índice de la provincia seleccionada para acceder a las ciudades correspondientes del arreglo towns en el archivo data.js.
7. Finalmente, establece la longitud de las opciones del menú desplegable de ciudad al número de ciudades, y recorre las ciudades para establecer el texto y el valor de cada opción del menú desplegable.

// Implementar el menú desplegable cascada de estado-ciudad.
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;
  }
}

Agregar un evento de clic a las etiquetas

En este paso, aprenderás a agregar un evento de clic a las etiquetas de la lista de etiquetas, lo que activará el estilo de la etiqueta seleccionada y desactivará las demás etiquetas.

1. Localiza la función addClick() en el archivo js/index.js.
2. Esta función se encarga de agregar el evento de clic a las etiquetas.
3. Primero, obtiene una referencia a todos los elementos de etiqueta usando document.querySelectorAll(".mark a").
4. Luego, obtiene una referencia al campo de entrada param_mark, que almacenará el índice de la etiqueta seleccionada.
5. A continuación, recorre los elementos de etiqueta y agrega un oyente de eventos de clic a cada uno.
6. Dentro del oyente de eventos, primero remueve la clase active de todas las etiquetas usando labels.forEach((l) => l.classList.remove("active")).
7. Luego, agrega la clase active a la etiqueta clicada usando label.classList.add("active").
8. Finalmente, establece el valor del campo de entrada param_mark al índice de la etiqueta clicada.

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

Validar y guardar la información de la dirección

En este paso, aprenderás a validar la información de la dirección y guardar la nueva dirección en la lista de direcciones.

1. Localiza la función saveInfo() en el archivo js/index.js.
2. Esta función se encarga de validar los campos de entrada y guardar la nueva dirección.
3. Primero, obtiene los valores de los campos de entrada de provincia, ciudad, dirección, marca, nombre y número de teléfono.
4. Luego, verifica si los campos de provincia, dirección, nombre o número de teléfono están vacíos. Si cualquiera de estos campos obligatorios está vacío, muestra un diálogo de advertencia.
5. Si todos los campos obligatorios están llenos, crea un nuevo elemento de lista (<li>) y lo llena con la información de la dirección.
6. El nuevo elemento de lista de direcciones incluye la etiqueta (basada en la marca seleccionada), la dirección completa (provincia y ciudad), la dirección, y el nombre y el número de teléfono.
7. Finalmente, agrega el nuevo elemento de lista de direcciones al elemento .address-list y llama a la función back() para redirigir a la página de gestión de direcciones.

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

Siguiendo estos pasos, has implementado con éxito la funcionalidad "Agregar nueva dirección" en el proyecto. ¡Felicitaciones!

El efecto final de la página debería ser el siguiente:

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.