Приложение «to do list» полезно как практический проект для закрепления базовых навыков JavaScript. В его основе лежит работа с DOM: добавление новых элементов списка, их удаление и изменение состояния задачи. Такой проект помогает освоить обработку событий, работу с массивами и хранение данных в localStorage.
При реализации списка задач стоит сразу определить структуру данных. Удобнее всего хранить каждую задачу в виде объекта с полями id, title и completed. Это позволит легко обновлять статус выполнения и синхронизировать интерфейс с данными.
Чтобы интерфейс оставался отзывчивым, лучше использовать делегирование событий. Например, обработчик клика можно вешать не на каждую кнопку удаления задачи, а на контейнер всего списка. Такой подход уменьшает количество активных слушателей и ускоряет работу приложения.
Для сохранения списка после перезагрузки страницы стоит подключить механизм сериализации массива задач в JSON и запись его в localStorage. При загрузке страницы данные нужно извлекать и восстанавливать интерфейс. Это обеспечит полноценную работу приложения без серверной части.
Подключение JavaScript к HTML-странице
Для использования скрипта создайте файл script.js и разместите в нём весь код. Это позволяет поддерживать структуру проекта и облегчает отладку.
В HTML подключение выполняется с помощью тега <script> с атрибутом src:
<script src="script.js"></script>
Рекомендуется вставлять тег перед закрывающим </html>, чтобы страница сначала загрузила разметку, а затем выполняла скрипт.
Если требуется запуск кода сразу после построения DOM, используйте атрибут defer:
<script src="script.js" defer></script>
Атрибут async подключает скрипт параллельно с загрузкой HTML, но порядок выполнения может отличаться. Для списка задач удобнее применять defer, чтобы скрипт всегда имел доступ к элементам страницы.
Создание разметки списка задач
Для корректной работы списка необходимо заранее определить элементы управления и контейнеры для задач.
- Форма ввода: одно текстовое поле
<input type="text">и кнопка<button>для добавления новой задачи. - Контейнер для списка: элемент
<ul id="task-list">, внутри которого будут динамически появляться задачи. - Каждая задача: элемент
<li>, содержащий текст задачи и кнопку удаления.
Пример базовой структуры:
<div id="todo-app"> <input type="text" id="new-task" placeholder="Введите задачу"> <button id="add-task">Добавить</button> <ul id="task-list"></ul> </div>
При такой разметке удобно навешивать обработчики событий: кнопка запускает добавление новой записи, контейнер списка служит точкой для динамического рендеринга, а каждый элемент <li> может расширяться иконками или чекбоксами.
Добавление новых задач через форму
Чтобы пользователь мог создавать задачи без редактирования кода, используется форма с полем ввода и кнопкой подтверждения.
- Поле ввода
<input type="text">для текста задачи. - Кнопка
<button>для запуска функции добавления. - Контейнер
<ul>или<div>для хранения списка задач.
Пример структуры:
<form id="taskForm">
<input type="text" id="taskInput" placeholder="Новая задача">
<button type="submit">Добавить</button>
</form>
<ul id="taskList"></ul>
Ключевые шаги обработки:
- Отменить стандартное поведение формы методом
event.preventDefault(). - Считать значение поля
taskInput.value. - Проверить, чтобы строка не была пустой.
- Создать новый элемент
<li>, присвоить ему текст задачи. - Добавить элемент в
taskList. - Очистить поле ввода.
Пример обработчика:
document.getElementById("taskForm").addEventListener("submit", function(event) {
event.preventDefault();
const input = document.getElementById("taskInput");
const text = input.value.trim();
if (text !== "") {
const li = document.createElement("li");
li.textContent = text;
document.getElementById("taskList").appendChild(li);
input.value = "";
}
});
Реализация кнопки удаления задачи
Для каждой задачи создаётся отдельная кнопка с атрибутом data-id, который совпадает с уникальным идентификатором задачи. Это позволяет однозначно определить элемент для удаления.
Пример разметки одной задачи:
<li data-id="1">Купить продукты
<button class="delete-btn" data-id="1">Удалить</button>
</li>
В JavaScript следует использовать делегирование событий, чтобы не привязывать обработчик к каждой кнопке отдельно:
const list = document.getElementById('task-list');
list.addEventListener('click', (event) => {
if (event.target.classList.contains('delete-btn')) {
const id = event.target.dataset.id;
const item = document.querySelector(`li[data-id="${id}"]`);
if (item) {
item.remove();
}
}
});
Такой подход уменьшает количество обработчиков, упрощает поддержку кода и гарантирует корректное удаление даже для динамически добавленных задач.
Отмечание выполненных задач с помощью чекбокса
Для управления статусом задач используется элемент <input type="checkbox">. Каждая запись списка должна содержать чекбокс и текст задачи, что позволяет напрямую изменять состояние без дополнительных кнопок.
При изменении состояния чекбокса рекомендуется использовать событие change. В обработчике удобно добавлять или убирать CSS-класс, например completed, чтобы визуально выделить выполненные пункты и при необходимости сохранять статус в localStorage.
Пример разметки: <li><input type="checkbox"> Купить хлеб</li>. Пример обработки: checkbox.addEventListener("change", () => task.classList.toggle("completed"));.
Такой подход позволяет поддерживать актуальное состояние списка, синхронизировать его между сессиями и облегчает последующую фильтрацию выполненных и активных задач.
Сохранение задач в localStorage
LocalStorage позволяет сохранять данные в браузере в формате ключ-значение без срока действия. Для хранения задач создайте массив объектов, где каждый объект содержит свойства: id, текст задачи и статус выполнения.
Для сохранения используйте метод localStorage.setItem('tasks', JSON.stringify(tasks)). Перед записью массив нужно преобразовать в строку JSON. Для загрузки задач применяйте JSON.parse(localStorage.getItem('tasks') || '[]'), чтобы избежать ошибок при пустом хранилище.
Обновление задач требует перезаписи всего массива. Например, при изменении статуса задачи найдите объект по id, измените свойство, затем вызовите setItem снова. Это гарантирует согласованность данных.
Удаление задач выполняется фильтрацией массива по id и последующей записи обновленного массива в localStorage. Использование уникальных id позволяет исключить конфликт при одновременном редактировании.
Для предотвращения потери данных при закрытии вкладки рекомендуется вызывать сохранение при каждом изменении массива задач. Это делает работу to do list полностью автономной без серверной части.
Для контроля объема хранения учитывайте, что localStorage ограничен примерно 5 МБ на домен. Для больших списков стоит рассматривать IndexedDB.
Загрузка задач из localStorage при открытии страницы
Для автоматической подгрузки задач используйте событие DOMContentLoaded. Оно срабатывает после полной загрузки структуры DOM, что гарантирует доступность элементов списка для добавления задач.
Сначала извлеките данные из localStorage с помощью localStorage.getItem('tasks'). Если данных нет, возвращается null, поэтому важно применять проверку и преобразование через JSON.parse:
const savedTasks = JSON.parse(localStorage.getItem('tasks')) || [];
Далее создайте функцию, которая перебирает массив задач и динамически формирует элементы списка в DOM. Для каждой задачи рекомендуется сохранять уникальный идентификатор, текст и состояние выполнения:
savedTasks.forEach(task => {
const li = document.createElement('li');
li.textContent = task.text;
li.dataset.id = task.id;
if(task.completed) li.classList.add('completed');
taskList.appendChild(li);
});
После загрузки списка синхронизируйте обработчики событий: добавление, удаление и отметку выполнения задач. Это предотвращает рассинхронизацию между localStorage и отображением.
Если массив задач большой, используйте DocumentFragment для вставки всех элементов за один раз, чтобы минимизировать перерисовку DOM:
const fragment = document.createDocumentFragment();
savedTasks.forEach(task => {
const li = document.createElement('li');
li.textContent = task.text;
li.dataset.id = task.id;
if(task.completed) li.classList.add('completed');
fragment.appendChild(li);
});
taskList.appendChild(fragment);
Регулярная загрузка задач при открытии страницы обеспечивает сохранность данных пользователя и поддерживает актуальное состояние интерфейса без ручного обновления.
Стилизация списка задач с помощью CSS
Для повышения читаемости списка задач используйте явное разделение элементов. Например, добавление отступов и границ помогает визуально отделить задачи друг от друга:
li { padding: 10px; border-bottom: 1px solid #ccc; }
Цветовая дифференциация статуса задач упрощает восприятие. Задачи в процессе можно выделять желтым, выполненные – зелёным:
.task-in-progress { background-color: #fff3cd; }
.task-completed { background-color: #d4edda; text-decoration: line-through; }
Для интерактивности используйте псевдоклассы. Например, при наведении курсора элемент списка слегка увеличивается и меняет оттенок фона:
li:hover { transform: scale(1.02); background-color: #f1f1f1; transition: 0.2s; }
Чтобы выровнять чекбокс и текст задачи по горизонтали, применяйте flexbox:
li { display: flex; align-items: center; gap: 10px; }
Таблица помогает структурировать данные о задачах, например, при отображении приоритета, даты и статуса:
| Задача | Приоритет | Дата | Статус |
|---|---|---|---|
| Закончить отчет | Высокий | 21.09.2025 | В процессе |
| Обновить сайт | Средний | 22.09.2025 | Выполнено |
Использование шрифтов с различной толщиной улучшает читаемость заголовков задач. Основной текст можно сделать нормальным, а приоритет – жирным:
li .priority { font-weight: bold; }
Для мобильной версии уменьшайте отступы и размер шрифта, сохраняя читаемость:
@media (max-width: 480px) { li { padding: 6px; font-size: 14px; } }
Вопрос-ответ:
Как добавить новую задачу в список через JavaScript?
Для добавления задачи можно использовать метод createElement для создания нового элемента списка и appendChild для его добавления в существующий ul. Также нужно обновить массив, если вы храните задачи в переменной, чтобы состояние списка оставалось синхронизированным с интерфейсом.
Как сохранить задачи после перезагрузки страницы?
Можно использовать localStorage. При добавлении или удалении задач нужно обновлять данные в localStorage с помощью setItem, а при загрузке страницы считывать их через getItem и отображать. Это позволяет сохранять состояние списка между сессиями браузера.
Можно ли сделать отметку выполненной задачи кликом мыши?
Да, для этого можно добавить обработчик события click на каждый элемент списка. При клике можно менять класс элемента, например, добавлять класс с зачеркнутым текстом. При использовании localStorage важно сохранять также состояние выполнения каждой задачи, чтобы оно сохранялось после перезагрузки.
Как реализовать удаление задач в to do list?
Удаление можно сделать через кнопку или иконку рядом с каждой задачей. При нажатии на кнопку нужно удалить элемент из DOM через removeChild и удалить соответствующий элемент из массива задач. Если используется localStorage, нужно обновлять его содержимое после удаления, чтобы изменения сохранялись.
Есть ли способ сортировать задачи по дате добавления или приоритету?
Сортировку можно выполнить на уровне массива с задачами, используя метод sort и сравнивая дату или значение приоритета. После сортировки нужно заново отрисовать список в DOM, чтобы порядок задач соответствовал массиву. Такой подход позволяет гибко управлять отображением без сложных библиотек.
Как добавить новые задачи в to do list на JavaScript и сразу отображать их на странице?
Чтобы добавить новую задачу, нужно сначала создать элемент ввода в HTML и кнопку для подтверждения. В JavaScript нужно повесить обработчик события на кнопку или форму, который будет считывать текст из поля ввода. Затем создается новый элемент списка (например, <li>) с текстом задачи и добавляется в существующий список на странице через метод appendChild или insertAdjacentHTML. Так задача сразу становится видимой для пользователя без перезагрузки страницы.
Загрузка...
