Todo List на JavaScript

Приложение списка дел на JavaScript с простым интерфейсом. Эта программа создает пользовательский интерфейс HTML с текстовым вводом и кнопкой «Add task». При нажатии кнопки «Add task» текст входных данных добавляется как новая задача в элемент taskList на странице. У каждой задачи есть кнопка удаления, при нажатии которой задача удаляется из списка. Задачи хранятся в элементах HTML на странице, поэтому они не сохраняются после обновления страницы. Если вы хотите сохранить данные, вы можете использовать локальное хранилище или решение на стороне сервера.

Разметка:

<div class="container">
  <div class="header">
    <h1>To-Do List</h1>
  </div>
  <div class="form">
    <input type="text" id="taskInput" />
    <button onclick="addTask()">Add Task</button>
  </div>
  <div class="tasks" id="taskList"></div>
</div>

Стили:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  margin-top: 20px;
}

.form {
  margin-top: 20px;
  display: flex;
  align-items: center;
}

input[type="text"] {
  width: 60%;
  padding: 10px;
  font-size: 20px;
  border-radius: 10px;
  border: 1px solid gray;
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background-color: cornflowerblue;
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 20px;
  cursor: pointer;
}

.tasks {
  margin-top: 20px;
  width: 60%;
  display: flex;
  flex-direction: column;
}

.task {
  background-color: beige;
  padding: 10px;
  border-radius: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-text {
  width: 70%;
}

Скрипт:

const addTask = () => {
  const taskInput = document.getElementById("taskInput");
  const task = taskInput.value;

  if (!task) return;

  const taskList = document.getElementById("taskList");

  const newTask = document.createElement("div");
  newTask.classList.add("task");

  const taskText = document.createElement("div");
  taskText.classList.add("task-text");
  taskText.innerHTML = task;

  const deleteButton = document.createElement("button");
  deleteButton.innerHTML = "Delete";
  deleteButton.onclick = () => {
    taskList.removeChild(newTask);
  };

  newTask.appendChild(taskText);
  newTask.appendChild(deleteButton);
  taskList.appendChild(newTask);

  taskInput.value = "";
};