BananaMaster

5 Первый сайт за 1 урок: Todo List и Калькулятор с AI

Если что то забыли кликни для перехода на урок

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

Ты уже умеешь работать с ИИ — теперь используй его на практике. Сначала попроси ИИ сгенерировать готовый калькулятор, а затем последовательно выполни 20 заданий, улучшая его.

С чего начать

Шаг 0 — Попроси ИИ создать калькулятор

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

Сделай мне калькулятор в одном HTML-файле. Красивый дизайн, тёмный фон. Кнопки: цифры 0–9, запятая, плюс, минус, умножить, делить, равно и очистить (AC). Только HTML, CSS и JS.
🎨 Внешний вид 1–4
1

Поменяй цвет кнопок операций

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

Скажи ИИСделай кнопки операций (+, −, ×, ÷, =) другого цвета, чтобы они выделялись среди цифр.
2

Добавь название калькулятора

Над кнопками должен быть заголовок, например «Мой калькулятор». Можешь написать любое название.

Скажи ИИДобавь над дисплеем заголовок «Мой калькулятор» — красивый, в стиле остального дизайна.
3

Смени общий стиль на свой вкус

Поменяй фон страницы, шрифт или скругление кнопок. Сделай так, чтобы тебе нравилось — это твой калькулятор.

Скажи ИИПоменяй дизайн калькулятора: фон сделай тёмно-фиолетовым, кнопки — более скруглёнными, добавь лёгкую тень.
4

Анимация нажатия кнопок

Когда нажимаешь кнопку — она должна чуть-чуть «вдавливаться». Это делает калькулятор живым и приятным.

Скажи ИИДобавь анимацию нажатия на кнопки: при клике они слегка уменьшаются и возвращаются обратно.
🌙 Тёмная и светлая тема 5–6
5

Переключатель темы

Добавь кнопку 🌙 / ☀️ — она меняет тёмный вид на светлый и обратно. При нажатии всё плавно перекрашивается.

Скажи ИИДобавь кнопку переключения тёмной и светлой темы. При нажатии на 🌙 — становится светло, при нажатии на ☀️ — темно.
6

Тема сохраняется

Если выбрал тёмную тему и перезагрузил страницу — должна остаться тёмная. Браузер должен помнить выбор.

Скажи ИИСохраняй выбранную тему так, чтобы она восстанавливалась после перезагрузки страницы.
🛡️ Защита от ошибок 7–9
7

Деление на ноль — показывай «Ошибка»

Сейчас при делении на ноль калькулятор показывает «Infinity». Замени это на понятное сообщение «Ошибка» красным цветом.

Скажи ИИПри делении на ноль вместо Infinity покажи на дисплее слово «Ошибка» красным цветом. По нажатию AC ошибка сбрасывается.
8

Запрети две запятые в одном числе

Если в числе уже есть запятая и ты нажмёшь её ещё раз — ничего не должно произойти. Одна запятая на число.

Скажи ИИЗапрети вводить вторую запятую, если в текущем числе уже есть одна. Нажатие запятой просто игнорируется.
9

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

Добавь кнопку ⌫ (backspace). Нажал — удалился последний введённый символ. Если ничего не осталось — показывается «0».

Скажи ИИДобавь кнопку ⌫, которая удаляет последний символ с дисплея. Если символов не осталось — показывай «0».
➕ Новые кнопки 10–11
10

Кнопка % — считает проценты

Добавь кнопку %. Пример: набери 200 + 10% = и получи 220. Это удобно для расчёта скидок и наценок.

Скажи ИИДобавь кнопку % — она считает процент от первого числа. Например: 200 + 10% = 220.
11

Кнопка «Скопировать результат»

Рядом с дисплеем добавь маленькую кнопку 📋. Нажал — результат скопировался в буфер. На дисплее на секунду появляется «Скопировано!».

Скажи ИИДобавь кнопку-иконку рядом с дисплеем, которая копирует число в буфер обмена. После нажатия покажи уведомление «Скопировано!» на 2 секунды.
📋 История вычислений 12–16
12

Показывай последние 5 вычислений

Под калькулятором появляется список: последние 5 примеров и их результаты. Например: «2 + 3 = 5».

Скажи ИИПод калькулятором добавь список последних 5 вычислений. Каждая строка: «выражение = результат».
13

История не пропадает при перезагрузке

Закрыл вкладку, открыл снова — история на месте. Браузер запоминает все твои вычисления.

Скажи ИИСохраняй историю вычислений так, чтобы она не пропадала при перезагрузке страницы.
14

Показывай время каждого вычисления

Рядом с каждой записью в истории добавь время когда было сделано это вычисление. Например: «14:32».

Скажи ИИДобавь время к каждой записи в истории — покажи часы и минуты когда было выполнено вычисление.
15

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

Нажал на запись в истории — и её результат появляется на дисплее. Можно сразу продолжать считать.

Скажи ИИПри клике на запись в истории вставляй её результат на дисплей калькулятора.
16

Кнопка очистки истории с подтверждением

Добавь кнопку «Очистить историю». При нажатии появляется всплывающее окно: «Вы уверены?» с кнопками «Да» и «Нет».

Скажи ИИДобавь кнопку «Очистить историю». При нажатии покажи модальное окно с кнопками «Да» и «Нет». Очищай только если нажали «Да».
⌨️ Удобство 17–20
17

Поддержка клавиатуры

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

Скажи ИИДобавь поддержку клавиатуры: цифры и операции вводятся с клавиш, Enter считает результат, Escape сбрасывает, Backspace удаляет символ.
18

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

Добавь две маленькие кнопки A+ и A−. Нажимаешь A+ — цифры на дисплее становятся крупнее. A− — меньше.

Скажи ИИДобавь кнопки A+ и A−, которые увеличивают и уменьшают размер шрифта на дисплее. Сохраняй размер в localStorage.
19

Красиво на телефоне

Открой калькулятор на телефоне или сузь окно браузера — должно быть удобно. Кнопки крупные, всё влезает на экран.

Скажи ИИСделай адаптивный дизайн: на маленьких экранах (телефон) калькулятор должен занимать весь экран, кнопки — быть крупными и удобными.
20

Кнопка «Инженерный режим»

Добавь переключатель, который открывает дополнительный ряд кнопок: √ (корень), x² (квадрат). Нажал ещё раз — ряд скрывается.

Скажи ИИДобавь кнопку «Инженерный». При нажатии появляется дополнительный ряд с кнопками √ и x². При повторном нажатии ряд скрывается.