Создайте простое приложение To‑Do по шагам (простым языком)

Что мы собираемся сделать (и чему вы научитесь)

Когда в этом руководстве я говорю «приложение», я имею в виду маленькое веб‑приложение: одну страницу, которую вы открываете в браузере, и которая реагирует на клики и ввод. Никаких установок, аккаунтов или тяжёлой настройки — просто простой проект, который можно запускать локально.

Цель (что будет у конечного приложения)

К концу у вас будет приложение‑to‑do, которое умеет:

• Добавлять задачи из поля ввода
• Отмечать задачи как выполненные (чтобы видеть, что сделано)
• Удалять задачи, которые больше не нужны
• Хранить задачи после обновления страницы с помощью localStorage (чтобы при закрытии вкладки всё не пропадало)

Оно не будет идеальным или «корпоративным», и это нормально. Это проект для новичков, который учит базовым вещам без множества инструментов.

Чему вы научитесь (простым языком)

Вы будете строить приложение шаг за шагом и разберётесь с основами фронтенда:

• HTML для структуры страницы (поле ввода, кнопка, список)
• CSS чтобы сделать страницу читаемой и приятной в использовании
• JavaScript чтобы обрабатывать клики, создавать элементы списка и обновлять страницу
• localStorage чтобы сохранять и загружать задачи, чтобы они не пропадали
• Базовое тестирование и отладка (находить мелкие ошибки и исправлять их)

Что нужно перед началом

Держите всё просто. Понадобится только:

• Компьютер (Windows, Mac или Linux)
• Современный браузер (Chrome, Firefox, Safari или Edge)
• Редактор кода (VS Code популярен, но подойдёт любой)

Если вы умеете создавать папку и редактировать файлы — вы готовы.

Шаг 1: Определите цель и функциональность приложения

Прежде чем писать код, решите, что для вас будет означать «успех». В этом руководстве мы создаём одно маленькое приложение с одной ясной задачей: помочь отслеживать дела.

Сформулируйте одно предложение‑цель

Напишите одно предложение, которое будете видеть перед собой при разработке:

«Это приложение позволяет добавлять задачи в список, чтобы я их не забыл.»

И всё. Если захотите добавить календари, напоминания, теги или аккаунты — отложите это на потом.

Обязательное vs приятное в дополнение

Составьте два коротких списка:

Обязательное (для этого проекта):

• Добавлять задачу (ввести текст, нажать кнопку)
• Видеть задачи в списке
• Помечать задачу как выполненную
• Удалять задачу
• Сохранять задачи после обновления страницы (позже используем localStorage)

Желательно (не нужно сегодня): сроки, приоритеты, категории, поиск, drag-and-drop, синхронизация с облаком.

Ограничивая «обязательное», вы действительно закончите проект.

Описываем экран простыми словами

Это приложение может быть на одной странице с:

• Полем ввода («Добавить задачу…») и кнопкой «Добавить»
• Списком задач под ними
• У каждой задачи — переключатель «выполнено» и кнопка «удалить»

Определите, что значит «выполнено»

Будьте конкретны, чтобы не застрять:

• «Выполнено» = задача выглядит зачёркнутой (или посветлевшей) и остаётся в списке до удаления.

Когда это решено — можно создать файлы проекта.

Шаг 2: Настройте файлы проекта

Прежде чем писать код, создайте чистое «домашнее» пространство для приложения. Организация файлов с самого начала упростит дальнейшую работу.

1) Создайте папку проекта

Создайте папку с именем, например, todo-app. В ней будут все файлы проекта.

Внутри создайте три файла:

• index.html (структура страницы)
• styles.css (внешний вид)
• app.js (поведение и интерактивность)

Если система скрывает расширения, убедитесь, что файлы действительно имеют правильные расширения (частая ошибка — index.html.txt).

2) Откройте папку в редакторе и браузере

Откройте папку todo-app в редакторе (VS Code, Sublime и т. п.). Затем откройте index.html в браузере.

Возможно, страница пока пустая — это нормально. Добавим содержимое дальше.

