构建投票应用程序 - 交互式网页开发教程

介绍

在这个项目中，你将学习如何构建一个投票应用程序，该应用程序允许用户创建和管理投票选项，并在需要时删除选项。该应用程序还包括多选支持和公开投票结果的功能。

👀 预览

投票应用演示动图

🎯 任务

在这个项目中，你将学习：

如何为投票应用程序初始化 HTML 结构
如何实现添加新投票选项的功能
如何实现删除投票选项的功能
如何测试应用程序以确保功能按预期工作

🏆 成果

完成这个项目后，你将能够：

为投票应用程序设置基本的 HTML 结构
使用 JavaScript 动态地向应用程序中添加和删除投票选项
处理用户交互，如点击“添加选项”按钮和删除图标
测试应用程序以确保它满足要求
使用 HTML、CSS 和 JavaScript 构建交互式 Web 应用程序

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此操作：

打开项目文件夹。目录结构如下：

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

点击 WebIDE 右下角的Go Live按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新以查看页面。

未完成的项目结构

实现添加选项功能

在这一步中，你将实现向应用程序中添加新投票选项的功能。

在 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>`;
};
// 为大于默认数量的数据渲染带删除按钮（x）的 HTML
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 () {
      // 待办事项：在此处完成代码
    });
  })()
);

在 $(".add").click(function () {... }) 代码块内，添加以下代码：

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

这段代码将清除现有的选项，递增 itemNumber 变量，然后使用 renderList 函数渲染新的选项。

有了这段代码，当用户点击“添加选项”按钮时，新的投票选项将被添加到列表中。

实现删除功能

在这一步中，你将实现从应用程序中删除投票选项的功能。

在 index.html 文件的 <script> 部分中，找到以下代码块：

// 点击 x 删除按钮，如果列表中的项目少于 2 个，则删除图标将不会显示
$(document).on("click", ".del-icon", function () {
  // 待办事项：在此处完成代码
});

在这个代码块内，添加以下代码：

$(".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 页面。
确认最初的两个投票选项显示时没有删除图标。
点击“添加选项”按钮，观察新的投票选项是否被添加到列表中，并且显示删除图标。
点击其中一个投票选项旁边的删除图标，确认该选项是否从列表中移除。
通过添加和删除投票选项继续测试应用程序，以确保功能按预期工作。

最终结果如下：

投票应用最终结果

恭喜！你已完成投票应用程序的实现。

总结

恭喜！你已完成此项目。你可以在 LabEx 中练习更多实验以提升你的技能。