Создание приложения для голосования - Взаимодействующий туториал по веб-разработке

Введение

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

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

Voting app demo gif

🎯 Задачи

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

Как инициализировать HTML-структуру для приложения голосования
Как реализовать функциональность добавления новых вариантов голосования
Как реализовать функциональность удаления вариантов голосования
Как протестировать приложение, чтобы убедиться, что функциональность работает как ожидается

🏆 Достижения

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

Создать базовую HTML-структуру для приложения голосования
Использовать JavaScript для динамического добавления и удаления вариантов голосования из приложения
Обрабатывать взаимодействия пользователя, такие как нажатие кнопки "Добавить вариант" и иконки удаления
Протестировать приложение, чтобы убедиться, что оно соответствует требованиям
Создавать интерактивные веб-приложения с использованием HTML, CSS и JavaScript

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

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

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

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

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

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

unfinished project structure

Реализовать функциональность добавления варианта

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

В файле index.html найдите раздел <script> внизу файла.
Внутри раздела <script> сначала добавьте itemNumber и renderList, и добавленный код будет выглядеть так:

let itemNumber = 2; // По умолчанию 2 данных
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>`;
};
// Отображать HTML с x (кнопкой удаления) для большего количества данных
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> `;
};

Эти функции используются для генерации HTML-структуры для вариантов голосования.

Найдите следующий блок кода в разделе <script>:

$(
  (function () {
    // При инициализации следующие два элемента появляются без символа удаления
    for (let index = 0; index < 2; index++) {
      let initList = initRender(`Option${index + 1}`);
      $(".list").append(initList);
    }

    // Нажмите на знак плюс
    $(".add").click(function () {
      // TODO: Завершите код здесь
    });
  })()
);

Внутри блока $(".add").click(function () {... }) добавьте следующий код:

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

Этот код очистит существующие варианты, увеличит переменную itemNumber, а затем отобразит новые варианты с использованием функции renderList.

При наличии этого кода при нажатии пользователем кнопки "Добавить вариант" в список будет добавлен новый вариант голосования.

Реализовать функциональность удаления

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

В разделе <script> файла index.html найдите следующий блок кода:

// Нажмите на кнопку удаления x, иконка удаления не будет отображаться, если в списке меньше 2 элементов
$(document).on("click", ".del-icon", function () {
  // TODO: Завершите код здесь
});

Внутри этого блока кода добавьте следующий код:

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

Этот код очистит существующие варианты, уменьшит переменную itemNumber, а затем отобразит оставшиеся варианты с использованием соответствующей функции (initRender или renderList), в зависимости от количества вариантов.

При наличии этого кода при нажатии пользователем на иконку "x" рядом с вариантом голосования, этот вариант будет удален из списка.

Тестировать приложение

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

Готовый результат выглядит так:

Voting app final result

Поздравляем! Вы завершили реализацию приложения для голосования.

Резюме

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