Веб-приложение для управления адресами

Введение

В этом проекте вы научитесь создавать новый адрес и управлять адресами в веб-приложении. Проект включает в себя реализацию каскадного выпадающего списка с областями и городами, проверку форм, стилизацию меток и отображение новых адресов.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• инициализировать выпадающий список провинций данными из файла data.js;
• реализовать функциональность каскадного выпадающего списка с областями и городами;
• добавить событие клика на метки в списке тегов, позволяющее активировать выбранную метку и деактивировать другие;
• проверить поля адреса, контакта и номера телефона перед сохранением нового адреса;
• создать и добавить новый элемент списка адресов в список адресов.

🏆 Достижения

После завершения этого проекта вы сможете:

• манипулировать DOM с использованием JavaScript;
• обрабатывать взаимодействия и события пользователя;
• реализовать проверку форм и обработку данных;
• динамически создавать и добавлять HTML-элементы.

Настройте структуру проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура директории следующая:

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

где:

• index.html - главная страница.
• css - папка для файлов стилей.
• images - папка для изображений.
• js/data.js - данные по провинциям и городам.
• js/index.js - JavaScript-файл, который необходимо заполнить.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите его вручную, чтобы увидеть страницу.

Реализуйте каскадный выпадающий список с областями и городами

В этом шаге вы научитесь реализовывать функциональность каскадного выпадающего списка с областями и городами.

1. Найдите функцию provincechange() в файле js/index.js.
2. Эта функция отвечает за обновление выпадающего списка городов при выборе области.
3. Сначала она получает ссылку на выбранный элемент выпадающего списка провинций с использованием document.getElementById("param_province").
4. Затем она получает ссылку на элемент выпадающего списка городов с использованием document.getElementById("param_city").
5. Далее она получает индекс выбранной провинции из выпадающего списка провинций с использованием selectedProvince.value.
6. Затем она использует индекс выбранной провинции для доступа к соответствующим городам из массива towns в файле data.js.
7. Наконец, она устанавливает длину опций выпадающего списка городов равной количеству городов и перебирает города, чтобы установить текст и значение каждой опции выпадающего списка.

// Реализуйте каскадный выпадающий список с областями и городами.
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;
  }
}

Добавьте событие клика к меткам

В этом шаге вы научитесь добавлять событие клика на метки в списке тегов, которое активирует стиль выбранной метки и деактивирует другие метки.

1. Найдите функцию addClick() в файле js/index.js.
2. Эта функция отвечает за добавление события клика на метки.
3. Сначала она получает ссылку на все элементы меток с использованием document.querySelectorAll(".mark a").
4. Затем она получает ссылку на поле ввода param_mark, которое будет хранить индекс выбранной метки.
5. Далее она перебирает элементы меток и добавляет к каждому слушатель события клика.
6. Внутри слушателя события она сначала удаляет класс active из всех меток с использованием labels.forEach((l) => l.classList.remove("active")).
7. Затем она добавляет класс active к нажатой метке с использованием label.classList.add("active").
8. Наконец, она устанавливает значение поля ввода param_mark равным индексу нажатой метки.

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

Проверьте и сохраните информацию об адресе

В этом шаге вы научитесь проверять информацию о адресе и сохранять новый адрес в список адресов.

1. Найдите функцию saveInfo() в файле js/index.js.
2. Эта функция отвечает за проверку полей ввода и сохранение нового адреса.
3. Сначала она получает значения полей ввода провинции, города, адреса, метки, имени и номера телефона.
4. Затем она проверяет, пусты ли поля провинции, адреса, имени или номера телефона. Если любое из этих обязательных полей пусто, то отображается предупреждающее диалоговое окно.
5. Если все обязательные поля заполнены, то создается новый элемент списка (<li>) и заполняется информацией о адресе.
6. Новый элемент списка адресов включает метку (в зависимости от выбранной метки), полный адрес (провинция и город), адрес, а также имя и номер телефона.
7. Наконец, новый элемент списка адресов добавляется в элемент .address-list и вызывается функция back(), чтобы перейти на страницу управления адресами.

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

Следуя этим шагам, вы успешно реализовали функцию "Добавить новый адрес" в проекте. Поздравляем!

Финальный эффект страницы должен быть следующим:

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.