待办事项列表中的 JavaScript 项目(1)

📌 相关文章

📜 待办事项列表中的 JavaScript 项目(1)

📅 最后修改于: 2023-12-03 14:54:15.422000 🧑 作者: Mango

待办事项列表中的 JavaScript 项目

JavaScript 是一种广泛使用的编程语言，可用于编写 Web 应用程序、桌面应用程序、游戏等。在待办事项列表中使用 JavaScript 项目的好处是可以轻松地实现一个交互式的应用程序，因为 JavaScript 是一种支持事件驱动编程的语言。

功能

本项目实现了一个简单的待办事项列表，具有以下功能：

添加新的待办事项
修改待办事项的内容
标记待办事项为已完成
恢复已完成的待办事项
删除待办事项

技术栈

本项目使用了以下技术：

HTML、CSS、JavaScript
Bootstrap：一个流行的开源前端框架，用于设计漂亮、响应式的界面
LocalStorage：一种浏览器本地存储数据的技术，可以将数据保存在用户的计算机上，以便在下次访问时使用

演示

演示链接：待办事项列表

代码实现

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>待办事项列表</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="main.js"></script>
  </head>
  <body>
    <div class="container mt-5">
      <h1 class="text-center">待办事项</h1>
      <div class="card mt-3">
        <div class="card-body">
          <form id="todo-form">
            <div class="form-group">
              <input type="text" id="todo-input" class="form-control" placeholder="输入新的待办事项" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block">添加</button>
          </form>
        </div>
      </div>
      <ul class="list-group mt-3" id="todo-list">
      </ul>
      <button type="button" class="btn btn-info btn-block mt-3" id="clear-btn">清除已完成的事项</button>
    </div>
  </body>
</html>

CSS

.completed {
  text-decoration: line-through;
}

JavaScript

const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');
const list = document.getElementById('todo-list');
const clearBtn = document.getElementById('clear-btn');

form.addEventListener('submit', addTodo);
list.addEventListener('click', handleListClick);
clearBtn.addEventListener('click', clearCompleted);

// 初始化待办事项列表
render();

// 添加新的待办事项
function addTodo(event) {
  event.preventDefault();
  const value = input.value.trim();
  if (value.length === 0) {
    return;
  }
  const todo = {
    id: `todo_${Date.now()}`,
    content: value,
    completed: false,
  };
  const todos = getTodos();
  todos.push(todo);
  saveTodos(todos);
  render();
  input.value = '';
  input.focus();
}

// 根据当前状态渲染待办事项列表
function render() {
  list.innerHTML = '';
  const todos = getTodos();
  todos.forEach(todo => {
    const li = document.createElement('li');
    li.id = todo.id;
    li.innerHTML = `
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="${todo.id}_checkbox" ${todo.completed ? 'checked' : ''}>
        <label class="custom-control-label ${todo.completed ? 'completed' : ''}" for="${todo.id}_checkbox">${todo.content}</label>
      </div>
      <button type="button" class="btn btn-outline-secondary btn-sm float-right">编辑</button>`;
    list.appendChild(li);
  });
}

// 编辑待办事项
function editTodo(todoId) {
  const todo = getTodoById(todoId);
  const newContent = window.prompt('请输入新的内容', todo.content);
  if (newContent === null || newContent.trim().length === 0) {
    return;
  }
  todo.content = newContent.trim();
  saveTodos(getTodos());
  render();
}

// 根据 ID 获取待办事项
function getTodoById(todoId) {
  const todos = getTodos();
  return todos.find(todo => todo.id === todoId);
}

// 获取待办事项列表
function getTodos() {
  const todosJson = localStorage.getItem('todos');
  return todosJson ? JSON.parse(todosJson) : [];
}

// 处理列表项点击事件
function handleListClick(event) {
  const target = event.target;
  if (target.tagName === 'INPUT') {
    handleCheckboxClick(target.id);
  } else if (target.tagName === 'BUTTON') {
    handleButtonClick(target.parentNode.id);
  } else {
    return;
  }
}

// 处理复选框点击事件
function handleCheckboxClick(checkboxId) {
  const todoId = checkboxId.split('_checkbox')[0];
  const todo = getTodoById(todoId);
  todo.completed = !todo.completed;
  saveTodos(getTodos());
  render();
}

// 处理按钮点击事件
function handleButtonClick(todoId) {
  editTodo(todoId);
}

// 保存待办事项列表
function saveTodos(todos) {
  localStorage.setItem('todos', JSON.stringify(todos));
}

// 清除已完成的待办事项
function clearCompleted() {
  const todos = getTodos().filter(todo => !todo.completed);
  saveTodos(todos);
  render();
}

总结

这个项目展示了如何使用 HTML、CSS、JavaScript 和 LocalStorage 创建一个待办事项列表。本项目只是一个起点，你可以根据需要扩展其功能，例如添加提醒、分类、排序等功能。希望这个项目对你有帮助！