<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Calculator</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Electrolize&display=swap" rel="stylesheet" />
  </head>
  <body>
    <section class="calculator">
      <div class="calculator__result">
        <input readonly id="operator" />
        <input readonly type="number" id="result" />
      </div>
      <div class="row">
        <button id="num-7">7</button>
        <button id="num-8">8</button>
        <button id="num-9">9</button>
        <button id="plus" class="operator">+</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" class="operator">-</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" class="operator">/</button>
      </div>
      <div class="row">
        <button id="clear">C</button>
        <button id="num-0">0</button>
        <button id="calculate">=</button>
        <button id="multiply" class="operator">x</button>
      </div>
    </section></script>
  </body>
</html>

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Electrolize', sans-serif;
}

button,
input {
  font-family: 'Electrolize', sans-serif;
  text-align: center;
}

button:active,
button:focus,
input:active,
input:focus {
  outline: none;
}

.calculator {
  border: 1px solid #000;
  padding: 20px;
  background-color: #9474cc;
  border-radius: 20px;
  border: none;
  box-shadow: 5px 5px 0 #64489b;
}

.calculator__result {
  margin-bottom: 20px;
}

#operator,
#result {
  height: 50px;
  margin: 5px;
  box-shadow: 3px 3px 0 #64489b;
  border-radius: 5px;
  border: none;
  font-size: 30px;
}

#result {
  width: 180px;
  text-align: right;
}

#operator {
  width: 50px;
}

button {
  width: 50px;
  height: 50px;
  margin: 5px;
  font-size: 20px;
  font-weight: 700;
  background-color: #fff;
  border: none;
  border-radius: 5px;
  box-shadow: 3px 3px 0 #64489b;
}

button:hover {
  background-color: #d1c4e9;
  cursor: pointer;
}

button:active {
  position: relative;
  top: 2px;
  color: #fff;
  box-shadow: 1px 1px 0 #64489b;
}

.operator {
  background-color: #c6a3ff;
}

.operator:hover {
  background-color: #b39ddb;
}

#clear,
#calculate {
  background-color: #b39ddb;
}

#clear:hover,
#calculate:hover {
  background-color: #836fa9;
}

let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
const onClickNumber = (event) => {
  if (!operator) {
    numOne += event.target.textContent;
    $result.value += event.target.textContent;
    return;
  }
  if (!numOne && !numTwo && $operator.value === '-') {
    numOne += event.target.textContent * -1;
    $result.value += event.target.textContent * -1;
    operator = '';
    $operator.value = '';
    return;
  }
  if (!numTwo) {
    $result.value = '';
  }
  numTwo += event.target.textContent;
  $result.value += event.target.textContent;
};
const onClickOperator = (op) => () => {
  if (numTwo) {
    switch (operator) {
      case '+':
        $result.value = parseInt(numOne) + parseInt(numTwo);
        break;
      case '-':
        $result.value = numOne - numTwo;
        break;
      case '*':
        $result.value = numOne * numTwo;
        break;
      case '/':
        $result.value = numOne / numTwo;
        break;
      default:
        break;
    }
    $operator.value = '';
    numOne = $result.value;
    operator = '';
    numTwo = '';
  }
  if (numOne || (!numOne && op === '-')) {
    operator += op;
    $operator.value = op;
  } else {
    alert('숫자를 먼저 입력하세요.');
  }
};

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.