5.01. Практика

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Архитектору

Практика

Практическое задание

Выполните нижеуказанное задание.

Настало время небольшой практики. Вернёмся к нашему проекту - калькулятор на HTML, и в файле script.js реализуем логику калькулятора:

создайте новый файл script.js;
получите элементы из DOM-дерева и определите их как переменные (или константы);
добавьте обработку кнопок через цикл - сделайте проверку на текст кнопки;
добавьте переменные (или константы) a и b для чисел-операндов;
не забудьте добавить проверку деления на 0.

Добавьте в HTML связь со скриптом:

<script src="script.js"></script>

Вот пример простейшего скрипта для нас:

const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const result = document.getElementById('result');
const error = document.getElementById('error');
const buttons = document.querySelectorAll('.buttons button');
const equals = document.querySelector('.equals');

let operation = null;

buttons.forEach(button => {
  button.addEventListener('click', () => {
    operation = button.textContent;
  });
});

equals.addEventListener('click', () => {
  const a = Number(num1.value);
  const b = Number(num2.value);
  
  if (!operation) {
    error.textContent = 'Выберите операцию';
    return;
  }

  let res;
  switch(operation) {
    case '+': res = a + b; break;
    case '-': res = a - b; break;
    case '×': res = a * b; break;
    case '÷': res = b !== 0 ? a / b : 'Ошибка';
  }

  result.textContent = res === 'Ошибка' ? res : res.toFixed(2);
  error.textContent = res === 'Ошибка' ? 'Деление на ноль' : '';
});

Итоговая логика будет такая:

указывается первое и второе число (операнды);
выбирается операция;
запрашивается результат;
выполняется вычисление и результат выводится:

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

Практика​

Практика