Как просто написать калькулятор

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

На C вполне реально писать различные программы, которые используются как полноценный софт. Для веб-сайтов редко такое подойдет, если не заморачиваться насчет адаптации кода под интернет-скрипты. Однако, осуществить можно такое – нужно лишь подумать.

По части самого создания калькулятора на языке C – не такая уж и сложная операция. Для нее потребуется лишь немного времени и желание создать полезную вещь на своем компьютере. Однако, необходимо думать над тем, как реализовать такую идею и при каких вариантах ответов должно выводиться то или иное сообщение. Все же, это нужно для корректного функционирования ПО.

Полностью код выглядит таким образом:

#include <stdio.h>

main() {
float x,y;
char sign=’+’;
while (sign != ‘0’) {
printf(“Знак: “);
scanf(“%c%*c”, &sign);
if (sign == ‘0’) { break; }
if (sign == ‘+’ || sign == ‘-’
|| sign == ‘*’ || sign == ‘/’) {
printf(“x=”)’
scanf(“%f%*c”, &x);
printf(“y=”);
scanf(“%f%*c”, &y);
switch (sign) {
case ‘+’:
printf(“%.2fn”, x+y);
break;
case ‘-’:
printf(“%.2fn”, x-y);
break;
case ‘*’:
printf(“%.2fn”, x*y);
break;
case ‘/’:
if (y != 0) printf(“%.2fn”, x/y);
elseprintf(“Деление на ноль!n”);
}
}
elseprintf(“Неверно указан знак операцииn”);
}
}

Это – полный код, который требуется сделать в программе для правильного функционирования своего калькулятора. Все делается с упором на логику – нельзя допускать того, чтобы вводился ноль (как самостоятельное число) при делении или цифра, когда требуется указать знак выражения. Рекомендуется разобраться с таким кодом для развития в плане изучения языка C.

Как написать калькулятор на C++?

На C++ немного отличается код. Но что объединяет этот способ с уже описанным – там требуется изучить логику выполнения задачи. Если допускать ошибки – функционировать калькулятор будет неисправно. А значит, неправильные решения выражений точно будут. Такое затруднит работу или какую-либо задачу, которую требуется решить срочно, к примеру, на уроке информатики.

Вот так выглядит код, если писать калькулятор на языке C++:

#include <iostream>

intmain(){
int a = 0;
int b = 0;
char operation;
std:cout<< “Enter first number: ”;
std:cin>> a;
std:cout<< “Enter second number: ”;
std:cin>>b;
std:cout<< “Enter operation: ”;
std:cin>>operation;

switch (operation){
case ‘-’:
std::cout<< “a – b = “ << a – b << ‘n’;
break;
case ‘+’:
std::cout<< “a + b = “ << a + b << ‘n’;
break;
case ‘*’:
std::cout<< “a * b = “ << a * b << ‘n’;
break;
case ‘/’:
std::cout<< “a –/ b = “ << a / b << ‘n’;
break;
default:
std::cout<< “Errorn”;
}
return 0;
}

Это – код для простейшего варианта калькулятора. Он схож с предыдущим, а следовательно, можно понять, как что работает здесь без проблем. Это касается как начинающих, так и тех, кто учил язык C. Здесь лишь расписан порядок действий, переменные указаны и то, какие операции должны выводиться. Все очень просто, на самом деле.

Как создать программу — калькулятор в консоли на Java?

Java – популярный язык. И на нем тоже можно написать программу-калькулятор. Но для этого потребуется немало усилий – алгоритм более емкий в консоли, хоть и выполняет ту же роль. Здесь код большой, но при должных знаниях можно его быстро набрать и осуществить основные вычисления – сложение, вычитание, умножение и деление.

Можно придумать разные варианты такой программы. Но наилучшим станет тот, что ниже. Там все расписано по классам и пользователь, при должной внимательности, разберется, что и как происходит в коде, который он создал в командной строке Java:

importjava.util.Scanner;

