Простой калькулятор на HTML, CSS и JavaScript

Примечание: использование таблицы упрощает выравнивание кнопок для учебного примера. В производственном интерфейсе чаще используют flex или grid.

CSS: стили для калькулятора

Откройте styles.css и вставьте эти стили. Они задают внешний вид корпуса, экрана и кнопок.

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');

.calculator {
    padding: 10px;
    border-radius: 1em;
    height: 380px;
    width: 400px;
    margin: auto;
    background-color: #191b28;
    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.display-box {
    font-family: 'Orbitron', sans-serif;
    background-color: #dcdbe1;
    border: solid black 0.5px;
    color: black;
    border-radius: 5px;
    width: 100%;
    height: 65%;
}

#btn {
    background-color: #fb0066;
}

input[type=button] {
    font-family: 'Orbitron', sans-serif;
    background-color: #64278f;
    color: white;
    border: solid black 0.5px;
    width: 100%;
    border-radius: 5px;
    height: 70%;
    outline: none;
}

input:active[type=button] {
    background: #e5e5e5;
    -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
    -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
    box-shadow: inset 0px 0px 5px #c1c1c1;
}

Короткие советы по стилю:

• Используйте CSS Grid для более гибкой разметки, если добавляете доп. кнопки.
• Задайте пользовательские свойства (CSS variables) для цвета, чтобы быстро менять тему.

JavaScript: логика вычислений

Откройте script.js и вставьте этот код. Он реализует очистку экрана, добавление символов и вычисление выражения.

// Очищает экран
function clearScreen() {
    document.getElementById("result").value = "";
}

// Добавляет символ из нажатой кнопки в поле
function display(value) {
    document.getElementById("result").value += value;
}

// Оценивает выражение и выводит результат
function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

Важно: здесь используется eval(). Это простое решение, но имеет недостатки и риски — см. раздел безопасности ниже.

Понимание JavaScript‑кода

Функции clearScreen(), display() и calculate() — минимальный набор для работы калькулятора.

clearScreen

Очищает поле ввода, присваивая пустую строку value элемента с id=”result”.

function clearScreen() {
    document.getElementById("result").value = "";
}

display

Добавляет строковый символ к текущему значению поля — простая конкатенация.

function display(value) {
    document.getElementById("result").value += value;
}

calculate

Функция считывает строку, передаёт её в eval(), и результат возвращает в поле.

function calculate() {
    var p = document.getElementById("result").value;
    var q = eval(p);
    document.getElementById("result").value = q;
}

Важное: безопасность и ограничения eval()

Important: использование eval() исполняет произвольный JavaScript‑код. Если в поле ввода попадут вредоносные данные (например в расширённых версиях с импортом выражений), это создаст уязвимость XSS или выполнение нежелательного кода.

Альтернативы, более безопасные подходы:

• Парсить выражение вручную и вычислять через стек (shunting‑yard → AST → вычисление).
• Использовать специализированные библиотеки, например math.js, которые безопасно парсят и вычисляют выражения.
• Ограничить набор разрешённых символов до цифр, операций и точки и проверять регулярными выражениями перед eval (временно снижает риск, но не гарантирует безопасность).

Когда eval полезен: быстрый прототип для личного обучения. Когда не подходит: публичные приложения, где ввод может быть контролируем пользователем.

Когда поведение может «пойти не так» (примеры и крайние случаи)

• Деление на ноль → Infinity (стандарт JS).
• Неверные выражения (“5++9”, “4..5”) → eval бросит ошибку, или поведение будет непредсказуемым.
• Множественные точки в числе → синтаксическая ошибка.
• Пустое поле и нажатие = → ничего не меняется или пустая строка.

Решения:

• Валидация ввода: разрешать только [0-9.+-*/].
• Обработка ошибок try/catch вокруг eval и информирование пользователя.

Мини‑методология разработки (шаги)

1. Создать HTML‑каркас и кнопки.
2. Подключить CSS для базовой компоновки и стилей.
3. Реализовать display() и clearScreen().
4. Добавить calculate() и прототипную проверку с eval().
5. Написать набор тестов (см. ниже) и обработку ошибок.
6. При необходимости заменить eval() на безопасный парсер.

Критерии приёмки

• Все кнопки от 0 до 9 и операций корректно добавляют символ в поле.
• Кнопка C полностью очищает поле.
• При вводе валидного выражения и нажатии = результат соответствует ожиданию.
• При вводе недопустимого выражения приложение не аварирует — появляется понятное сообщение или поле остаётся без изменений.
• UI отображается корректно на экранах от 320px до 1920px.

Тесты и сценарии приёмки

• 1 + 2 = 3
• 5 * 0 = 0
• 7 / 2 = 3.5
• 4.5 + 1.25 = 5.75
• 5++9 → не показывать результат и не ломать приложение
• Деление на ноль: 5/0 → Infinity
• Нажатие C → поле пустое

Чеклист для ролей

Разработчик:

• Структура файлов: index.html, styles.css, script.js
• Логика display/clear/calculate
• Комментарии в коде

Тестер:

• Пройти все тест‑кейсы выше
• Проверить поведение при неверном вводе
• Тестировать на мобильных устройстах

Ревьювер (код‑ревью):

• Проверка безопасности eval
• Соответствие стилю и соглашениям об именах
• Доступность (атрибуты, контраст)

Альтернативные подходы

• Использовать Math.js: парсит выражения, поддерживает функции и безопаснее, чем eval.
• Построить собственный парсер с алгоритмом “shunting‑yard” и вычислять через AST.
• Применить Function constructor (new Function(‘return ‘ + expr)), но это почти так же опасно, как eval.

Ментальные модели

• Представляйте выражение как строку, которую нужно распарсить в дерево операций (AST) и затем вычислить.
• eval — это чёрный ящик: он быстро даёт результат, но скрывает логику и приносит риски.

Совместимость и портирование

• Код зависит от стандартного DOM и будет работать во всех современных браузерах (Chrome, Firefox, Edge, Safari).
• Для мобильной версии: уменьшите размеры кнопок и используйте адаптивную сетку (media queries).

Заключение

Разработка такого простого проекта — отличный способ закрепить знания HTML, CSS и JavaScript. Начните с прототипа с eval для быстрого результата, а затем улучшайте безопасность и UX: добавьте обработку ошибок, клавиатурный ввод, историю вычислений и поддержку скобок.

Короткая анонс‑версия (для соцсетей):

Создайте собственный калькулятор на HTML/CSS/JS — простой учебный проект. В статье есть код, объяснения, тесты и рекомендации по безопасности для перехода от прототипа к надёжному решению.