<h1>Simple Calculator in JavaScript</h1>  

<p class='description'>
  For the full walkthrough implementation, check out the article over at <a href='https://www.thatsoftwaredude.com/content/9068/how-to-build-a-calculator-in-javascript' target='_blank'>thatsoftwaredude.com</a>.
</p>
<div class="calculator">
            <div class="screen buffer" id="screen">0</div>
            <div class="screen total" id="screentotal">0</div>
            <div class="operators" id="operators"></div>
            <div class="numpad" id="numpad"></div>
        </div>
*
{
  box-sizing: border-box;
}

body{
  background:black;
  color:white;
}

h1{
  text-align:center;
  font-size: 40pt;
  letter-spacing: -3px;
}

.description{
  font-size: 16pt;
  text-align:center;
  padding: 2%;
}
.description a{
  color:dodgerblue;
}
.calculator
{
    width: 500px;
    margin: 20px auto;
    padding: 10px;
    border-radius: 10px;
    background: #333;
    color: white;
    position:relative;
  border:solid 3px #aaa;
}

.calculator .key
{
    padding: 10px;
    font-weight: bold;
    text-align: center;
}
.calculator .numpad
{
    padding: 10px;
}

.calculator .numpad > div
{
    text-align:center;
    cursor:pointer;
    display:inline-block;
    width:33%;
    padding: 10px;
}

.calculator .numpad div:last-child
{
    width:100%;
}

.calculator .numpad > div:hover
{
    background:#333;
    color:white;
}

.calculator .operators
{
    display:flex;
}

.calculator .operators > div{
    display:inline-block;
    font-weight: bold;
    padding:10px;
    cursor:pointer;
    flex: 1 1 0;
    background:dodgerblue;
    color:white;
}

.screen
{
    padding:10px;
    background:black;
    color:white;
    text-align:right;
    font-size: 18px;
    font-weight:bold;
}

.screen.buffer
{
    position:absolute;
    top:-20px;
    right:-10px;
    font-size:14pt;
  border:solid 2px;
  border-radius: 5px;
}

.screen.total
{
    font-size: 22px;
    padding:20px;
}
 var operators = ['+', '-', 'x', '/', '=', 'cl'];
        var buffer = '';
        var currentResult = 0;
        var currentOperation = '';

function createKeys()
{
  for(let i = 0; i < 10; i++)
  {
    let key = document.createElement('div');
    key.innerHTML = i;
        key.className = 'key';
        key.dataset.value = i;
        key.addEventListener('click', function(e){
            buffer += this.dataset.value;
            document.getElementById('screen').innerHTML = buffer;
        });

    document.getElementById('numpad').appendChild(key);
  }

  operators.forEach(function(item){
    let key = document.createElement('div');
        key.className = 'key';
    key.innerHTML = item;
        key.dataset.operation = item;
        key.addEventListener('click', function(e){
            if (this.dataset.operation == 'cl')
            {
                buffer = '';
            currentResult = 0;
            currentOperation = '';
            document.getElementById('screen').innerHTML = '0';
            document.getElementById('screentotal').innerHTML = '0';
            }
            else
            {
                calculate();
                currentOperation = this.dataset.operation;
                buffer = '';
                document.getElementById('screen').innerHTML= '0';
            }
        });

    document.getElementById('operators').appendChild(key);
  });
}

function calculate()
{
    switch(currentOperation) {
        case "+":
            currentResult += parseInt(buffer);
            break;

        case "-":
            currentResult -= parseInt(buffer);
            break;

        case "/":
            currentResult /= parseInt(buffer);
            break;

        case "x":
            currentResult *= parseInt(buffer);
            break;

        case "=":
            break;
        default:
            console.log('default');
            console.log('buffer: ' + buffer);
            currentResult = parseInt(buffer);
        }

        document.getElementById('screentotal').innerHTML = currentResult;
}

window.addEventListener('load', function(e){
createKeys();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.