3) Как вы будете видеть изменения

По умолчанию браузер не обновляет страницу автоматически (если вы не используете специальные инструменты).

Базовый цикл работы:

1. Сохранить файл в редакторе
2. Перейти в вкладку браузера
3. Обновить страницу (Refresh)

Если что‑то «не работает», первое, что стоит попробовать — обновить страницу.

Необязательно: простой локальный сервер (удобно, но не обязателен)

Можно открыть index.html двойным кликом, но локальный сервер иногда предотвращает странные проблемы (особенно при сохранении/загрузке файлов).

Простые опции:

• В VS Code установите расширение Live Server и нажмите «Go Live»
• Если установлен Python, можно в терминале внутри папки запустить:

python -m http.server

Затем откройте адрес, который напечатает сервер (часто http://localhost:8000).

Шаг 3: Постройте структуру страницы (HTML)

Теперь создадим каркас приложения. Этот HTML пока не сделает всё интерактивным — это будет в JavaScript — но он даёт классные точки, куда обращаться из кода.

Минимальный макет, который нам нужен

Нужно:

• Заголовок, чтобы сразу было понятно, что это за страница
• Поле ввода для текста задачи
• Кнопка Добавить для отправки задачи
• Область списка, где будут появляться задачи

Понятные id/классы упрощают жизнь: JavaScript сможет без путаницы найти нужные элементы.

Вставьте это в ваш index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>To‑Do App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main class="app" id="app">
      <h1 class="app__title" id="appTitle">My To‑Do List</h1>

      <form class="task-form" id="taskForm">
        <label class="task-form__label" for="taskInput">New task</label>
        <div class="task-form__row">
          <input
            id="taskInput"
            class="task-form__input"
            type="text"
            placeholder="e.g., Buy milk"
            autocomplete="off"
          />
          <button id="addButton" class="task-form__button" type="submit">
            Add
          </button>
        </div>
      </form>

      <ul class="task-list" id="taskList" aria-label="Task list"></ul>
    </main>

    <script src="app.js"></script>
  </body>
</html>

Это всё по структуре. Обратите внимание: мы использовали id="taskInput" и id="taskList" — именно с ними будет работать JavaScript.

Шаг 4: Сделайте интерфейс приятным (CSS)

Сейчас страница существует, но выглядит как документ. Немного CSS сделает её удобнее: отступы, читаемый текст и кнопки, по которым приятно кликать.

Начнём с простого центрированного контейнера

Центрированный блок удерживает внимание и не позволяет содержимому растягиваться на всю ширину экрана.

/* Basic page setup */
body {
  font-family: Arial, sans-serif;
  background: #f6f7fb;
  margin: 0;
  padding: 24px;
}

/* Centered app container */
.container {
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff;
  padding: 16px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

Сделаем задачи удобными для чтения

Каждая задача должна выглядеть как отдельная «строка» с комфортными отступами.

ul { list-style: none; padding: 0; margin: 16px 0 0; }

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e7e7ee;
  border-radius: 8px;
  margin-bottom: 10px;
}

.task-text { flex: 1; }

Добавим понятный вид для «выполненных» задач

Когда задача выполнена, её внешний вид должен меняться, чтобы это было видно сразу.

.done .task-text {
  text-decoration: line-through;
  color: #777;
  opacity: 0.85;
}

Согласуем стиль кнопок

Пусть кнопки выглядят однообразно и «как часть приложения».

button {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

button:hover { filter: brightness(0.95); }

Этого достаточно для приятного и простого интерфейса. Далее подключаем поведение через JavaScript.

Шаг 5: Добавление задач (основы JavaScript)

Теперь, когда на странице есть поле ввода, кнопка и список, заставим их что‑то делать. Цель простая: при вводе текста и нажатии Add (или Enter) появится новая задача в списке.

Привяжем кнопку и клавишу Enter

В app.js сначала получаем нужные элементы, затем слушаем два события: клик по кнопке и нажатие Enter в поле ввода.

const taskInput = document.querySelector('#taskInput');
const addBtn = document.querySelector('#addBtn');
const taskList = document.querySelector('#taskList');

function addTask() {
  const text = taskInput.value.trim();

  // Block empty tasks (including ones that are just spaces)
  if (text === '') return;

  const li = document.createElement('li');
  li.textContent = text;
  taskList.appendChild(li);

  // Clear the input and put the cursor back
  taskInput.value = '';
  taskInput.focus();
}

addBtn.addEventListener('click', addTask);

taskInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    addTask();
  }
});