public class Calculator {
static Scanner scanner = new Scanner(System.in);

public static void main(String[] args) {
int num1 = getInt();
int num2 = getInt();
char operation = getOperation();
int result = calc(num1,num2,operation);
System.out.println(«Результат операции: «+result);
}

public static intgetInt(){
System.out.println(«Введите число:»);
intnum;
if(scanner.hasNextInt()){
num = scanner.nextInt();
} else {
System.out.println(«Вы допустили ошибку при вводе числа. Повторите попытку.»)
scanner.next();//рекурсия
num = getInt();
}
return num;
}

public static char getOperation(){
System.out.println(«Введите операцию:»);
char operation;
if(scanner.hasNext()){
operation = scanner.next().charAt(0);
} else {
System.out.println(«Вы допустили ошибку при вводе операции. Попробуйте снова”.)
scanner.next();//рекурсия
operation = getOperation();
}
return operation;
}

public static intcalc(int num1, int num2, char operation){
int result;
switch (operation){
case ‘+’:
result = num1+num2;
break;
case ‘-‘:
result = num1-num2;
break;
case ‘*’:
result = num1*num2;
break;
case ‘/’:
result = num1/num2;
break;
default:
System.out.println(«Операция не распознана. Повторите ввод.»);
result = calc(num1, num2, getOperation());//рекурсия
}
return result;
}
}

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

Написание калькулятора на Python

На Python возможно получить примерно такой же калькулятор, как и в варианте с Java, но только теперь уже с разбитием этапов работы для лучшего понимания структуры. Сначала создается рамка, затем – кнопки, далее – логика. Все очень просто на словах. Однако, в коде придется немного разобраться для понимания, как все работает и по какому принципу пишутся подобные программы.

from tkinter import *

class Main(Frame):
def __init__(self, root):
super(Main, self).__init__(root)
self.build()

def build(self):
self.formula = «0»
self.lbl = Label(text=self.formula, font=(«Times New Roman», 21, «bold»), bg=»#000″, foreground=»#FFF»)
self.lbl.place(x=11, y=50)
btns = [
«C», «DEL», «*», «=»,
«1», «2», «3», «/»,
«4», «5», «6», «+»,
«7», «8», «9», «-«,
«(«, «0», «)», «X^2″
]
x = 10
y = 140
for bt in btns:
com = lambda x=bt: self.logicalc(x)
Button(text=bt, bg=»#FFF»,
font=(«Times New Roman», 15),command=com).place(x=x, y=y,
width=115,
height=79)
x += 117
if x > 400:
x = 10
y += 81

def logicalc(self, operation):
if operation == «C»:
self.formula = «»
elif operation == «DEL»:
self.formula = self.formula[0:-1]
elif operation == «X^2»:
self.formula = str((eval(self.formula))**2)
elif operation == «=»:
self.formula = str(eval(self.formula))
else:
if self.formula == «0»:
self.formula = «»
self.formula += operation
self.update()

def update(self):
if self.formula == «»:
self.formula = «0»
self.lbl.configure(text=self.formula)
if __name__ == ‘__main__’:
root = Tk()
root[«bg»] = «#000»
root.geometry(«485×550+200+200»)
root.title(«Калькулятор»)
root.resizable(False, False)
app = Main(root)
app.pack()
root.mainloop()

У пользователя должен получиться такой код для работы своего калькулятора. Он будет запускаться как отдельная программа – это станет плюсом для дальнейшего совершенствования.

Реализация работы калькулятора – что для этого требуется?

Для реализации своей программы требуется в первую очередь – программная среда. Это может быть простой редактор, а может – полноценный редактор кода Python или какой-то другой. Но дополнительно, нужны знания, ведь без них человек просто не разберется, каким образом требуется представить калькулятор. Для лучшего понимания рекомендуется экспериментировать с кодами и разбираться, как они работают. Только после этого человек поймет, что значит «написать калькулятор на языке программирования».

Сегодня сделаем простейший калькулятор на JavaScript, но не просто так, а с умыслом. Позднее мы представим, что мы тестировщики, и попробуем протестировать этот калькулятор. Вернее, не протестировать, а дико сломать.

Что делаем

На старте у нас будет самый простой калькулятор, который сможет только складывать, вычитать, умножать и делить два числа. Этого уже будет достаточно, чтобы потренироваться и в коде, и в дальнейшем тестировании.

Логика работы

Размещаем кнопки и поля ввода на странице

Разместим кнопки с полями на странице, а потом будем писать скрипт.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Калькулятор</title>
</head>
<body>
	<!-- поле ввода первого числа -->
	<input id="num1" />

	<!-- блок с кнопками -->
	<div id="operator_btns">
	  <button id="plus" >+</button>
	  <button id="minus" >-</button>
	  <button id="times" >x</button>
	  <button id="divide" >:</button>
	</div>

	<!-- поле ввода второго числа -->
	<input id="num2" />
	<br>

	<!-- кнопка для рассчётов -->
	<button >Посчитать</button>

</body>
</html>

Обрабатываем нажатия на кнопки математических действий

Сейчас у нас есть 4 кнопки, но нажимать их бесполезно — всё равно ничего не произойдёт, потому что нет обработчиков нажатий. Но что нам прописывать в обработчике?

Первый вариант — привязать к каждой кнопке свою функцию, а потом для каждой операции выполнять свои действия внутри этого обработчика. Но раз у нас есть кнопка «Посчитать», то нам придётся при нажатии на неё из этих четырёх функций вытаскивать действие и нужные команды, запоминать выбранное и как-то использовать в вычислениях. Сложно и громоздко.

Второй вариант — просто записывать в какую-то переменную, какая кнопка была нажата. А потом, при нажатии «Посчитать», просто смотреть в эту переменную и выполнять соответствующее действие. Так и поступим.

👉 Воспользуемся хитростью, про которые многие забывают: в обработчике onclick необязательно писать только функцию — туда можно отправить любую JS-команду. Главное, не забыть потом в скрипте предусмотреть эту переменную, которую мы используем.

<!-- блок с кнопками -->
<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>

Пишем скрипт

Сам скрипт тоже будет простой:

<script>
  // переменная, в которой хранится выбранное математическое действие
  var op; 

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

  }
