Мини-проект — Калькулятор

Давайте соберём калькулятор, как в телефоне: кнопки с цифрами, действия «+», «−», «×», «÷», очистка и результат. Это укрепит твои знания о обработке событий, DOM и математике в JavaScript.

Где применяется: калькуляторы встречаются на сайтах интернет-магазинов, финансов, логистики, доставки, расчёта ипотек и т.д.

HTML

Создадим поле для вывода и кнопки.

<div id="calc">
  <input type="text" id="display" readonly>
  <div id="buttons">
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>/</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>*</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>-</button>
    <button>0</button>
    <button>C</button>
    <button>=</button>
    <button>+</button>
  </div>
</div>

JavaScript

Добавим реакцию на нажатия и вычисления.

const display = document.getElementById("display");
const buttons = document.querySelectorAll("#buttons button");

buttons.forEach(button => {
  button.addEventListener("click", () => {
    const value = button.textContent;

    if (value === "C") {
      display.value = "";
    } else if (value === "=") {
      try {
        display.value = eval(display.value);
      } catch {
        display.value = "Ошибка";
      }
    } else {
      display.value += value;
    }
  });
});

Попробуйте прямо здесь:

Совет: Не используй eval в настоящих проектах. Он удобен для обучения, но небезопасен.

Что дальше

Калькулятор — отличный пример, как связать интерфейс и логику. В следующем уроке ты создашь мини-сайт с динамикой на JavaScript.

К содержанию курса

Мини-проект: Калькулятор на JavaScript

Мини-проект — Калькулятор

HTML

JavaScript

Попробуйте прямо здесь:

Что дальше