Простой калькулятор, реализованный на JavaScript с пользовательским интерфейсом. Эта программа создает простой пользовательский интерфейс HTML, который позволяет вам вводить два числа и выбирать оператор. Функция вычисления принимает ввод, выполняет вычисление на основе выбранного оператора и отображает результат в элементе вывода на странице.

Навигация по статье

Разметка

<div class="container">
  <h1>Calculator</h1>
  <label for="firstNumber">First number:</label>
  <input type="number" id="firstNumber" />
  <br />
  <br />
  <label for="secondNumber">Second number:</label>
  <input type="number" id="secondNumber" />
  <br />
  <br />
  <label for="operator">Operator:</label>
  <select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <br />
  <br />
  <button onclick="calculate()">Calculate</button>
  <div class="output" id="output"></div>
</div>

Стили

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.output {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}

Скрипт

const calculate = () => {
  const firstNumber = parseInt(document.getElementById("firstNumber").value);
  const secondNumber = parseInt(document.getElementById("secondNumber").value);
  const operator = document.getElementById("operator").value;

  let result;

  switch (operator) {
    case "+":
      result = firstNumber + secondNumber;
      break;
    case "-":
      result = firstNumber - secondNumber;
      break;
    case "*":
      result = firstNumber * secondNumber;
      break;

    case "/":
      result = firstNumber / secondNumber;
      break;
  }

  document.getElementById("output").innerHTML = `Result: ${result}`;
};