Калькулятор для сайта, который эмулирует работу обычного кнопочного калькулятора.
Управлять калькулятором можнок как с клавиатуры:
0 - 9,.- клавиши ввода числаEnter,=- клавиши получния результатаEsc- сброс калькулятора так и нажимая кнопки мышкой на самом калькуляторе.
В HTML файле подключить скрипт калькулятора и создать елемент.
<head>
<!-- Подкючение стилей в head -->
<link rel="stylesheet" href="./css/calculator.css">
</head>
<body>
<!-- Создайте элемент для калькуляьора -->
<section id="calc" class="calc_wrapper"></section>
</body>
<!-- Подключите скрипт в конце файла -->
<script type="module" defer src="./scripts/script.js"></script>В подключенном скрипте произведите импорт и и вызовите конструктор.
import Calculator from './calculator.js';
const calc_wrapper = document.querySelector(`#calc`);
new Calculator(
calc_wrapper, // DOM элемент калькулятора
false, // вывод debug-информации
);number_input(value)operation_input(operation)equal()ac()render()
-
null
initv1 = 0; state = 'v1';
-
v1 Состояние после вкючения калькулятора, в котором еще нет первого числа.
number_inputвводим первое числоoperation_inputзапоминаем операцию и переходим v1 => wait
-
v2 Состояние в котое попадаем если есть операция, первое число и начинаем вводить второе число
number_imputзапоминаем второе числоoperation_inputвводим операцию переходим v2 => calculationequalпереходим v2 => calculation
-
calculation выполняет дейстаия над v1 op v2. Результат выводится на дисплей и присваивается в переменную v1.
initпроверяем крайние случаи и выполняем расчетresultприсваиваем первому числу результат расчета переход calculatrion => waitto_errorесли результата нет или он не конечное число переход calculation => error
-
wait состояние в котором ожидается ввод второго числа, чтобы убрать с дисалея результат
number_inputпользователь начал вводить второе число переход wait => v2operation_inputизменилась операция - запоминаем еёequalвыполняем расчет wait => calculationbackspaceвторое число равно 0, переход wait => v2
-
error Выводит сообщение об ошибке пока не будет выполнен переход
acinitВыводит ссобщениеERRORна дисплейac
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent