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