Что это делает (простыми словами)

• Читает текст из поля и использует trim() чтобы убрать лишние пробелы в начале/конце.
• Останавливается, если задача пуста, чтобы не добавлять пустые элементы.
• Создаёт новый li, ставит в него текст и добавляет в список.
• Очищает поле и возвращает фокус, чтобы быстро вводить следующую задачу.

Если ничего не происходит, проверьте, совпадают ли id в HTML с селекторами в JavaScript — это частая ошибка у новичков.

Шаг 6: Отмечать выполненные и удалять задачи

Теперь, когда задачи можно добавлять, сделаем их управляемыми: можно пометить как выполненные и удалить.

Хранение задач как простых объектов

Вместо простых строк храните задачи в виде объектов. Это даёт каждой задаче идентичность и место для статуса «выполнено»:

• text: текст задачи
• done: true или false
• id: уникальный номер, чтобы находить и удалять нужную задачу

Пример:

let tasks = [
  { id: 1, text: "Buy milk", done: false },
  { id: 2, text: "Email Sam", done: true }
];

Добавим элементы управления «Выполнено» и «Удалить»

При рендере каждой задачи на странице добавляйте либо чекбокс, либо кнопку «Выполнено», плюс кнопку «Удалить».

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

Пример:

function toggleDone(id) {
  tasks = tasks.map(t => t.id === id ? { ...t, done: !t.done } : t);
  renderTasks();
}

function deleteTask(id) {
  tasks = tasks.filter(t => t.id !== id);
  renderTasks();
}

document.querySelector("#taskList").addEventListener("click", (e) => {
  const id = Number(e.target.dataset.id);
  if (e.target.matches(".toggle")) toggleDone(id);
  if (e.target.matches(".delete")) deleteTask(id);
});

В renderTasks():

• Добавьте data-id="${task.id}" к нужным кнопкам.
• Показывайте выполненные задачи визуально (например, добавляя класс .done).

Шаг 7: Сохраняем задачи, чтобы они оставались (localStorage)

Пока что список потеряется при обновлении страницы — потому что задачи хранятся только в памяти JavaScript, которая очищается при перезагрузке.

localStorage = маленькая «коробочка» в браузере

localStorage встроен в браузер. Это место, где можно хранить текст под ключом. Подойдёт новичкам: не нужен сервер или аккаунты.

Мы будем сохранять весь список задач как JSON‑строку и загружать её при открытии страницы.

1) Сохраняем после каждого изменения

После каждого добавления, пометки или удаления вызывайте saveTasks().

const STORAGE_KEY = "todo.tasks";

function saveTasks(tasks) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

Там, где вы обновляете массив tasks, вызывайте:

saveTasks(tasks);
renderTasks(tasks);

2) Загружаем при старте страницы (и рендерим)

При загрузке страницы прочитайте сохранённое значение. Если его нет — используйте пустой список.

function loadTasks() {
  const saved = localStorage.getItem(STORAGE_KEY);
  return saved ? JSON.parse(saved) : [];
}

let tasks = loadTasks();
renderTasks(tasks);

Готово: теперь приложение запоминает задачи после обновления страницы.

Совет: localStorage хранит только строки, поэтому JSON.stringify() превращает массив в текст, а JSON.parse() возвращает массив обратно.

Шаг 8: Тестирование и исправление распространённых багов

Тестирование — это самый быстрый способ превратить «работает у меня» в «работает всегда». Делаем быструю проверку после каждого небольшого изменения.

