L15. Перший застосунок «Мій день»

Створимо сторінку з трьома справами, прапорцями й лічильником виконаного. Орієнтовно потрібно 45–60 хвилин, навички збереження файлів з уроку 12 та Examples_UA.zip. Зараз перевіримо дії на комп’ютері; збереження позначок і встановлення на телефон розглянемо далі.

Сайт Олени показує текст. Застосунок ще й реагує: ви ставите позначку, а число змінюється. Цю поведінку задає JavaScript — мова програмування, яку виконує браузер. HTML залишаємо для елементів сторінки, CSS — для вигляду.

На занятті

Викладач покаже, як один прапорець змінює лічильник. Разом перевіримо послідовність 0 → 1 → 2 → 1 → 0 та спробуємо натискати підпис замість маленького квадрата.

Підготуйте проєкт

• У Documents\AI-practice створіть папку my-day. Справи прикладу: «Прочитати 10 сторінок», «Вийти на прогулянку», «Прибрати стіл». Список фіксований; редагування завдань у цій версії немає.
• Розпакуйте Examples_UA.zip через Видобути все. Для роботи за готовим прикладом скопіюйте вміст папки my-day у власну однойменну папку. Якщо створюєте код із ШІ, візьміть звідти лише icon-192.png і icon-512.png: це готові значки для наступного встановлення.
• Якщо скопіювали готовий застосунок, перейдіть до кроку 5. Для власної генерації у новій розмові з ШІ надішліть наведений запит. Запит описує весь застосунок. У ньому «логічне значення» — це так або ні, localStorage — сховище позначок у браузері, а кеш — копії файлів для роботи без мережі. Деталі збереження й встановлення розберемо в уроках 16–17.

> [PROMPT]

> Створи простий застосунок «Мій день» українською без бібліотек. Дай повні index.html, styles.css, app.js, manifest.webmanifest, sw.js окремими блоками. Три справи: «Прочитати 10 сторінок», «Вийти на прогулянку», «Прибрати стіл». Потрібні справжні checkbox із підписами, лічильник «Виконано 0 з 3», кнопка «Почати новий день», що одразу знімає всі позначки. Зберігай три логічні значення в localStorage після дії, перевіряй їх при читанні; при помилці покажи зрозуміле повідомлення. Для file: вимкни збереження й поясни, що це перегляд. Додай офлайн-кеш усіх семи файлів через service worker, відносні шляхи для GitHub Pages і manifest зі standalone. Файли icon-192.png та icon-512.png уже є. Показуй готовність офлайн лише після підготовки кешу. Без автоматичного скидання опівночі, входу, реклами й зовнішніх запитів. Поясни збереження кожного файлу, без команд термінала.

• Збережіть п’ять текстових файлів у my-day через Блокнот: Зберегти як → Усі файли → UTF-8, як в уроці 12. Не додавайте .txt. Два PNG — зображення, їх копіюють як файли, а не вставляють у Блокнот.

У папці мають бути index.html, styles.css, app.js, manifest.webmanifest, sw.js, icon-192.png, icon-512.png. Готовий ZIP містить ще README.md з поясненнями; браузеру він не потрібен. Призначення manifest і service worker розберемо в уроці 17.

Спробуйте дію

• Двічі клацніть index.html. Ви побачите «Мій день», три порожні прапорці й «Виконано 0 з 3». У готовому прикладі нижче є повідомлення про попередній перегляд файлу.
• Натисніть текст першої справи. Її прапорець має змінитися, а лічильник — показати «Виконано 1 з 3». Натискання на підпис зручніше, ніж прицілювання в маленький квадрат; HTML пов’язує їх елементом label.
• Позначте третю справу: очікуємо «Виконано 2 з 3». Натисніть першу ще раз: залишиться одна позначка й число 1.
• Натисніть Почати новий день. Усі позначки зникнуть, лічильник повернеться до нуля. Кнопка діє одразу; історії попередніх днів у цій версії немає. Для перевірки клавіатурою натискайте Tab до рамки на першому прапорці, потім пробіл. Прапорець має перемкнутися, а лічильник — показати 1.

[[VIS:b5_app_action]]

Під час натискання працює вже створений JavaScript. Нового запиту до ШІ для кожної позначки немає.

У index.html готового прикладу знайдіть цей рядок; це фрагмент HTML:

<script src="app.js" defer></script>

Він підключає JavaScript із сусіднього файлу. defer означає, що код почне працювати після прочитання HTML, коли прапорці вже існують на сторінці.

> [FIX]

> Прапорці перемикаються, але число завжди 0? Перевірте назву app.js і наведений рядок у HTML. Браузер уміє перемикати checkbox без JavaScript, але для перерахунку потрібен підключений код. Збережіть виправлення й оновіть сторінку.

Якщо натискання напису не перемикає прапорець, надішліть ШІ відповідний HTML: «Перевір зв’язок label із checkbox. Якщо використано for, його значення має збігатися з id прапорця. Виправ лише цей зв’язок». Збережіть виправлений HTML і повторіть натискання напису.

Практика вдома

• Скопіюйте папку my-day поруч під назвою my-day-label-home; якщо така є, додайте вільний номер. Відкрийте її index.html у Блокноті.
• Замініть лише видимий текст справи «Прочитати 10 сторінок» на «Прочитати 5 сторінок». Теги й назви файлів залиште. Збережіть і відкрийте копію в браузері.
• Натисніть новий підпис, потім кнопку нового дня. У копії створіть label-check.txt: запишіть, чи число змінилося з 0 на 1 і назад. Основний застосунок має залишитися незмінним.

Самотест

• Позначені перша й третя справи. Першу позначку зняли. Який лічильник має залишитися?
• Фокус стоїть на прапорці. Що має статися після натискання пробілу?
• Чи потрібен новий запит до ШІ, щоб перерахувати позначені справи?

Терміни

• JavaScript — мова, що задає поведінку нашої сторінки.
• Стан — поточні значення, наприклад три позначки справ.
• Подія — дія, на яку реагує код: натискання або зміна прапорця.