Практика с реальными задачами, разбором кода и приправой из юмора
"Если ты не сделал список задач, то у тебя уже одна задача — его сделать."
🚀 Зачем нам TODO-приложение?
Потому что это идеальный проект для тренировки:
- HTML ✅
- CSS (немного) ✅
- JavaScript (по-настоящему) ✅
- LocalStorage (привет, браузерная база данных!) ✅
А ещё: прост в реализации, понятен в логике и можно развивать до бесконечности (темная тема, drag & drop, синхронизация с сервером, и т.д.)
🧰 Что мы будем делать?
- Отрисуем простой интерфейс на HTML
- Добавим задачи в список
- Удалим задачу по клику
- Сохраним всё в LocalStorage
- Подгрузим сохранённое при перезагрузке страницы
📁 Структура проекта
todo-app/
│
├── index.html
├── style.css
└── app.js
1️⃣ HTML: основы интерфейса
Создадим index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My TODO App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>📋 Мои задачи</h1>
<input id="taskInput" type="text" placeholder="Введите задачу..." />
<button id="addBtn">Добавить</button>
<ul id="taskList"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
📌 Здесь всё просто: поле ввода, кнопка и список для задач.
2️⃣ Немного CSS: чисто по красоте
В style.css:
body {
font-family: sans-serif;
background: #f4f4f4;
padding: 2rem;
}
.container {
max-width: 400px;
margin: auto;
background: white;
padding: 1rem;
border-radius: 8px;
}
#taskInput {
width: 70%;
padding: 0.5rem;
}
#addBtn {
padding: 0.5rem;
margin-left: 1rem;
}
li {
margin-top: 1rem;
cursor: pointer;
}
3️⃣ JS: Добавляем задачу
В app.js:
const input = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
// Загружаем задачи из LocalStorage при старте
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
renderTasks();
addBtn.addEventListener('click', () => {
const taskText = input.value.trim();
if (taskText === '') return;
tasks.push(taskText);
input.value = '';
saveAndRender();
});
📌 JSON.parse() превращает строку из localStorage в массив. Если там пусто — создаём новый.
4️⃣ Отрисовка задач и удаление
function renderTasks() {
taskList.innerHTML = ''; // очищаем старый список
tasks.forEach((task, index) => {
const li = document.createElement('li');
li.textContent = task;
li.addEventListener('click', () => {
tasks.splice(index, 1); // удаляем по индексу
saveAndRender();
});
taskList.appendChild(li);
});
}
function saveAndRender() {
localStorage.setItem('tasks', JSON.stringify(tasks));
renderTasks();
}
📌 localStorage.setItem() — сохраняем массив задач как строку. splice() — удаляет задачу при клике.
🧪 Примеры задач и развития
🔰 Новичок:
- ✏️ Сделай редактирование задач при двойном клике.
- ✅ Добавь флажки "выполнено" с помощью чекбоксов.
- 🎯 Очисти все задачи одной кнопкой.
⚙️ Продвинутый:
- 🌑 Сделай тёмную тему (можно с localStorage переключателем).
- 🔒 Сделай приватный список задач с простым паролем.
💡 Бонус: автофокус и Enter
input.focus();
input.addEventListener('keydown', e => {
if (e.key === 'Enter') addBtn.click();
});
📌 Пользователь может нажать Enter вместо клика. Удобно? Удобно.
🏁 Заключение
Теперь ты умеешь:
✅ Работать с DOM
✅ Создавать элементы динамически
✅ Использовать события
✅ Хранить данные в localStorage
✅ Делать настоящие мини-приложения на чистом JavaScript