Создание простого калькулятора с помощью javascript похоже на обряд посвящения для каждого фронтенд-разработчика. В этой статье объясняется, как его создать.

Требуются знания следующего

  1. Классы JavaScript
  2. "для каждого"
  3. Функции JavaScript
  4. Стрелочные функции
  5. && и || операторы
  6. Слушатели событий
  7. HTML
  8. CSS

Начнем с написания нашего HTML-кода

Мы добавляем классы в HTML-код, чтобы мы могли стилизовать его с помощью атрибутов CSS и данных, чтобы нацелить его с помощью javascript.

CSS для калькулятора

с нашими настройками HTML и CSS у нас есть что-то вроде этого

Код JavaScript

Мы начинаем с нацеливания на наши элементы с помощью атрибутов данных, прикрепленных к ним в файле HTML.

Следующее, что нужно сделать, это создать класс, который будет содержать все функции для выполнения математических операций с калькулятором.

Класс - это тип функции, но вместо использования ключевого слова function для ее запуска мы используем ключевое слово class, а свойства назначаются внутри метода constructor ().

currentOperand и previousOperand представляют текущие и предыдущие числа на экране калькулятора.

  1. Метод clear заключается в том, чтобы currentOperand, previousOperand and the operation по умолчанию оставались пустыми и пустыми.
  2. Метод delete удаляет последнее число из набора чисел в текущих числах на экране калькулятора.
  3. appendNumber принимает параметр numbe r и проверяет, включает ли currentOperand десятичное число и является ли десятичным числом, и ничего не делает, если оно есть, а также обновляет значение currentOperand, преобразуя его в строка, поэтому javascript не добавляет номер, а добавляет его.
  4. Функция flushOperator проверяет, не является ли currentOperand пустым, проверяет, не является ли previousOperand пустым, и вызывает функцию вычисления. Он также принимает параметр operation, который устанавливает this.operationto operation, чтобы наш калькулятор знал, какую операцию использовать при вычислении значений. Затем мы устанавливаем previousOperand на currentOperand и убираем currenOperand
  5. Функция вычислить предназначена для получения нашего вычисленного значения и требует вычисления переменных, предыдущие и текущие переменные представляют currentOperand и previousOperand и преобразуются в число. Он также проверяет, нет ли у нас предыдущего и текущего значения, и не вычисляет. Затем мы используем оператор switch, который принимает this.operation, чтобы проверить, совпадает ли this.operation с символами в кейсе, и выполнить код внутри кейсов, после чего мы устанавливаем наше вычисляемое значение.
  6. Функция updateDisplay обновляет innerText this.currentScreenTextElement значением currentOperand, а также innerText this.previousScreenTextElement значением previousOperand. и операция, если операция не является пустой, когда она вызывается.

Мы создаем переменную калькулятора, устанавливаем ее равной new Calculator() и передаем ей свойства из нашего конструктора класса. Мы добавляем eventListeners к нашим кнопкам, когда они нажимаются, и вызываем методы нашего класса.

Окончательный вид

Вот и все! , вы только что создали свой собственный калькулятор JavaScript.

Ссылка на репозиторий Github: https://github.com/lape15/javascript-calculator

Ссылка на калькулятор: https://lape15.github.io/javascript-calculator/