Трекер месяц без сладостей
Реализуйте трекер, в котором пользователь на месяц отказывается от употребления сладостей и отмечает каждый день без привычки.
Основные возможности проекта
- Список из 30 дат (дней месяца).
- Ежедневный выбор: "Ел сладости" или "Не ел сладости".
- Зачеркивание дней, когда пользователь не ел сладости.
- Поздравление при успешном прохождении всех 30 дней.
- Сброс при пропуске дня (отсчет начинается сначала).
- Данные хранятся в localStorage.
Главная страница
На странице должны быть размещены:
- Заголовок с номером дня в трекере.
- Список из 30 дат (дней).
- Блок с текущим статусом (дней пройдено / осталось).
- Кнопки для отметки сегодняшнего дня: "Ел сладости" и "Не ел сладости".
Начало трекера
При первом заходе или после сброса запускается отсчет 30 дней. Список из 30 дат заполняется начиная с текущей даты.
Отметка дня
Пользователь должен ежедневно заходить на сайт и отмечать сегодняшний день нажатием на одну из кнопок:
- "Не ел сладости" - день зачеркивается и считается успешно пройденным.
- "Ел сладости" - день не зачеркивается, трекер считается проваленным.
Каждый день можно отметить только один раз. Отмечать можно только текущий день (нельзя отметить будущие дни).
Список дат
Список из 30 дат отображается в виде сетки или списка. Каждая дата показывает:
- Число месяца.
- День недели.
- Если день зачеркнут - он зеленого цвета с зачеркиванием.
- Если день не зачеркнут и наступил - красный цвет.
- Будущие дни - серый цвет (недоступны для отметки).
Успешное прохождение
Как только все 30 дней будут зачеркнуты, трекер считается пройденным. Сайт должен:
- Вывести поздравление (например, "Поздравляем! Вы успешно прошли месяц без сладостей! 🎉").
- Показать красивую картинку или анимацию.
- Предложить начать заново или поделиться результатом.
Пропуск дня
Если пользователь нажал "Ел сладости" или пропустил день (не отметил), трекер считается проваленным:
- Все текущие отметки сбрасываются.
- Отсчет начинается сначала.
Хранение данных
Все данные (список дат, отметки, дата начала) хранятся в локальном хранилище браузера (localStorage). При перезагрузке страницы данные восстанавливаются.
Дополнительные возможности
- Показ текущего дня в списке (подсветка).
- Статистика: сколько дней пройдено, сколько осталось.