Введение
Todo List — это базовый, но важный проект для понимания основ работы с DOM и обработки событий в JavaScript. Мы создадим функциональный список задач с возможностью добавления новых задач, отметки их как выполненных и удаления. Проект включает работу с локальным хранилищем для сохранения задач между сессиями.
HTML структура
<div class="todo-container">
<h1>Список задач</h1>
<form id="todo-form">
<input
type="text"
id="todo-input"
placeholder="Введите новую задачу"
required
>
<button type="submit">Добавить</button>
</form>
<ul id="todo-list"></ul>
</div>
CSS стили
.todo-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
#todo-form {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#todo-input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px 20px;
background: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#todo-list {
list-style: none;
padding: 0;
}
.todo-item {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.todo-item.completed span {
text-decoration: line-through;
color: #888;
}
JavaScript код
document.addEventListener('DOMContentLoaded', () => {
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');
// Загрузка задач из localStorage
let todos = JSON.parse(localStorage.getItem('todos')) || [];
function saveTodos() {
localStorage.setItem('todos', JSON.stringify(todos));
}
function renderTodos() {
todoList.innerHTML = '';
todos.forEach((todo, index) => {
const li = document.createElement('li');
li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
li.innerHTML = `
${todo.text}
`;
const checkbox = li.querySelector('input');
checkbox.addEventListener('change', () => toggleTodo(index));
const deleteBtn = li.querySelector('.delete-btn');
deleteBtn.addEventListener('click', () => deleteTodo(index));
todoList.appendChild(li);
});
}
function addTodo(text) {
todos.push({ text, completed: false });
saveTodos();
renderTodos();
}
function toggleTodo(index) {
todos[index].completed = !todos[index].completed;
saveTodos();
renderTodos();
}
function deleteTodo(index) {
todos.splice(index, 1);
saveTodos();
renderTodos();
}
todoForm.addEventListener('submit', (e) => {
e.preventDefault();
const text = todoInput.value.trim();
if (text) {
addTodo(text);
todoInput.value = '';
}
});
renderTodos();
});
Объяснение кода
Наш Todo List состоит из трех основных компонентов:
- HTML структура создает форму для ввода новых задач и контейнер для списка задач.
- CSS стили обеспечивают привлекательный внешний вид и отзывчивый дизайн.
- JavaScript реализует всю функциональность:
- Добавление новых задач
- Отметка задач как выполненных
- Удаление задач
- Сохранение задач в localStorage
- Отображение списка задач
Ключевые функции:
addTodo()— добавляет новую задачу в массивtoggleTodo()— переключает состояние выполнения задачиdeleteTodo()— удаляет задачу из спискаrenderTodos()— отображает все задачи на страницеsaveTodos()— сохраняет задачи в localStorage
Заключение
Создание Todo List — это отличный способ практики работы с DOM-манипуляциями, обработкой событий и локальным хранилищем в JavaScript. Этот базовый проект можно расширять дополнительными функциями, такими как фильтрация задач, установка приоритетов или добавление дедлайнов. Главное преимущество такого проекта — его практическая польза в реальной жизни при сохранении простоты реализации.
