HTML，CSS 和 JavaScript 创建一个简单的 to-do 列表，用户可以添加，删除和标记完成 to-do 事项。

1个月前更新

320

HTML：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>To-Do List</title>

    <style>

      /* Add CSS styles here */

    </style>

  </head>

  <body>

    <h2>To-Do List</h2>

    <form>

      <input type="text" id="task">

      <button type="submit">Add Task</button>

    </form>

    <ul id="tasks"></ul>

  </body>

  <script>

    // Add JavaScript code here

  </script>

</html>

CSS:

form {

  display: flex;

  align-items: center;

  margin-bottom: 1em;

}
input[type="text"] {

  padding: 0.5em;

  font-size: 1em;

  flex-grow: 1;

  margin-right: 0.5em;

}
button[type="submit"] {

  padding: 0.5em 1em;

  font-size: 1em;

}
li {

  display: flex;

  align-items: center;

  margin-bottom: 0.5em;

}
input[type="checkbox"] {

  margin-right: 0.5em;

}

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

JavaScript:

const form = document.querySelector("form");

const taskInput = document.getElementById("task");

const tasksList = document.getElementById("tasks");
form.addEventListener("submit", function(event) {

  event.preventDefault();
  const task = taskInput.value;
  if (!task) {

    return;

  }
  const taskElement = document.createElement("li");

  taskElement.innerHTML = `

    <input type="checkbox">

    <span>${task}</span>

    <button>Delete</button>

  `;
  const checkbox = taskElement.querySelector("input[type='checkbox']");

  const span = taskElement.querySelector("span");

  const deleteButton = taskElement.querySelector("button");
  checkbox.addEventListener("change", function() {

    span.classList.toggle("completed");

  });
  deleteButton.addEventListener("click", function() {

    taskElement.remove();

  });
  tasksList.appendChild(taskElement);

taskInput.value = ""; });

评分

欢迎为他评分