Получить профессию в Skypro
Создаем эффективный список дел на JS: практическое руководство
Пройдите тест, узнайте какой профессии подходите
Для кого эта статья:
- начинающие и практикующие веб-разработчики, желающие улучшить свои навыки JavaScript
- студенты и участники курсов по программированию, интересующиеся практическим применением полученных знаний
профессионалы, стремящиеся оптимизировать свою работу и создать собственное решение для управления задачами
Разработка персонального To-Do приложения — не просто учебный проект, это изящное решение технической задачи и одновременно инструмент, который вы будете использовать ежедневно. Создавая список задач на JavaScript, вы не только закрепляете фундаментальные навыки программирования, но и разрабатываете инструмент, идеально соответствующий вашим потребностям. В 2025 году, когда разработчики тонут в море готовых решений, умение создавать собственные инструменты выделит вас из толпы и откроет новые возможности для карьерного роста. 🚀
Хотите создать не просто учебный проект, а полноценное приложение? Курс «Веб-разработчик» с нуля от Skypro — ваш путь к созданию профессиональных JavaScript-приложений. На курсе вы не только освоите базовый синтаксис, но и научитесь создавать интерактивные веб-приложения с сохранением данных, изящным интерфейсом и современной архитектурой. После завершения курса вы сможете трансформировать любую идею в работающий продукт!
Почему JS-список дел поможет структурировать работу
JavaScript-приложение для управления задачами — это не просто демонстрация технических навыков, но и мощный инструмент продуктивности. Разработчики, которые инвестируют время в создание персонализированных инструментов, получают двойную выгоду: улучшают свои навыки кодирования и оптимизируют рабочий процесс. 💪
Ключевые преимущества разработки собственного TODO-приложения:
- Полный контроль над функциональностью и интерфейсом
- Возможность адаптации под индивидуальные рабочие процессы
- Практическое применение знаний JavaScript в реальном проекте
- Отсутствие зависимости от сторонних сервисов и их ограничений
- Возможность постепенного расширения функциональности
Важно понимать, что создание списка задач на JavaScript — это фундамент для более сложных проектов. Освоив эту базовую концепцию, вы сможете создавать более сложные системы управления проектами, трекеры привычек или персональные органайзеры.
| Критерий | Готовое решение | Собственное JS-приложение |
|---|---|---|
| Кастомизация | Ограниченная рамками платформы | Неограниченная |
| Приватность данных | Часто хранятся на серверах компании | Полный контроль над данными |
| Образовательная ценность | Минимальная | Максимальная |
| Гибкость архитектуры | Фиксированная | Изменяемая под требования |
Алексей Орлов, старший фронтенд-разработчик
Однажды я столкнулся с ситуацией, когда мне нужно было вести учет многочисленных задач по нескольким проектам одновременно. Существящие решения были либо слишком сложными, либо не соответствовали моим потребностям. Потратив выходные на разработку собственного ToDo-приложения на JavaScript, я создал инструмент, который идеально соответствовал моему рабочему процессу.
Ключевой особенностью стала возможность группировать задачи по проектам с цветовой кодировкой и устанавливать зависимости между ними. Функция drag-and-drop для изменения приоритетов сэкономила мне часы времени на перепланирование. Через шесть месяцев использования я заметил, что моя производительность выросла на 30%, а количество пропущенных дедлайнов сократилось практически до нуля.
Базовая структура для списка дел на JavaScript
Прежде чем погрузиться в JavaScript, необходимо создать прочный HTML-фундамент для нашего приложения. Чёткая структура разметки — залог успешной реализации функциональности списка задач. 🏗️
Базовый HTML-каркас для нашего ToDo-приложения:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Эффективный список задач на JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Мой список задач</h1>
<div class="input-group">
<input type="text" id="taskInput" placeholder="Добавить новую задачу...">
<button id="addTask">Добавить</button>
</div>
<ul id="taskList">
<!-- Здесь будут отображаться задачи -->
</ul>
<div class="controls">
<button id="clearCompleted">Очистить завершенные</button>
<div class="filters">
<button id="all" class="active">Все</button>
<button id="active">Активные</button>
<button id="completed">Завершенные</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>Этот HTML-код создает базовую структуру приложения с полем ввода, кнопками для добавления задачи и фильтрации, а также контейнером для списка задач. Теперь рассмотрим ключевые элементы этой структуры:
- container — основной контейнер, который будет стилизован для центрирования и ограничения ширины приложения
- input-group — группа элементов для добавления новой задачи
- taskList — контейнер, где будут отображаться все добавленные задачи
- controls — панель с кнопками управления (очистка завершенных задач и фильтрация)
После создания базовой HTML-структуры необходимо подготовить основу JavaScript-файла, который будет отвечать за функциональность нашего приложения:
document.addEventListener('DOMContentLoaded', () => {
// Получаем ссылки на HTML-элементы
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTask');
const taskList = document.getElementById('taskList');
const clearCompletedBtn = document.getElementById('clearCompleted');
const allBtn = document.getElementById('all');
const activeBtn = document.getElementById('active');
const completedBtn = document.getElementById('completed');
// Массив для хранения задач
let tasks = [];
// Основные функции приложения будут реализованы здесь
});Этот базовый каркас JS-кода обеспечивает получение ссылок на все необходимые элементы DOM и создает массив для хранения задач. В следующих разделах мы реализуем функции добавления, удаления, редактирования и фильтрации задач.
Стилизация ToDo списка с помощью CSS и Bootstrap
Профессионально оформленный интерфейс не только улучшает пользовательский опыт, но и повышает эффективность работы с приложением. Для стилизации нашего ToDo-списка мы можем использовать чистый CSS или интегрировать Bootstrap для более быстрой разработки. 🎨
Рассмотрим оба подхода, начиная с чистого CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}
.container {
max-width: 600px;
margin: 50px auto;
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #2c3e50;
}
.input-group {
display: flex;
margin-bottom: 20px;
}
#taskInput {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
font-size: 16px;
}
#addTask {
padding: 10px 15px;
background: #3498db;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
transition: background 0.3s ease;
}
#addTask:hover {
background: #2980b9;
}
#taskList {
list-style-type: none;
}
.task-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: #f9f9f9;
margin-bottom: 8px;
border-radius: 4px;
transition: all 0.3s ease;
}
.task-item:hover {
background: #f1f1f1;
transform: translateY(-2px);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.task-text {
flex: 1;
}
.completed .task-text {
text-decoration: line-through;
color: #888;
}
.task-actions button {
background: transparent;
border: none;
cursor: pointer;
margin-left: 5px;
font-size: 14px;
color: #555;
}
.controls {
display: flex;
justify-content: space-between;
padding-top: 15px;
border-top: 1px solid #eee;
margin-top: 20px;
}
.filters button {
background: transparent;
border: none;
cursor: pointer;
margin-left: 5px;
padding: 5px 10px;
border-radius: 3px;
color: #555;
}
.filters button.active {
background: #3498db;
color: white;
}
#clearCompleted {
background: transparent;
border: none;
color: #e74c3c;
cursor: pointer;
}
#clearCompleted:hover {
text-decoration: underline;
}Теперь давайте рассмотрим, как можно интегрировать Bootstrap для стилизации нашего приложения.
Для использования Bootstrap добавляем ссылку на CDN в head HTML-документа:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">И модифицируем нашу HTML-структуру для использования классов Bootstrap:
<div class="container py-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-body">
<h1 class="text-center mb-4">Мой список задач</h1>
<div class="input-group mb-4">
<input type="text" id="taskInput" class="form-control" placeholder="Добавить новую задачу...">
<button id="addTask" class="btn btn-primary">Добавить</button>
</div>
<ul id="taskList" class="list-group mb-4">
<!-- Здесь будут задачи -->
</ul>
<div class="d-flex justify-content-between">
<button id="clearCompleted" class="btn btn-outline-danger btn-sm">Очистить завершенные</button>
<div class="btn-group">
<button id="all" class="btn btn-outline-secondary btn-sm active">Все</button>
<button id="active" class="btn btn-outline-secondary btn-sm">Активные</button>
<button id="completed" class="btn btn-outline-secondary btn-sm">Завершенные</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>| Компонент | Чистый CSS | Bootstrap |
|---|---|---|
| Скорость разработки | Медленнее, требует написания всех стилей | Быстрее, благодаря готовым компонентам |
| Размер файлов | Меньше, только необходимые стили | Больше, включает всю библиотеку |
| Кастомизация | Полная свобода дизайна | Ограничена рамками фреймворка |
| Кроссбраузерность | Требует дополнительного тестирования | Обеспечивается фреймворком |
| Поддержка адаптивности | Требует ручной настройки | Встроенная система сеток |
В зависимости от ваших предпочтений и опыта работы с CSS, выберите наиболее подходящий подход к стилизации. Для новичков Bootstrap может быть более удобным вариантом, в то время как опытные разработчики могут предпочесть чистый CSS для полного контроля над стилями.
Добавление функциональности в список дел на JS
Превращаем статичную HTML-структуру в интерактивное приложение с помощью JavaScript. На этом этапе мы реализуем основные функции для управления задачами: добавление, удаление, отметку о выполнении и фильтрацию. ⚙️
Начнем с добавления новой задачи в список:
// Функция для добавления новой задачи
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === '') return;
const task = {
id: Date.now(),
text: taskText,
completed: false,
createdAt: new Date().toISOString()
};
tasks.push(task);
renderTasks();
taskInput.value = '';
taskInput.focus();
}
// Обработчик нажатия кнопки добавления
addTaskBtn.addEventListener('click', addTask);
// Обработчик нажатия Enter в поле ввода
taskInput.addEventListener('keyup', (e) => {
if (e.key === 'Enter') {
addTask();
}
});Теперь реализуем функцию отображения задач:
// Функция для отображения задач
function renderTasks(filterType = 'all') {
taskList.innerHTML = '';
let filteredTasks = tasks;
// Применяем фильтрацию
if (filterType === 'active') {
filteredTasks = tasks.filter(task => !task.completed);
} else if (filterType === 'completed') {
filteredTasks = tasks.filter(task => task.completed);
}
// Создаем HTML-элементы для каждой задачи
filteredTasks.forEach(task => {
const li = document.createElement('li');
li.className = `task-item ${task.completed ? 'completed' : ''}`;
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = task.completed;
checkbox.addEventListener('change', () => toggleTaskStatus(task.id));
const textSpan = document.createElement('span');
textSpan.className = 'task-text';
textSpan.textContent = task.text;
textSpan.addEventListener('dblclick', () => editTask(task.id));
const deleteBtn = document.createElement('button');
deleteBtn.innerHTML = '❌';
deleteBtn.addEventListener('click', () => deleteTask(task.id));
const taskActions = document.createElement('div');
taskActions.className = 'task-actions';
taskActions.appendChild(deleteBtn);
li.appendChild(checkbox);
li.appendChild(textSpan);
li.appendChild(taskActions);
taskList.appendChild(li);
});
}Далее реализуем функции для управления задачами:
// Функция для переключения статуса задачи
function toggleTaskStatus(taskId) {
tasks = tasks.map(task => {
if (task.id === taskId) {
return { ...task, completed: !task.completed };
}
return task;
});
renderTasks();
}
// Функция для удаления задачи
function deleteTask(taskId) {
tasks = tasks.filter(task => task.id !== taskId);
renderTasks();
}
// Функция для редактирования задачи
function editTask(taskId) {
const task = tasks.find(t => t.id === taskId);
if (task) {
const newText = prompt('Редактировать задачу:', task.text);
if (newText !== null && newText.trim() !== '') {
tasks = tasks.map(t => {
if (t.id === taskId) {
return { ...t, text: newText.trim() };
}
return t;
});
renderTasks();
}
}
}
// Функция для очистки завершенных задач
clearCompletedBtn.addEventListener('click', () => {
tasks = tasks.filter(task => !task.completed);
renderTasks();
});
// Обработчики для фильтров
allBtn.addEventListener('click', () => {
setActiveFilter(allBtn);
renderTasks('all');
});
activeBtn.addEventListener('click', () => {
setActiveFilter(activeBtn);
renderTasks('active');
});
completedBtn.addEventListener('click', () => {
setActiveFilter(completedBtn);
renderTasks('completed');
});
// Функция для установки активного фильтра
function setActiveFilter(activeButton) {
[allBtn, activeBtn, completedBtn].forEach(btn => {
btn.classList.remove('active');
});
activeButton.classList.add('active');
}Сергей Климов, разработчик фронтенда
В работе над крупным проектом я заметил, что наша команда тратит много времени на управление задачами через корпоративную систему, которая не соответствовала нашему рабочему процессу. Я разработал простое ToDo-приложение на JavaScript с дополнительными функциями для командной работы.
Приложение позволяло назначать задачи разным членам команды, устанавливать зависимости между задачами и автоматически отправлять уведомления о приближающихся сроках. Самым ценным оказалась функция приоритизации, которая автоматически сортировала задачи по срочности и важности.
После внедрения приложения время на управление задачами сократилось на 40%, а прозрачность процессов значительно улучшилась. Руководители получили четкое представление о загрузке команды, что помогло оптимизировать распределение ресурсов.
Сохранение задач в локальном хранилище браузера
Локальное хранилище браузера (localStorage) позволяет сохранять данные между сессиями без необходимости использования серверной части. Это идеальное решение для персонального списка задач, который должен сохранять состояние даже после закрытия браузера. 💾
Реализуем функции для работы с локальным хранилищем:
// Функция для сохранения задач в localStorage
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// Функция для загрузки задач из localStorage
function loadTasks() {
const savedTasks = localStorage.getItem('tasks');
if (savedTasks) {
tasks = JSON.parse(savedTasks);
renderTasks();
}
}
// Модифицируем существующие функции для сохранения изменений
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === '') return;
const task = {
id: Date.now(),
text: taskText,
completed: false,
createdAt: new Date().toISOString()
};
tasks.push(task);
saveTasks(); // Сохраняем после добавления
renderTasks();
taskInput.value = '';
taskInput.focus();
}
function toggleTaskStatus(taskId) {
tasks = tasks.map(task => {
if (task.id === taskId) {
return { ...task, completed: !task.completed };
}
return task;
});
saveTasks(); // Сохраняем после изменения статуса
renderTasks();
}
function deleteTask(taskId) {
tasks = tasks.filter(task => task.id !== taskId);
saveTasks(); // Сохраняем после удаления
renderTasks();
}
function editTask(taskId) {
const task = tasks.find(t => t.id === taskId);
if (task) {
const newText = prompt('Редактировать задачу:', task.text);
if (newText !== null && newText.trim() !== '') {
tasks = tasks.map(t => {
if (t.id === taskId) {
return { ...t, text: newText.trim() };
}
return t;
});
saveTasks(); // Сохраняем после редактирования
renderTasks();
}
}
}
clearCompletedBtn.addEventListener('click', () => {
tasks = tasks.filter(task => !task.completed);
saveTasks(); // Сохраняем после очистки завершенных
renderTasks();
});
// Загружаем задачи при инициализации приложения
document.addEventListener('DOMContentLoaded', loadTasks);Когда мы работаем с localStorage, важно помнить о его ограничениях и особенностях:
- Лимит хранения — обычно около 5MB на домен
- Данные хранятся только как строки, поэтому требуется сериализация/десериализация
- Данные доступны только на одном устройстве и в одном браузере
- Нет автоматической синхронизации между устройствами
- Данные могут быть очищены пользователем или браузером
Для более продвинутого управления хранением данных можно реализовать дополнительные функции:
// Функция для экспорта задач в JSON-файл
function exportTasks() {
const data = JSON.stringify(tasks, null, 2);
const blob = new Blob([data], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'tasks-backup-' + new Date().toISOString().slice(0, 10) + '.json';
a.click();
URL.revokeObjectURL(url);
}
// Функция для импорта задач из JSON-файла
function importTasks(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
try {
const importedTasks = JSON.parse(e.target.result);
if (Array.isArray(importedTasks)) {
tasks = importedTasks;
saveTasks();
renderTasks();
alert('Задачи успешно импортированы!');
} else {
alert('Некорректный формат файла!');
}
} catch(error) {
alert('Ошибка при импорте задач: ' + error.message);
}
};
reader.readAsText(file);
}
}Добавление возможностей экспорта и импорта задач значительно повышает полезность приложения, позволяя пользователям создавать резервные копии данных и переносить их между устройствами или браузерами.
Ищете свое место в IT? Не знаете, какое направление выбрать? Тест на профориентацию от Skypro поможет определить ваши сильные стороны и подскажет, какая специальность в разработке подойдет именно вам. Всего за несколько минут вы узнаете, готовы ли вы к карьере JavaScript-разработчика, или, возможно, вам стоит обратить внимание на другие направления. Пройдите тест сейчас и сделайте первый шаг к созданию не только ToDo-приложений, но и полноценных коммерческих проектов!
Создание собственного ToDo-приложения на JavaScript — это не просто учебный проект, а первый шаг к пониманию архитектуры современных веб-приложений. Овладев базовыми принципами управления состоянием, взаимодействия с DOM и хранения данных, вы получаете фундамент для разработки более сложных систем. Главная ценность процесса заключается не столько в конечном продукте, сколько в опыте, который останется с вами навсегда. Возможно, ваш следующий проект уже не будет называться "список задач" — это будет полноценная система управления проектами, планировщик бюджета или персональный органайзер, но принципы останутся теми же.