Construyendo una aplicación de votación

Introducción

En este proyecto, aprenderás a crear una aplicación de votación que permite a los usuarios crear y gestionar opciones de votación, así como eliminar opciones si es necesario. La aplicación también incluye características para el soporte de selección múltiple y los resultados de votación públicos.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo inicializar la estructura HTML para la aplicación de votación
• Cómo implementar la funcionalidad para agregar nuevas opciones de votación
• Cómo implementar la funcionalidad para eliminar opciones de votación
• Cómo probar la aplicación para asegurarse de que la funcionalidad funcione como se espera

🏆 Logros

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

• Establecer la estructura básica HTML para una aplicación de votación
• Utilizar JavaScript para agregar y eliminar dinámicamente opciones de votación de la aplicación
• Manejar interacciones de usuario, como hacer clic en el botón "Agregar opción" y el icono de eliminación
• Probar la aplicación para asegurarse de que cumpla con los requisitos
• Crear aplicaciones web interactivas utilizando HTML, CSS y JavaScript

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:

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

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 la funcionalidad de agregar opción

En este paso, implementarás la funcionalidad para agregar nuevas opciones de votación a la aplicación.

1. En el archivo index.html, localiza la sección <script> al final del archivo.
2. Dentro de la sección <script>, primero debes agregar itemNumber y renderList, y el código agregado se verá así:

let itemNumber = 2; // Valor predeterminado de 2 datos
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>`;
};
// Renderizar HTML con x (botón de eliminación) para datos mayores
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> `;
};

Estas funciones se utilizan para generar la estructura HTML para las opciones de votación.

3. Localiza el siguiente bloque de código en la sección <script>:

$(
  (function () {
    // Al inicializar, los siguientes dos datos aparecen sin el símbolo de eliminación
    for (let index = 0; index < 2; index++) {
      let initList = initRender(`Option${index + 1}`);
      $(".list").append(initList);
    }

    // Haz clic en el signo más
    $(".add").click(function () {
      // TODO: Completa el código aquí
    });
  })()
);

4. Dentro del bloque $(".add").click(function () {... }), agrega el siguiente código:

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

Este código limpiará las opciones existentes, incrementará la variable itemNumber y luego renderizará las nuevas opciones utilizando la función renderList.

Con este código, cuando el usuario haga clic en el botón "Agregar opción", se agregará una nueva opción de votación a la lista.

Implementar la funcionalidad de eliminación

En este paso, implementarás la funcionalidad para eliminar opciones de votación de la aplicación.

1. En la sección <script> del archivo index.html, localiza el siguiente bloque de código:

// Haz clic en el botón de eliminación x, el icono de eliminación no se mostrará si la lista tiene menos de 2 elementos
$(document).on("click", ".del-icon", function () {
  // TODO: Completa el código aquí
});

2. Dentro de este bloque de código, agrega el siguiente código:

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

Este código limpiará las opciones existentes, decrementará la variable itemNumber y luego renderizará las opciones restantes utilizando la función adecuada (initRender o renderList) según el número de opciones.

Con este código, cuando el usuario haga clic en el icono "x" junto a una opción de votación, esa opción se eliminará de la lista.

Probar la aplicación

1. Guarda el archivo index.html y actualiza la página index.html en tu navegador.
2. Verifica que las dos opciones de votación iniciales se muestren sin el icono de eliminación.
3. Haz clic en el botón "Agregar opción" y observa que se agrega una nueva opción de votación a la lista, con el icono de eliminación visible.
4. Haz clic en el icono de eliminación junto a una de las opciones de votación y verifica que la opción se elimine de la lista.
5. Sigue probando la aplicación agregando y eliminando opciones de votación para asegurarte de que la funcionalidad funcione como se espera.

El resultado final es el siguiente:

¡Felicitaciones! Has completado la implementación de la aplicación de votación.

Resumen

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