[js]계산기 만들기

<div class="game-wrap">
  <input readonly id="operator">
  <input readonly type="number" id="result">
  <div class="row">
    <button id="num-7">7</button>
    <button id="num-8">8</button>
    <button id="num-9">9</button>
    <button id="plus">+</button>
  </div>
  <div class="row">
    <button id="num-4">4</button>
    <button id="num-5">5</button>
    <button id="num-6">6</button>
    <button id="minus">-</button>
  </div>
  <div class="row">
    <button id="num-1">1</button>
    <button id="num-2">2</button>
    <button id="num-3">3</button>
    <button id="divide">/</button>
  </div>
  <div class="row">
    <button id="clear">C</button>
    <button id="num-0">0</button>
    <button id="calculate">=</button>
    <button id="multiply">*</button>
  </div>
</div>

<script>
  let number1 = '';
  let number2 = '';
  let operator = '';
  const $operator = document.querySelector('#operator');
  const $result = document.querySelector('#result');

  const onClickNumber = (e) => {
      if(!operator) {
        number1 += e.target.textContent;
        $result.value += e.target.textContent;
        return;
      }
      if(!number2) {
          $result.value = '';
      }
      number2 += e.target.textContent;
      $result.value += e.target.textContent;
  } //high order function

  document.querySelector('#num-0').addEventListener('click', onClickNumber);
  document.querySelector('#num-1').addEventListener('click', onClickNumber);
  document.querySelector('#num-2').addEventListener('click', onClickNumber);
  document.querySelector('#num-3').addEventListener('click', onClickNumber);
  document.querySelector('#num-4').addEventListener('click', onClickNumber);
  document.querySelector('#num-5').addEventListener('click', onClickNumber);
  document.querySelector('#num-6').addEventListener('click', onClickNumber);
  document.querySelector('#num-7').addEventListener('click', onClickNumber);
  document.querySelector('#num-8').addEventListener('click', onClickNumber);
  document.querySelector('#num-9').addEventListener('click', onClickNumber);

  const onClickOperator = (e) => {
    if(number2) {
      switch (operator) {
        case '+' :
          $result.value = parseInt(number1) + parseInt(number2);
          break;
        case '-':
          $result.value = parseInt(number1) - parseInt(number2);
          break;
        case '*':
          $result.value = parseInt(number1) * parseInt(number2);
          break
        case '/':
          $result.value = parseInt(number1) / parseInt(number2);
          break;
        default:
          break;
      }
      number1 = $result.value;
      number2 = '';
    }
    if(number1) {
      operator = e.target.textContent;
      $operator.value = e.target.textContent;
    } else {
      alert('숫자 1이 없습니다.')
    }
  }

  document.querySelector('#plus').addEventListener('click', onClickOperator);
  document.querySelector('#minus').addEventListener('click', onClickOperator);
  document.querySelector('#divide').addEventListener('click', onClickOperator);
  document.querySelector('#multiply').addEventListener('click', onClickOperator);
  document.querySelector('#calculate').addEventListener('click', () => {
    if(number2) {
      switch (operator) {
        case '+' :
          $result.value = parseInt(number1) + parseInt(number2);
          break;
        case '-':
          $result.value = parseInt(number1) - parseInt(number2);
          break;
        case '*':
          $result.value = parseInt(number1) * parseInt(number2);
          break
        case '/':
          $result.value = parseInt(number1) / parseInt(number2);
          break;
        default:
          break;
      }
      $operator.value = '';
      number1 = $result.value;
      operator = '';
      number2 = ''
    } else {
      alert('숫자를 먼저 입력하세요.');
    }
  });
  document.querySelector('#clear').addEventListener('click', () => {
    number1 = '';
    number2 = '';
    operator = '';
    $result.value = '';
    $operator.value = '';
  });

</script>