Быстрая проверка (60 секунд)

Пройдитесь по основному сценарию в таком порядке:

• Добавить задачу
• Пометить её выполненной
• Удалить её
• Обновить страницу (проверить, что UI ведёт себя как надо)

Если какой‑то шаг ломается — исправляйте прежде, чем добавлять новые функции. Мелкие баги быстро накладываются.

Проверьте крайние случаи, которые ломают приложения новичков

Реальные люди вводят всё подряд — посмотрите, как приложение реагирует:

• Очень длинный текст (не вылазит ли он за пределы?)
• Повторяющиеся задачи (удаляется ли правильная?)
• Пустой ввод (не добавляет ли пустую задачу?)

Частое решение — блокировать пустые задачи:

const text = input.value.trim();
addButton.disabled = text === "";

(Вызывайте это при каждом input и снова перед добавлением.)

Быстрый чеклист «ничего не происходит»

Если клики ничего не дают, чаще всего:

• Селектор не совпадает (id или класс в HTML и JS разные).
• Скрипт не загружается (неверное имя файла/путь, app.js не найден).
• Ошибка JavaScript останавливает выполнение остального кода.

Используйте консоль, чтобы найти причину

Когда поведение непонятно, логируйте:

console.log("Adding:", text);
console.log("Current tasks:", tasks);

Смотрите вкладку Console в инструментах разработчика на наличие ошибок (красный текст). После исправления удаляйте лишние логи, чтобы не засорять проект.

Шаг 9: Сделайте приложение удобным (доступность + мобильность)

Приложение можно считать «готовым», когда им удобно пользоваться реальным людям — на телефонах, с клавиатуры и с помощниками экрана (screen readers).

Удобство на мобильных устройствах

На маленьких экранах мелкие кнопки раздражают. Дайте кликабельным элементам достаточно места:

• Увеличьте отступы у кнопок (цель — около 44px по высоте)
• Добавьте расстояние между кнопками «Выполнено» и «Удалить», чтобы не промахнуться
• На мобильном поле ввода пусть занимает всю ширину — так удобнее печатать

В CSS увеличение padding, font-size и gap даёт лучший эффект.

Метки и ARIA (что и зачем)

Экранные читалки нуждаются в понятных названиях для элементов управления.

• Поле ввода должно иметь реальную метку <label> (лучший вариант). Если вы не хотите её показывать, можно визуально скрыть через CSS, но оставить в HTML.
• Кнопки с иконками (например, урна) должны иметь aria-label="Delete task", чтобы у пользователя был контекст.

Это помогает людям понимать назначение элементов без визуального восприятия.

Поддержка клавиатуры: Tab + Enter

Убедитесь, что приложение можно использовать без мыши:

• Можно перейти по Tab к полю ввода и кнопкам
• Нажатие Enter в поле должно добавлять задачу (используйте <form>, чтобы Enter работал по умолчанию)
• После добавления можно возвращать фокус в поле, чтобы быстро вводить следующие задачи

Читаемость: контраст и размер шрифта

Используйте читаемый базовый размер (16px хорошее начало) и контрастные цвета (тёмный текст на светлом фоне либо наоборот). Не используйте только цвет для обозначения «выполнено» — добавьте зачёркивание или другой явный стиль.

Шаг 10: Приведите код в порядок

Когда всё работает, потратьте 10–15 минут на «уборку». Это упростит будущие правки и поможет понять проект через некоторое время.

Простая структура папок

Держите всё небольшим и предсказуемым:

• /index.html — структура страницы
• /styles.css — внешний вид
• /app.js — поведение (добавление, пометка, удаление, сохранение/загрузка)
• /README.md — заметки для «будущего вас»

Если предпочитаете подкаталоги, можно:

• /css/styles.css
• /js/app.js

Только убедитесь, что пути в <link> и <script> совпадают с реальными файлами.

Сделайте JavaScript более читаемым

Несколько простых приёмов:

• Разбираемые имена: taskInput, taskList, saveTasks()
• Держите функции маленькими: одна функция = одна задача
• Краткие комментарии только там, где код неочевиден

