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

powered by Advanced iFrame free. Get the Pro version on CodeCanyon.

Разметка:

<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 = "";
};