<!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">
  <link rel="stylesheet" href="style.css">
  <title>계산기</title>
</head>
<body>
  <div class="wrapper">
    <section class="screen">
      0
    </section>

    <section class="calc-buttons">
      <div class="calc-button-row">
        <button class="calc-button double">
          C
        </button>
        <button class="calc-button">
          &larr;
        </button>
        <button class="calc-button">
          &divide;
        </button>
      </div>
      <div class="calc-button-row">
        <button class="calc-button">
          7
        </button>
        <button class="calc-button">
          8
        </button>
        <button class="calc-button">
          9
        </button>
        <button class="calc-button">
          &times;
        </button>
      </div>
      <div class="calc-button-row">
        <button class="calc-button">
          4
        </button>
        <button class="calc-button">
          5
        </button>
        <button class="calc-button">
          6
        </button>
        <button class="calc-button">
          &minus;
        </button>
      </div>
      <div class="calc-button-row">
        <button class="calc-button">
          1
        </button>
        <button class="calc-button">
          2
        </button>
        <button class="calc-button">
          3
        </button>
        <button class="calc-button">
          &plus;
        </button>
      </div>
    <div class="calc-button-row">
      <button class="calc-button triple">
        0
      </button>
      <button class="calc-button">
        &equals;
      </button>
    </div>
    </section>

  </div>

  <script src="script.js"></script>
</body>
</html>
html{
  box-sizing: border-box;
  height: 100%;
}


body{
  align-items: center;
  background: #FF96FF;
  display: flex;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  font-display: swap;
  height: inherit;
  justify-content: center;
}

.wrapper{
  border-radius: 16px;
  color: black;
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.34);
  padding: 20px;
}

.screen{
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.01);
  border-radius: 16px;
  color: black;
  font-size: 35px;
  overflow: auto;
  padding: 20px;
  text-align: right;
  width: 360px;
}

.calc-button-row{
  display: flex;
  justify-content: space-between;
  margin: 5% 0;
}

.calc-button{
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(35, 35, 35, 0.01);
  border-radius: 16px;
  color: black;
  flex-basis: 20%;
  font-family: inherit;
  font-size: 24px;
  height: 65px;
}

.calc-button:last-child{
  background: cornflowerblue;
}

.calc-button:last-child:hover{
  background-color: FFE13C;
  color: inherit;
}

.calc-button:last-child:active{
  background-color: #7b935a;
}

.calc-button:hover{
  background-color: #FFE13C;
}

.calc-button:active{
  background-color: #7b935a;
}

.double{
  flex-basis: 45%;
}

let runningTotal = 0;
let buffer = '0';
let previousOperater;

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

function buttonClick(value){
  if(isNaN(value)){
    handleSymbol(value);
  }else{
    handleNumber(value);
  }
  screen.innerText = buffer;
}

function handleSymbol(symbol){
  switch(symbol){
    case 'C':
      buffer = '0';
      runningTotal = 0;
      break;
    case '=':
      if(previousOperater === null){
        return
      }
      flushOperation(parseInt(buffer));
      previousOperater = null;
      buffer = runningTotal;
      runningTotal = 0;
      break;
    case '←':
      if(buffer.length === 1){
        buffer = '0';
      }else{
        buffer = buffer.substring(0, buffer.length - 1);
      }
      break;
    case '+':
    case '−':
    case '×':
    case '÷':
      handleMath(symbol);
      break;
  }   
}

function handleMath(symbol){
  if(buffer === '0'){
    return;
  }
  const intBuffer = parseInt(buffer);

  if(runningTotal === 0){
    runningTotal = intBuffer;
  }else{
    flushOperation(intBuffer);
  }
  previousOperater = symbol;
  buffer = '0';
}

function flushOperation(intBuffer){
  if(previousOperater === '+'){
    runningTotal += intBuffer;
  }else if(previousOperater === '−'){
    runningTotal -= intBuffer;
  }else if(previousOperater === '×'){
    runningTotal *= intBuffer;
  }else if(previousOperater === '÷'){
    runningTotal /= intBuffer;
  }
}

function handleNumber(numberString){
  if(buffer === '0'){
    buffer = numberString;
  }else{
    buffer += numberString;
  }
}

function init(){
  document.querySelector('.calc-buttons').addEventListener('click', function(event){
    buttonClick(event.target.innerText);
  })
}

init()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.