Aplicação Web de Gerenciamento de Endereços

Introdução

Neste projeto, você aprenderá como criar um novo endereço e gerenciar endereços em uma aplicação web. O projeto envolve a implementação de um dropdown em cascata de estado-cidade, validação de formulário, estilização de rótulos e renderização de novos endereços.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como inicializar o dropdown de província com dados do arquivo data.js
• Como implementar a funcionalidade do dropdown em cascata de estado-cidade
• Como adicionar um evento de clique aos rótulos na lista de tags, permitindo que o rótulo selecionado seja ativado e os outros desativados
• Como validar os campos de endereço, contato e número de telefone antes de salvar um novo endereço
• Como criar e anexar um novo item de lista de endereço à lista de endereços

🏆 Conquistas

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

• Manipular o DOM usando JavaScript
• Lidar com interações e eventos do usuário
• Implementar validação de formulário e tratamento de dados
• Criar e anexar dinamicamente elementos HTML

Configurar a Estrutura do Projeto

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

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

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

Onde:

• index.html é a página principal.
• css é a pasta para arquivos de estilo.
• images é a pasta para imagens.
• js/data.js são os dados para as províncias e cidades.
• js/index.js é o arquivo JavaScript que precisa ser completado.

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 o Menu Suspenso em Cascata Estado-Cidade

Nesta etapa, você aprenderá como implementar a funcionalidade do dropdown em cascata de estado-cidade.

1. Localize a função provincechange() no arquivo js/index.js.
2. Esta função é responsável por atualizar o dropdown de cidade quando um estado é selecionado.
3. Primeiro, ela obtém uma referência ao elemento dropdown de província selecionado usando document.getElementById("param_province").
4. Em seguida, ela obtém uma referência ao elemento dropdown de cidade usando document.getElementById("param_city").
5. Depois, ela recupera o índice da província selecionada do dropdown de província usando selectedProvince.value.
6. Ela então usa o índice da província selecionada para acessar as cidades correspondentes do array towns no arquivo data.js.
7. Finalmente, ela define o comprimento das opções do dropdown de cidade para o número de cidades e itera pelas cidades para definir o texto e o valor de cada opção do dropdown.

// Implemente o dropdown em cascata de estado-cidade.
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;
  }
}

Adicionar Evento de Clique aos Labels

Nesta etapa, você aprenderá como adicionar um evento de clique aos labels na lista de tags, o que ativará o estilo do label selecionado e desativará os outros labels.

1. Localize a função addClick() no arquivo js/index.js.
2. Esta função é responsável por adicionar o evento de clique aos labels.
3. Primeiro, ela obtém uma referência a todos os elementos label usando document.querySelectorAll(".mark a").
4. Em seguida, ela obtém uma referência ao campo de entrada param_mark, que armazenará o índice do label selecionado.
5. Depois, ela itera pelos elementos label e adiciona um ouvinte de evento de clique a cada um.
6. Dentro do ouvinte de evento, ela primeiro remove a classe active de todos os labels usando labels.forEach((l) => l.classList.remove("active")).
7. Em seguida, ela adiciona a classe active ao label clicado usando label.classList.add("active").
8. Finalmente, ela define o valor do campo de entrada param_mark para o índice do label clicado.

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 e Salvar Informações de Endereço

Nesta etapa, você aprenderá como validar as informações de endereço e salvar o novo endereço na lista de endereços.

1. Localize a função saveInfo() no arquivo js/index.js.
2. Esta função é responsável por validar os campos de entrada e salvar o novo endereço.
3. Primeiro, ela recupera os valores dos campos de entrada de província, cidade, endereço, marca, nome e número de telefone.
4. Em seguida, ela verifica se os campos de província, endereço, nome ou número de telefone estão vazios. Se algum desses campos obrigatórios estiver vazio, ela exibe um diálogo de aviso.
5. Se todos os campos obrigatórios forem preenchidos, ela cria um novo elemento de item de lista (<li>) e o preenche com as informações de endereço.
6. O novo item de lista de endereço inclui o label (com base na marca selecionada), o endereço completo (província e cidade), o endereço e o nome e número de telefone.
7. Finalmente, ela anexa o novo item de lista de endereço ao elemento .address-list e chama a função back() para redirecionar para a página de gerenciamento de endereços.

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

Seguindo estas etapas, você implementou com sucesso a funcionalidade "Adicionar Novo Endereço" no projeto. Parabéns!

O efeito final da página deve ser o seguinte:

Resumo

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