11. Мини-проект: To-Do список

Что будем создавать

To-Do список — это простое, но полезное приложение, в котором можно добавлять, удалять и отмечать выполненные задачи. Все данные сохраняются прямо в браузере с помощью localStorage.

Этот мини-проект покажет, как JavaScript, HTML и CSS работают вместе. После этого вы сможете создавать свои собственные интерактивные приложения!

Шаг 1. Создаём структуру HTML


<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
  <style>
    body { font-family: Arial, sans-serif; background: #f7f7f7; padding: 30px; }
    h1 { text-align: center; }
    .todo-container { max-width: 400px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
    input, button { padding: 10px; border: none; border-radius: 5px; }
    input { width: 70%; border: 1px solid #ccc; }
    button { background: #28a745; color: white; cursor: pointer; }
    ul { list-style: none; padding: 0; margin-top: 20px; }
    li { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid #eee; }
    li.done { text-decoration: line-through; color: gray; }
    .delete { color: red; cursor: pointer; margin-left: 10px; }
  </style>
</head>
<body>
  <div class="todo-container">
    <h1>📋 Мой To-Do список</h1>
    <input id="taskInput" placeholder="Введите задачу">
    <button id="addBtn">Добавить</button>
    <ul id="taskList"></ul>
  </div>
  <script src="app.js"></script>
</body>
</html>

Шаг 2. Подключаем JavaScript

Создайте файл app.js рядом с HTML-страницей.


let input = document.querySelector('#taskInput');
let addBtn = document.querySelector('#addBtn');
let taskList = document.querySelector('#taskList');let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
function renderTasks() {
  taskList.innerHTML = '';
  tasks.forEach((task, index) => {
    let li = document.createElement('li');
    li.textContent = task.text;
    if (task.done) li.classList.add('done');
li.addEventListener('click', () => {
      task.done = !task.done;
      saveTasks();
    });
let del = document.createElement('span');
    del.textContent = '✖';
    del.classList.add('delete');
    del.addEventListener('click', (e) => {
      e.stopPropagation();
      tasks.splice(index, 1);
      saveTasks();
    });
li.appendChild(del);
    taskList.appendChild(li);
  });
}
function saveTasks() {
  localStorage.setItem('tasks', JSON.stringify(tasks));
  renderTasks();
}
addBtn.addEventListener('click', () => {
  let text = input.value.trim();
  if (text === '') return alert('Введите задачу!');
  tasks.push({ text: text, done: false });
  input.value = '';
  saveTasks();
});renderTasks();

Шаг 3. Как это работает

Все задачи сохраняются в localStorage, поэтому они остаются даже после перезагрузки страницы.
При каждом клике на задачу она отмечается как выполненная.
Можно удалить задачу, нажав на крестик.

Пояснение к коду

tasks — массив, где хранятся все задачи.
renderTasks() — отрисовывает задачи из массива на страницу.
saveTasks() — сохраняет данные в localStorage и вызывает обновление интерфейса.
addBtn.addEventListener('click') — добавляет новую задачу при клике на кнопку.

Шаг 4. Добавим немного магии ✨

Чтобы приложение выглядело современно, добавим небольшие эффекты и стили.


li { transition: all 0.3s ease; }
li:hover { background: #f0f8ff; }
button:hover { background: #218838; }
.delete:hover { transform: scale(1.2); }

Теперь при наведении элементы будут плавно подсвечиваться.

Шаг 5. Идеи для улучшения

Добавить фильтр: показывать все / выполненные / невыполненные задачи.
Добавить дату и время добавления задачи.
Сделать возможность редактировать задачу.
Подключить Bootstrap или Tailwind для современного дизайна.

Мини-практика

Создай кнопку «Очистить всё» для удаления всех задач.
Добавь автоматическую нумерацию задач.
Измени фон на тёмный режим при помощи переключателя (используй localStorage для запоминания темы).

Пример функции очистки


let clearBtn = document.createElement('button');
clearBtn.textContent = 'Очистить всё';
clearBtn.style.marginTop = '10px';
clearBtn.addEventListener('click', () => {
  if (confirm('Удалить все задачи?')) {
    tasks = [];
    saveTasks();
  }
});
document.querySelector('.todo-container').appendChild(clearBtn);

Советы новичкам

Не бойтесь экспериментировать: добавляйте кнопки, эффекты, фильтры.
Следите за чистотой кода: разделяйте логику и визуальную часть.
localStorage — отличное решение для простых офлайн-приложений.
Сохраняйте промежуточные версии проекта — это поможет отследить ошибки.

Итоги урока

Теперь вы умеете:

Работать с DOM и событиями.
Сохранять данные в localStorage.
Создавать простые интерактивные приложения.
Добавлять визуальные эффекты и улучшения.

Поздравляем! Вы создали свой первый полноценный проект на JavaScript — To-Do список! Теперь вы можете улучшать его, как захотите — это ваш первый шаг к созданию настоящих веб-приложений.