</script>

Сразу привяжем функцию func() к нажатию на кнопку «Посчитать»:

<button onclick="func()">Посчитать</button>

Выводим результат

Сейчас в скрипте есть проблема: он всё считает, но ничего не выводит. А всё потому, что мы не предусмотрели на странице место для вывода. Исправим это и добавим строчку в скрипт.

Это — добавим на страницу после кнопки с расчётом:

<p id="result"></p>

А это — в функцию func(), чтобы она сразу отправляла результат на страницу:

document.getElementById("result").innerHTML = result;

Собираем всё вместе и смотрим результат

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Калькулятор</title>
</head>
<body>
	<!-- поле ввода первого числа -->
	<input id="num1" />

	<!-- блок с кнопками -->
	<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" />
	<br>

	<!-- кнопка для расчётов -->
	<button onclick="func()">Посчитать</button>

	<!-- здесь будет результат -->
	<p id="result"></p>

	<!-- наш скрипт -->
	<script>
	  // переменная, в которой хранится выбранное математическое действие
	  var op; 

	  // функция расчёта
	  function func() {
	  	// переменная для результата
	    var result;
	    // получаем первое и второе число
	    var num1 = Number(document.getElementById("num1").value);
	    var num2 = Number(document.getElementById("num2").value);
	    // смотрим, что было в переменной с действием, и действуем исходя из этого
	    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>

</body>
</html>

Отлично, калькулятор работает и складывает всё как нужно! Мы выполнили свою задачу — быстро запилили калькулятор на JavaScript, можно закрывать задачу в таск-трекере и браться за новую. 

Посмотреть калькулятор на странице проекта.

Что дальше

Дальше мы этот код отправим тестировщикам — вряд ли они в нём найдут что-то критичное или вообще какие-то ошибки, но правила есть правила. А если тестировщики тут что-то найдут, мы обязательно расскажем об этом в новой статье.

Попробуйте сами побыть тестировщиком и протестировать эту программу, а результатами тестирования поделитесь в комментариях.

В этом практическом уроке я хочу показать вам реализацию калькулятора на чистом JavaScript. Также в ходе работы мы будем использовать Grid CSS и немного поговорим о безопасности нашего скрипта.

В качестве основы я буду использовать базовый HTML-каркас к которому подключен один CSS-файл style.css. Откроем его и напишем базовые стили для нашего проекта. На глобальном уровне изменим алгоритм блочной модели на значение border-box. А также сбросим внешние отступы
у элемента body.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

Разметка калькулятора

Теперь давайте перейдем к разметке. Сам калькулятор я обозначу через тег <article>, поскольку это самодостаточный автономный компонент. И задам ему соответствующий класс calc:

<article class="calc">

</article>

Результат вычислений калькулятора мы будем выводить в элемент <output>, который и был для этого создан. Дадим ему класс cacl__result, а также идентификатор result для более простого обращения:

<article class="calc">
  <!-- Результат вычислений -->
  <output class="calc__result" id="result"></output>
</article>

Далее нам нужно определить кнопки нашего калькулятора. Для этого мы будем использовать элементы <button> с типом button и классом calc__btn. Всего нам понадобится 18 кнопок. Для быстрого их создания воспользуемся Emmet:

button[type=button].calc__btn*18

В результате мы получим следующую структуру:

<article class="calc">

  <!-- Результат вычислений -->
  <output class="calc__result" id="result"></output>

  <!-- Клавиши калькулятора -->
  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>

  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>

  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>  

  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>    
  <button class="calc__btn" type="button">/</button>

  <button class="calc__btn" type="button"></button>
  <button class="calc__btn" type="button"></button>

</article>

Для удобства работы визуально мы разбили все кнопки в группы по 4 элемента. Именно столько кнопок будет содержать калькулятор в каждом ряду. Теперь давайте заполним их значениями.

В первом ряду у нас будут находится цифры 7, 8, 9 и оператор плюс +. Во втором — 4, 5, 6 и оператор минус -. В третьем — 1, 2, 3 и оператор умножения *. И в четвертом мы разместим 0, десятичную точку, кнопку с двумя нулями и оператор деления /.

Последний ряд у нас содержит всего 2 элемента. Первый из них будет кнопкой сброса, обозначим ее через заглавную C. А второй — оператором равно =:

<article class="calc">

  <!-- Результат вычислений -->
  <output class="calc__result" id="result"></output>

  <!-- Клавиши калькулятора -->
  <button class="calc__btn" type="button">7</button>
  <button class="calc__btn" type="button">8</button>
  <button class="calc__btn" type="button">9</button>
  <button class="calc__btn" type="button">+</button>

  <button class="calc__btn" type="button">4</button>
  <button class="calc__btn" type="button">5</button>
  <button class="calc__btn" type="button">6</button>
  <button class="calc__btn" type="button">-</button>

  <button class="calc__btn" type="button">1</button>
  <button class="calc__btn" type="button">2</button>
  <button class="calc__btn" type="button">3</button>
  <button class="calc__btn" type="button">*</button>  

  <button class="calc__btn" type="button">0</button>
  <button class="calc__btn" type="button">.</button>
  <button class="calc__btn" type="button">00</button>    
  <button class="calc__btn" type="button">/</button>

  <button class="calc__btn" type="button">C</button>
  <button class="calc__btn" type="button">=</button>

</article>

На этом с разметкой мы закончили и можем переходить к ее оформлению.

Стилизация калькулятора

Начнем мы с класса .calc:

• установим ему ширину в 600px
• зададим видимую границу
• небольшой радиус в 10px
• фоновую заливку
• и внутренние поля в 20px

.calc {  
  width: 600px;
  border: solid 2px #555;
  border-radius: 10px;
  background-color: #888;
  padding: 20px;
}

Расположение кнопок

Теперь давайте займемся расположением кнопок. Поскольку мы имеем дело с двунаправленным макетом, идеальным кандидатом для него будет Grid CSS. В первую очередь, поменяем тип отображения нашего блока на grid и установим шаблон для колонок. В данном случае мне нужно получить 4 колонки одинаковой ширины. Укажу это при помощи функции repeat:

.calc {  
  width: 600px;
  border: solid 2px #555;
  border-radius: 10px;
  background-color: #888;
  padding: 20px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

Теперь я использую свойство grid-auto-rows, чтобы задать размер для всех рядов по умолчанию. Пусть он будет равным 80px. И последнее, что я хочу сделать, это задать отступы между нашими элементами. Для этого я использую свойство gap в значении 20px.

.calc {  
  width: 600px;
  border: solid 2px #555;
  border-radius: 10px;
  background-color: #888;
  padding: 20px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 80px;
  gap: 20px;  
}

Выравнивание по центру экрана

Наш калькулятор уже начинает обретать форму.Но давайте выравняем его по центру экрана. Для этого я обращусь к элементу body и задам ему минимальную высоту, равную высоте области просмотра. Далее сделаю его флекс-контейнером и выравняю его элементы по центру главной
и поперечной оси.

body {
  margin: 0;
  min-height: 100vh;
  
  display: flex;
  justify-content: center;
  align-items: center; 
}

Блок с выводом результатов

Так уже гораздо лучше. Давайте перейдем к следующему блоку. А именно к блоку с выводом результата. В первую очередь, нам нужно растянуть его на всю ширину контейнера. И поскольку он является элементом сетки, мы легко можем это сделать.

Используем свойство grid-column и зададим его расположение от первой до последней линии:

.calc__result {
  grid-column: 1 / -1;
}

Как мы видим, наш блок удачно растянулся и сместил остальные элементы на новый ряд.

Давайте доработаем этот блок:

• зададим ему фоновую заливку
• поменяем цвет текста
• установим размер шрифта
• и внутренние поля

.calc__result {
  grid-column: 1 / -1;

  background-color: #333;
  color: #fff;
  font-size: 56px;
  padding: 10px;
}

На этом наш блок результатов готов.

Оформление кнопок

Клавиши калькулятора мы представили элементом button, у которого уже есть некоторые стили по умолчанию. Давайте их сбросим и назначим свои.

• в первую очередь, уберем с кнопок обводку
• добавим небольшой радиус
• изменим цвет заливки
• а также поменяем тип курсора

После чего, увеличим размер шрифта и установим небольшую тень, чтобы создать эффект выпуклых кнопок:

.calc__btn {
  border: none;
  border-radius: 5px;
  background-color: #eee;
  cursor: pointer;

  font-size: 30px;  
  box-shadow: 2px 3px 2px rgb(0 0 0 / 50%);
}

Не забудем определить и их поведение при наведении мыши. Например, пусть это будет небольшая прозрачность:

.calc__btn:hover {
  opacity: 0.9;
}

При нажатии мы также уменьшим нашу тень, чтобы создать видимость вдавленной кнопки:

.calc__btn:active {
  box-shadow: 1px 1px 2px rgb(0 0 0 / 50%);
}

Операторы

И последнее, что я хочу сделать — это как-то выделить наши кнопки с операторами. Примиксуем к ним модификаторы .calc__btn_operator. Кнопкам сброса и вычисления также добавим свои модификаторы:

• .calc__btn_reset (рисэт)
• и .calc__btn_equal (иквэл)

<article class="calc">

  <!-- Результат вычислений -->
  <output class="calc__result" id="result"></output>

  <!-- Клавиши калькулятора -->
  <button class="calc__btn" type="button">7</button>
  <button class="calc__btn" type="button">8</button>
  <button class="calc__btn" type="button">9</button>
  <button class="calc__btn calc__btn_operator" type="button">+</button>

  <button class="calc__btn" type="button">4</button>
  <button class="calc__btn" type="button">5</button>
  <button class="calc__btn" type="button">6</button>
  <button class="calc__btn calc__btn_operator" type="button">-</button>

  <button class="calc__btn" type="button">1</button>
  <button class="calc__btn" type="button">2</button>
  <button class="calc__btn" type="button">3</button>
  <button class="calc__btn calc__btn_operator" type="button">*</button>  

  <button class="calc__btn" type="button">0</button>
  <button class="calc__btn" type="button">.</button>
  <button class="calc__btn" type="button">00</button>    
  <button class="calc__btn calc__btn_operator" type="button">/</button>

  <button class="calc__btn calc__btn_reset" type="button">C</button>
  <button class="calc__btn calc__btn_equal" type="button">=</button>

</article>

Теперь перейдем к их оформлению. Пусть у операторов будет бледно-оранжевый фон:

.calc__btn_operator {
  background-color: #ffe2ae;
}

Для кнопки сброса мы установим красный фон и поменяем цвет текста на белый:

.calc__btn_reset {
  background-color: #ff5050;
  color: #fff;  
}

Кнопку вычисления мы сделаем синей, а цвет текста также поменяем на белый. Последнее, что нам осталось сделать, это растянуть кнопку «равно» до края сетки. Используем уже знакомое нам свойство grid-column и задаем расположение от второй до последней линии:

.calc__btn_equal { 
  background-color: #5b50ff; 
  color: #fff;  
  grid-column: 2 / -1;
}

Интерфейс нашего калькулятора готов, пора сделать его рабочим.

Логика калькулятора на JavaScript

Для этого я создам файл calc.js и подключу его в самом низу тела документа. Так мы будем точно уверены, что на момент исполнения сценария нам доступен весь DOM документа.

Делегирование

Для работы калькулятора мы должны отслеживать нажатие его кнопок. Первое что приходит на ум — обратиться ко всем элементам button, и повесить на них событие click. Однако, такая операция очень избыточна и не эффективна.

Вместо этого мы можем делегировать событие клика на сам элемент калькулятора:

• находим его по классу calc
• и вешаем нужное нам событие click

const calc = document.querySelector('.calc');

calc.addEventListener('click', function(event) {

});

Кто вызвал событие

Чтобы определить, какой именно элемент вызвал событие, мы можем использовать объект событий event, а конкретно его свойство target.
Для демонстрации давайте выведем его в консоль:

const calc = document.querySelector('.calc');

calc.addEventListener('click', function(event) {
  console.log(event.target);
});

Нажимая на кнопки, мы видим, что наше событие срабатывает успешно и в консоли выводятся правильные элементы.

Ограничение цели

Однако сейчас событие сработает и при нажатии на строку результатов. Чтобы ее исключить, мы будем проверять таргет события на наличие у него класса .calc__btn. Если такого класса нет, то мы просто выходим из функции:

const calc = document.querySelector('.calc');

calc.addEventListener('click', function(event) {
  if(!e.target.classList.contains('calc__btn')) return;

  console.log(event.target);
});

Теперь мы можем работать только с кнопками, исключая лишние элементы.

Значение кнопки

Поскольку значения кнопок хранятся в качестве их содержимого, мы будем получать их через свойство innerText. Для дальнейшего использования запишем это значение в переменную value:

const calc = document.querySelector('.calc');

calc.addEventListener('click', function(event) {
  if(!e.target.classList.contains('calc__btn')) return;

  let value = event.target.innerText;
});

Вывод значений в строку результатов

Теперь мы можем обратиться к блоку result, и выводить в него полученные значения. Для этого мы также используем свойство innerText:

const calc = document.querySelector('.calc');
const result = document.querySelector('#result');

calc.addEventListener('click', function(event) {
  if(!e.target.classList.contains('calc__btn')) return;

  let value = event.target.innerText;

  result.innerText += value;
});

Сброс и вычисление

Последнее, что нам осталось сделать это реализовать логику сброса и вычисления, потому что сейчас эти кнопки просто выводят свои значения как и другие. Для этого я буду использовать условную конструкцию switch по переменной value.

При значении C мы будем записывать в блок результата пустую строку. А по знаку равенства производить вычисления. Для этого я использую функцию eval(), которая выполняет переданный ей JavaScript-код в виде строки. В нашем случае это содержимое строки result. Также я использую метод toFixed() со значением два, чтобы оставлять только 2 знака после десятичной точки.

Ну а поведение остальных клавиш мы сделаем операцией по умолчанию:

const calc = document.querySelector('.calc');
const result = document.querySelector('#result');

calc.addEventListener('click', function(event) {
  if(!e.target.classList.contains('calc__btn')) return;

  let value = event.target.innerText;

  switch(value) {
    case 'C':
      result.innerText = '';
      break;  

    case '=':
      result.innerText = eval(result.innerText).toFixed(2);
      break;    

    default:
      result.innerText += value;
  }
});

Вот такой не сложный скрипт у нас получился. В случае необходимости вы можете легко добавить новые операторы и реализовать их поведение,
если оно отличается от обычного.

Вопрос безопасности

Теперь давайте немного поговорим о безопасности нашего скрипта. Для вычисления выражения мы используем функцию eval(), которая считается крайне не безопасной, поскольку позволяет выполнить произвольный JavaScript.

Потенциально злоумышленник может передать в него какой-то вредоносный код. Например, давайте откроем консоль, и заменим содержимое клавиши, на команду calc.remove(). Теперь, если мы нажмем на кнопку равно, наш калькулятор будет удален. Однако, это произойдет только в браузере у самого злоумышленника. Другие пользователи никак от этого не пострадают. Тоже самое, мы могли бы сделать и просто, выполнив эту команду в консоли.

Поскольку наш калькулятор не использует никаких пользовательских данных, функция eval() здесь не представляет опасности. Тем не менее,
мы можем добавить еще один слой защиты, просто проверяя выражение на допустимые символы.

Для этого я буду использовать метод search, который выводит позицию первого совпадения с регулярным выражением. В регулярном выражении, мы просто будем искать все кроме цифр и наших операторов. Если совпадений не будет, то метод search() вернет нам значение -1. В противном случае мы просто выходим из функции:

const calc = document.querySelector('.calc');
const result = document.querySelector('#result');

calc.addEventListener('click', function(event) {
  if(!e.target.classList.contains('calc__btn')) return;

  let value = event.target.innerText;

  switch(value) {
    case 'C':
      result.innerText = '';
      break;  

    case '=':   
      // Проверка выражения
      if(result.innerText.search(/[^0-9*/+-]/mi) != -1) return;
      
      // Исполнение выражения
      result.innerText = eval(result.innerText).toFixed(2);
      break;    

    default:
      result.innerText += value;
  }
});

Проверим, что наш калькулятор до сих пор работает. Но теперь, если мы передадим в выражение произвольный код, который содержит буквы и другие символы, то выполнен он не будет.