Создаем ToDo-лист на JavaScript: от новичка до профи

Frontend-разработкаJavaScriptВеб-разработка

By ItProggeR Last updated Янв 16, 2025

ToDo-лист – классический проект для изучения основ JavaScript и манипуляций с DOM. В этой статье мы разберём создание функционального ToDo-листа с нуля, начиная с простой версии и постепенно добавляя новые функции, такие как локальное хранилище и drag-and-drop.

Часть 1: Базовая функциональность

HTML-структура:

<!DOCTYPE html>
<html>
<head>
  <title>ToDo List</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Мой ToDo-лист</h1>
  <input type="text" id="taskInput" placeholder="Добавить задачу">
  <button id="addButton">Добавить</button>
  <ul id="taskList"></ul>

  <script src="script.js"></script>
</body>
</html>

2. JavaScript (script.js):

const taskInput = document.getElementById('taskInput');
const addButton = document.getElementById('addButton');
const taskList = document.getElementById('taskList');

addButton.addEventListener('click', () => {
  const taskText = taskInput.value.trim();
  if (taskText !== "") {
    const listItem = document.createElement('li');
    listItem.textContent = taskText;
    taskList.appendChild(listItem);
    taskInput.value = ""; // Очищаем поле ввода

    // Добавляем кнопку "Удалить"
    const deleteButton = document.createElement('button');
    deleteButton.textContent = "Удалить";
    deleteButton.addEventListener('click', () => {
        taskList.removeChild(listItem);
    });
    listItem.appendChild(deleteButton);
  }
});

Часть 2: Локальное хранилище

Чтобы задачи сохранялись после перезагрузки страницы, используем localStorage:

// ... (предыдущий код) ...

function saveTasks() {
  localStorage.setItem('tasks', taskList.innerHTML);
}

function loadTasks() {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    taskList.innerHTML = savedTasks;

    // Необходимо снова добавить обработчики событий для кнопок "Удалить"
    const deleteButtons = document.querySelectorAll('#taskList li button');
    deleteButtons.forEach(button => {
      button.addEventListener('click', () => {
        taskList.removeChild(button.parentElement);
        saveTasks();
      });
    });
  }
}

addButton.addEventListener('click', () => {
  // ... (предыдущий код) ...
  saveTasks();
});


loadTasks(); // Загружаем задачи при загрузке страницы

Часть 3: Drag-and-drop (с помощью библиотеки SortableJS)

Для реализации drag-and-drop функциональности подключим библиотеку SortableJS:

Подключаем библиотеку (в HTML):

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

2. JavaScript:


// ... (предыдущий код) ...

new Sortable(taskList, {
  animation: 150,
  onUpdate: function (evt) {
      saveTasks(); // Сохраняем порядок задач после перетаскивания
  }
});

Часть 4: Дополнительные улучшения

Отметка о выполнении: добавьте checkbox к каждой задаче, чтобы отмечать её как выполненную. Можно добавить стили для выполненных задач (например, зачеркнутый текст).
Фильтрация задач: добавьте возможность фильтровать задачи (все, выполненные, невыполненные).
Редактирование задач: дайте пользователю возможность редактировать текст задачи.
Дата и время: добавляйте к задаче дату и время создания.
Локальное хранилище с JSON: вместо innerHTML используйте JSON.stringify и JSON.parse для сохранения и загрузки задач в localStorage. Это позволит сохранять больше данных о задаче (например, статус выполнения, дата).

Этот подробный гайд поможет вам создать функциональный и интерактивный ToDo-лист на JavaScript. Экспериментируйте с кодом, добавляйте новые функции и совершенствуйте свои навыки!