Construindo uma Aplicação de Votação

Introdução

Neste projeto, você aprenderá como construir uma aplicação de votação que permite aos usuários criar e gerenciar opções de votação, bem como excluir opções, se necessário. A aplicação também inclui funcionalidades para suporte a múltiplas seleções e resultados públicos da votação.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como inicializar a estrutura HTML para a aplicação de votação
• Como implementar a funcionalidade para adicionar novas opções de votação
• Como implementar a funcionalidade para excluir opções de votação
• Como testar a aplicação para garantir que a funcionalidade funcione como esperado

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Configurar a estrutura HTML básica para uma aplicação de votação
• Usar JavaScript para adicionar e remover dinamicamente opções de votação da aplicação
• Lidar com interações do usuário, como clicar no botão "Adicionar opção" e no ícone de exclusão
• Testar a aplicação para garantir que ela atenda aos requisitos
• Construir aplicações web interativas usando HTML, CSS e JavaScript

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga os passos abaixo para completar esta etapa:

Abra a pasta do projeto. A estrutura de diretórios é a seguinte:

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

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Implementar a Funcionalidade de Adicionar Opção

Nesta etapa, você implementará a funcionalidade para adicionar novas opções de votação à aplicação.

1. No arquivo index.html, localize a seção <script> na parte inferior do arquivo.
2. Dentro da seção <script>, primeiro você precisa adicionar itemNumber e renderList, e o código adicionado ficará assim:

let itemNumber = 2; // Default 2 data
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>`;
};
// Render HTML with x (delete button) for data greater
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> `;
};

Essas funções são usadas para gerar a estrutura HTML para as opções de votação.

3. Localize o seguinte bloco de código na seção <script>:

$(
  (function () {
    // When initialising, the following two data appear without the delete symbol
    for (let index = 0; index < 2; index++) {
      let initList = initRender(`Option${index + 1}`);
      $(".list").append(initList);
    }

    // Click the plus sign
    $(".add").click(function () {
      // TODO: Complete the code here
    });
  })()
);

4. Dentro do bloco $(".add").click(function () { ... }), adicione o seguinte código:

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

Este código irá limpar as opções existentes, incrementar a variável itemNumber e, em seguida, renderizar as novas opções usando a função renderList.

Com este código em vigor, quando o usuário clicar no botão "Adicionar opção", uma nova opção de votação será adicionada à lista.

Implementar a Funcionalidade de Exclusão

Nesta etapa, você implementará a funcionalidade para excluir opções de votação da aplicação.

1. Na seção <script> do arquivo index.html, localize o seguinte bloco de código:

// Click the x Delete button, the delete icon will not be displayed if the list is less than 2 items
$(document).on("click", ".del-icon", function () {
  // TODO: Complete the code here
});

2. Dentro deste bloco de código, adicione o seguinte 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 irá limpar as opções existentes, decrementar a variável itemNumber e, em seguida, renderizar as opções restantes usando a função apropriada (initRender ou renderList) com base no número de opções.

Com este código em vigor, quando o usuário clicar no ícone "x" ao lado de uma opção de votação, essa opção será removida da lista.

Testar a Aplicação

1. Salve o arquivo index.html e atualize a página index.html no seu navegador.
2. Verifique se as duas opções de votação iniciais são exibidas sem o ícone de exclusão.
3. Clique no botão "Adicionar opção" e observe que uma nova opção de votação é adicionada à lista, com o ícone de exclusão exibido.
4. Clique no ícone de exclusão ao lado de uma das opções de votação e verifique se a opção é removida da lista.
5. Continue testando a aplicação adicionando e excluindo opções de votação para garantir que a funcionalidade funcione conforme o esperado.

O resultado final é o seguinte:

Parabéns! Você concluiu a implementação da aplicação de votação.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.