BananaMaster

5 Твій Перший Сайт за 1 Урок: Список завдань та Калькулятор з AI

Якщо щось забули — натисни для переходу на урок

🧮 Домашнє завдання — Калькулятор

Ти вже вмієш працювати з AI — тепер застосуй це на практиці. Спочатку попроси AI згенерувати готовий калькулятор, потім виконай 20 завдань щоб покращувати його одне за одним.

З чого почати

Крок 0 — Попроси AI створити калькулятор

Перед початком завдань — попроси AI згенерувати базовий калькулятор. Використай цей промпт:

Зроби мені калькулятор в одному HTML-файлі. Гарний дизайн, темний фон. Кнопки: цифри 0–9, крапка, плюс, мінус, помножити, ділити, дорівнює та очистити (AC). Тільки HTML, CSS та JS.

🎨 Зовнішній вигляд 1–4

Змінити колір кнопок операторів

Кнопки +, −, ×, ÷ та = мають бути іншого кольору — наприклад помаранчевого або синього. Так їх одразу видно серед цифр.

Запитай AIЗроби кнопки операторів (+, −, ×, ÷, =) іншого кольору, щоб вони виділялися серед цифрових кнопок.

Додати заголовок калькулятора

Над кнопками має бути заголовок, наприклад "Мій калькулятор". Можна написати будь-яку назву.

Запитай AIДодай заголовок "Мій калькулятор" над дисплеєм — гарний, що пасує до решти дизайну.

Змінити загальний стиль на свій смак

Зміни фон сторінки, шрифт або border-radius кнопок. Зроби так, як тобі подобається — це твій калькулятор.

Запитай AIПерестилізуй калькулятор: зроби фон темно-фіолетовим, кнопки більш заокругленими, додай легку тінь.

Анімація натискання кнопки

При натисканні кнопка має злегка "потонути". Це робить калькулятор живим та приємним у використанні.

Запитай AIДодай анімацію натискання на кнопки: при кліку вони злегка стискаються і повертаються назад.

🌙 Темна та Світла Тема 5–6

Перемикання теми

Додай кнопку 🌙 / ☀️ — перемикає між темним та світлим виглядом. Все плавно змінює колір при кліку.

Запитай AIДодай кнопку перемикання темної/світлої теми. При натисканні 🌙 — стає світлим, при натисканні ☀️ — знову темним.

Тема зберігається

Якщо вибрав темну тему та перезавантажив сторінку — темна тема має залишитися. Браузер має пам'ятати вибір.

Запитай AIЗбережи вибрану тему, щоб вона відновлювалась після перезавантаження сторінки.

🛡️ Захист від помилок 7–9

Ділення на нуль — показати "Помилка"

Зараз калькулятор показує "Infinity" при діленні на нуль. Заміни це на чітке повідомлення "Помилка" червоним кольором.

Запитай AIПри діленні на нуль замість Infinity показуй слово "Помилка" червоним на дисплеї. Натискання AC очищає помилку.

Заборонити дві крапки в одному числі

Якщо число вже має крапку і натиснути її ще раз — нічого не має відбуватися. Одна крапка на число.

Запитай AIЗабороні введення другої крапки, якщо поточне число вже має одну. Натискання крапки просто ігнорується.

Кнопка ⌫ — видалити останній символ

Додай кнопку ⌫ (backspace). Натисни — видаляється останній введений символ. Якщо нічого не залишилось — показуй "0".

Запитай AIДодай кнопку ⌫, яка видаляє останній символ з дисплею. Якщо символів не залишилось — показуй "0".

➕ Нові кнопки 10–11

Кнопка % — обчислює відсотки

Додай кнопку %. Приклад: введи 200 + 10% = та отримай 220. Корисно для розрахунку знижок.

Запитай AIДодай кнопку % — обчислює відсоток від першого числа. Приклад: 200 + 10% = 220.

Кнопка "Скопіювати результат"

Додай маленьку кнопку 📋 поруч з дисплеєм. Натисни — результат копіюється в буфер обміну. На секунду з'являється "Скопійовано!".

Запитай AIДодай маленьку кнопку-іконку поруч з дисплеєм, що копіює число в буфер обміну. Після натискання показуй повідомлення "Скопійовано!" на 2 секунди.

📋 Історія обчислень 12–16

Показувати останні 5 обчислень

Під калькулятором з'являється список: останні 5 прикладів та їх результати. Наприклад: "2 + 3 = 5".

Запитай AIПід калькулятором додай список останніх 5 обчислень. Кожен рядок: "вираз = результат".

Історія зберігається після перезавантаження

Закрив вкладку, відкрив знову — історія на місці. Браузер пам'ятає всі обчислення.

Запитай AIЗбережи історію обчислень, щоб вона не зникала при перезавантаженні сторінки.

Показувати час кожного обчислення

Поруч з кожним записом в історії додай час, коли було виконано обчислення. Наприклад: "14:32".

Запитай AIДодай час до кожного запису в історії — показуй години та хвилини, коли було виконано обчислення.

Клік на запис — вставляє результат

Клікнув на запис в історії — його результат з'являється на дисплеї. Можна одразу продовжувати обчислення.

Запитай AIПри кліку на запис в історії вставляй його результат на дисплей калькулятора.

Кнопка очищення історії з підтвердженням

Додай кнопку "Очистити історію". При кліку з'являється попап: "Ти впевнений?" з кнопками "Так" та "Ні".

Запитай AIДодай кнопку "Очистити історію". При натисканні показуй модальне вікно з кнопками "Так" та "Ні". Очищай тільки якщо натиснуто "Так".

⌨️ Зручність 17–20

Підтримка клавіатури

Можна рахувати без кліків мишею: цифри з клавіатури, Enter = обчислити, Escape = скинути, Backspace = видалити символ.

Запитай AIДодай підтримку клавіатури: цифри та оператори вводяться з клавіатури, Enter обчислює результат, Escape скидає, Backspace видаляє символ.

Розмір цифр на дисплеї

Додай дві маленькі кнопки A+ та A−. Натисни A+ — цифри на дисплеї стають більшими. A− — меншими.

Запитай AIДодай кнопки A+ та A−, які збільшують та зменшують розмір шрифту на дисплеї. Збережи розмір у localStorage.

Добре виглядає на мобільному

Відкрий калькулятор на телефоні або звузь вікно браузера — має бути зручно. Великі кнопки, все влазить на екран.

Запитай AIЗроби адаптивний дизайн: на маленьких екранах (телефон) калькулятор має заповнювати весь екран з великими зручними кнопками.

Кнопка "Інженерний режим"

Додай перемикач, що розкриває додатковий рядок кнопок: √ (квадратний корінь), x² (квадрат). Натисни знову — рядок ховається.

Запитай AIДодай кнопку "Інженерний". При натисканні з'являється додатковий рядок з кнопками √ та x². При повторному натисканні рядок ховається.