Урок №16: Мини-проект — ToDo-лист
Сегодня мы создадим простой, но полезный проект — список задач (ToDo-лист). Это поможет закрепить знания о DOM, обработке событий и localStorage.
Где применяется: почти в каждом приложении нужно хранить и отображать список данных (задачи, покупки, заказы и т.д.).
HTML
Создаём поле ввода, кнопку и список задач.
<input type="text" id="taskInput" placeholder="Новая задача...">
<button id="addTask">Добавить</button>
<ul id="taskList"></ul>JavaScript
Добавим логику добавления задач, удаления и сохранения в localStorage.
const input = document.getElementById("taskInput");
const button = document.getElementById("addTask");
const list = document.getElementById("taskList");
function saveTasks() {
const tasks = Array.from(list.children).map(li => li.textContent);
localStorage.setItem("tasks", JSON.stringify(tasks));
}
function loadTasks() {
const tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
tasks.forEach(task => addTaskToList(task));
}
function addTaskToList(task) {
const li = document.createElement("li");
li.textContent = task;
li.addEventListener("click", () => {
li.remove();
saveTasks();
});
list.appendChild(li);
}
button.addEventListener("click", () => {
const task = input.value.trim();
if (task !== "") {
addTaskToList(task);
input.value = "";
saveTasks();
}
});
loadTasks();Попробуйте прямо здесь:
Совет: Используй
localStorage, если хочешь сохранять данные между обновлениями страницы — это удобно и просто!
Что дальше
В следующем уроке ты создашь калькулятор — это поможет освоить работу с событиями, числами и логикой.