Например, удобно читать:

• renderTasks(tasks)
• addTask(text)
• toggleTask(id)
• deleteTask(id)

Добавьте небольшой README

В README.md можно кратко написать:

• Что делает проект (to‑do список, сохраняющий задачи)
• Как его запустить (открыть index.html в браузере)
• Опционально: известные ограничения

Сделайте резервную копию

Хотя бы заархивируйте папку после важного шага (например, «localStorage работает»). Для истории версий подойдёт Git, но это опционально. Одна резервная копия спасёт от случайного удаления.

Шаг 11: Опубликуйте приложение и поделитесь им

Опубликовать — значит поместить файлы (HTML, CSS, JS) в общий доступ, чтобы другие могли открыть ссылку и пользоваться вашим приложением. Поскольку это статический сайт (всё выполняется в браузере), проще всего разместить бесплатно.

Вариант 1: GitHub Pages (хорошо для статических сайтов)

Коротко:

1. Создайте аккаунт на GitHub (если нет).
2. Сделайте новый репозиторий и загрузите файлы (или запушьте через Git).
3. В репозитории откройте Settings → Pages.
4. Выберите ветку для публикации (обычно main) и папку (обычно /).
5. Сохраните — GitHub выдаст публичный URL.

Если у вас несколько файлов, проверьте, что имена совпадают (например, styles.css vs style.css).

Вариант 2: Netlify или Vercel (просто перетащить)

Если нужен самый простой путь:

1. Зарегистрируйтесь в Netlify или Vercel.
2. Найдите «Deploy / Add New Project».
3. Перетащите папку проекта или подключите репозиторий GitHub.
4. Дождитесь завершения загрузки/билда.
5. Откройте сгенерированный URL и проверьте.

Быстрая проверка перед отправкой ссылки

• Обновите страницу: задачи должны остаться (localStorage работает).
• Добавьте, отметьте, удалите задачу: кнопки не должны ломаться.
• Откройте на мобильном: ничего не должно вылезать за границы.

Когда всё проходит — отправьте ссылку другу и попросите протестировать: взгляд со стороны быстро выявит проблемы.

Дальше: простые улучшения, которые можно попробовать

Вы уже сделали рабочее приложение. Если хотите продолжать, эти улучшения дают реальные преимущества и учат новым паттернам.

1) Редактирование текста задачи

Добавьте кнопку «Редактировать» рядом с каждой задачей. По клику заменяйте метку на поле ввода (заполненное текущим текстом) и добавляйте кнопки «Сохранить» и «Отмена».

Совет: храните задачи как массив объектов (id, text). Редактирование: найти задачу по id, обновить text, перерисовать и сохранить.

2) Фильтры: Все / Активные / Выполненные

Добавьте три кнопки: All, Active, Done.

Храните фильтр в переменной, например currentFilter = 'all'. При рендере показывайте:

• all: все задачи
• active: только невыполненные
• done: только выполненные

3) Сроки или простые категории

Небольшие расширения:

• Добавьте необязательную дату срока (YYYY-MM-DD) и показывайте её рядом с задачей
• Или добавьте категорию («Work / Home / School») через выпадающий список

Даже одно дополнительное поле учит, как обновлять модель данных и UI.

4) Позже: перейти от localStorage к бэкенду

Когда будете готовы, идея в том, чтобы вместо localStorage отправлять задачи на API (сервер) через fetch(). Сервер сохранит их в базе, и они будут синхронизироваться между устройствами.

Если хотите попробовать без полной переделки, платформы типа Koder.ai помогут прототипировать «следующую версию»: опишите эндпоинты, базу данных и изменения UI в чате, итеративно доработайте и экспортируйте исходники (React/Go/PostgreSQL) для изучения и кастомизации.

5) Хороший следующий проект для новичка

Попробуйте сделать заметки (с поиском) или трекер привычек (ежедневные отметки). Они используют те же навыки: рендер списка, редактирование, сохранение и простой дизайн UI.