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

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

<!-- поле ввода первого числа -->
<input id="num1" 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" pattern="^[0-9.,\s]+$" />
<br/>
<!-- кнопка для расчётов -->
<button onclick="func()">Посчитать</button>
<!-- здесь будет результат -->
<p id="result"></p>

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


<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 '/':
result = num1 / num2;
break;
}
// отправляем результат на страницу
document.getElementById('result').innerHTML = result;
}
</script>


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;
}


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