Teratail's answer

https://teratail.com/questions/50dttqtipuopa5

by cx20

HTML

<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>

JavaScript

let runningTotal = 0;
let buffer = "0";
let previousOperator;

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 '=':
        debugger;
            if(previousOperator === null){
                return
            }
            flushOperation(parseInt(buffer));
            previousOperator = 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);
            handleMath(symbol);
            break;
    }
}

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

    const intBuffer = parseInt(buffer);

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

function flushOperation(intBuffer){
    if(previousOperator === '+'){
        runningTotal += intBuffer;
    }else if(previousOperator === '−'){
        runningTotal -= intBuffer;
    }else if(previousOperator === '×'){
        runningTotal *= intBuffer;
    }else if(previousOperator === '÷'){
        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();