Простой калькулятор

---

Нет комментариев.

---

Калькулятор на JS

Создадим простую форму калькулятора.

html


<!-- поле ввода первого числа -->
<input id="num1" placeholder="число 2" pattern="^[0-9.,\s]+$" />
<!-- блок с кнопками -->
<div id="operator_btns">
<button id="plus" onclick="op='+'">+</button>
<button id="minus" onclick="op='-'">-</button>
<button id="times" onclick="op='*'">x</button>
<button id="divide" onclick="op=':'">:</button>
</div>
<!-- поле ввода второго числа -->
<input id="num2" placeholder="число 2" pattern="^[0-9.,\s]+$" />
<br/>
<!-- кнопка для расчётов -->
<button onclick="func()">Посчитать</button>
<!-- здесь будет результат -->
<p id="result"></p>

Тут всё просто, есть поле ввода первого числа, кнопки – сложить, вычесть, умножить, разделить. Поле ввода второго числа и кнопка вычислить. <p id="result"></p> будет выводить результат.

js


<script>
// переменная, в которой хранится выбранное математическое действие
let op;
// функция расчёта
function func() {
// переменная для результата
let result;
// получаем первое и второе число, меняем запятую на точку если число дробное и пользователь поставил запятую
let num1 = Number(document.getElementById("num1").value.replace(",","."));
let num2 = Number(document.getElementById("num2").value.replace(",","."));
// смотрим, что было в переменной с действием, и действуем исходя из этого
switch (op) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if(num2==0){
alert("Нельзя делить на ноль");
}else{
result = num1 / num2;
}
break;
}
// отправляем результат на страницу
document.getElementById('result').innerHTML = result;
}
</script>


По комментариям в js-коде можно понять, что к чему. Получаем данные чисел num1,2 и переводим их в числовой формат Number, сразу заменяя запятую на точку, если пользователь ввёл неправильное десятичное число.

При выборе операции деления, проверяем второе число на ноль.

css

input:valid {
border-color: green;
color: green;
box-shadow: none;
}
input:invalid {
border-color: red;
color: red;
box-shadow: none;
}
input:focus:valid {
border-color: green;
color: green;
box-shadow: none;
}
input:focus:invalid {
border-color: red;
color: red;
box-shadow: none;
}
input:focus:required:valid {
border-color: green;
color: green;
box-shadow: none;
}
input:focus:required:valid {
border-color: red;
color: red;
box-shadow: none;
}


Стили заданны для полей ввода, в качестве валидации вводимых чисел, т.е. если ввести 4а (не число) поле ввода станет красным.

Получится вот так.

Посчитать