Вибір має зберігатися в кукі, щоб при повторному завантаженні сторінки тема автоматично застосовувалася, а відповідна радіо-кнопка була активною та в фокусі.
Вимоги до реалізації:
-
Інтерфейс вибору теми:
- Створіть дві радіо-кнопки з однаковим атрибутом
name="theme":- Перша: значення
value="dark", мітка "Темна тема" (тло — чорне або сіре, текст — світлий для читабельності). - Друга: значення
value="light", мітка "Світла тема" (тло — біле, текст — темний для читабельності).
- Перша: значення
- Розмістіть їх у зручній формі або блоці для користувача.
- Створіть дві радіо-кнопки з однаковим атрибутом
-
Обробка вибору:
- При натисканні на радіо-кнопку:
- Збережіть значення (
darkабоlight) у кукі з назвоюtheme(термін дії — наприклад, 7 днів). - Негайно застосуйте обрану тему до сторінки: змініть колір фону
<body>та, за потреби, тексту.
- Збережіть значення (
- При натисканні на радіо-кнопку:
-
Завантаження сторінки:
- При завантаженні (події
load):- Прочитайте значення кукі
theme. - Якщо кукі існує:
- Застосуйте відповідну тему (темну або світлу).
- Встановіть
checkedдля відповідної радіо-кнопки. - Переведіть фокус (
focus()) на цю радіо-кнопку.
- Якщо кукі відсутнє, за замовчуванням оберіть світлу тему, встановіть її, поставте
checkedна відповідну кнопку та фокус на ній.
- Прочитайте значення кукі
- При завантаженні (події
Додаткові рекомендації:
- Використовуйте Java-код сервлета для роботи з кукі (і звісно, трохи JavaScript).
- Тестуйте: закрийте вкладку, відкрийте заново — тема має відновлюватися.
- Додайте приклад контенту на сторінці, щоб демонструвати зміну теми.
Очікуваний результат: Повнофункціональна сторінка, де користувач може обрати та зберегти тему, а при перезавантаженні все автоматично відновлюється.