Цели
Реализуйте сайт, в котором пользователь может составлять список своих целей и путей их достижения.
Основные возможности проекта
- Таблица целей с названием, планируемой датой и списком шагов.
- Управление целями: создание, редактирование, удаление, отметка выполненными.
- Управление шагами: создание, редактирование, удаление, отметка сделанными.
- Данные хранятся в localStorage.
Главная страница
На странице должны быть размещены:
- Кнопка "Добавить цель".
- Таблица со списком всех целей.
Таблица целей
Каждая цель в таблице должна содержать:
- Название цели.
- Планируемую дату.
- Список шагов для осуществления.
- Статус (активная, выполнена).
- Кнопки: редактировать, удалить, отметить выполненной.
При отметке цели выполненной она меняет стиль (зачеркивается или становится серой). При этом все шаги также автоматически отмечаются сделанными.
Добавление цели
При нажатии на кнопку "Добавить цель" открывается форма с полями:
- Название цели (инпут, обязательное).
- Планируемая дата (инпут date).
- Кнопка "Сохранить".
Редактирование цели
При нажатии на кнопку "Редактировать" открывается форма с текущими данными цели. После редактирования и нажатия на кнопку "Сохранить" запись обновляется.
Удаление цели
При нажатии на кнопку "Удалить" появляется подтверждение (confirm), после чего цель и все её шаги удаляются из таблицы.
Отметка цели выполненной
При нажатии на кнопку "Выполнена" цель помечается как выполненная. Все шаги этой цели также автоматически отмечаются сделанными. Повторное нажатие возвращает цель в активное состояние.
Управление шагами
Под каждой целью должен быть список шагов. Каждый шаг должен содержать:
- Название шага.
- Статус (сделан или нет).
- Кнопки: редактировать, удалить, отметить сделанным.
Добавление шага
Под списком шагов должна быть форма для добавления нового шага:
- Поле для ввода названия шага (инпут).
- Кнопка "Добавить шаг".
Редактирование шага
При нажатии на кнопку "Редактировать" текст шага становится редактируемым (заменяется на инпут с текущим текстом). После нажатия Enter или потери фокуса текст обновляется.
Удаление шага
При нажатии на кнопку "Удалить" появляется подтверждение (confirm), после чего шаг удаляется из списка.
Отметка шага сделанным
При нажатии на чекбокс или кнопку "Сделано" шаг помечается как сделанный. Визуально шаг меняет стиль (перечеркивание). Если все шаги цели отмечены, цель автоматически помечается как выполненная.
Хранение данных
Все цели и шаги должны храниться в локальном хранилище браузера (localStorage). При загрузке страницы данные загружаются из хранилища, при изменении - сохраняются обратно.
Дополнительные возможности
- Фильтр: показывать только активные или только выполненные цели.
- Прогресс выполнения каждой цели (процент выполненных шагов).