CodePen Embed - Simple Calculator

<head>
  <meta charset="utf-8">
  <title>Calculator</title>
  <link href="../css/calculator-style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Ubuntu+Mono" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="../js/calculator.js"></script>
</head>

<body>
  <div class="container-fluid" id="calculator">
    <div id="title">
      <h1>BASIC CALCULATOR</h1>
    </div>
    <div id="display">
      <div id="history"></div>
      <table>
        <tr>
          <td>
            <div id="memory"></div>
          </td>
          <td>
            <div id="value">0</div>
          </td>
        </tr>
      </table>
    </div>
    <div id="keypad">
      <table>
        <tr>
          <td><button class="key key-fnc" value="MC">MC</button></td>
          <td><button class="key key-fnc" value="MR">MR</button></td>
          <td><button class="key key-fnc" value="MS">MS</button></td>
          <td><button class="key key-fnc" value="M+">M+</button></td>
          <td><button class="key key-fnc" value="M-">M-</button></td>
        </tr>
        <tr>
          <td><button class="key key-fnc" value="del">&larr;</button></td>
          <td><button class="key key-fnc" value="CE">CE</button></td>
          <td><button class="key key-fnc" value="C">C</button></td>
          <td><button class="key key-fnc" value="pm">&plusmn;</button></td>
          <td><button class="key key-fnc" value="sqrt">&radic;</button></td>
        </tr>
        <tr>
          <td><button class="key key-main" value="7">7</button></td>
          <td><button class="key key-main" value="8">8</button></td>
          <td><button class="key key-main" value="9">9</button></td>
          <td><button class="key key-fnc" value="div">&divide;</button></td>
          <td><button class="key key-fnc" value="%">%</button></td>
        </tr>
        <tr>
          <td><button class="key key-main" value="4">4</button></td>
          <td><button class="key key-main" value="5">5</button></td>
          <td><button class="key key-main" value="6">6</button></td>
          <td><button class="key key-fnc" value="mult">&times;</button></td>
          <td><button class="key key-fnc" value="inv"><sup>1</sup>&frasl;<sub>x</sub></button></td>
        </tr>
        <tr>
          <td><button class="key key-main" value="1">1</button></td>
          <td><button class="key key-main" value="2">2</button></td>
          <td><button class="key key-main" value="3">3</button></td>
          <td><button class="key key-fnc" value="sub">&ndash;</button></td>
          <td rowspan="2"><button class="key key-fnc" id="equal-btn" value="eq">=</button></td>
        </tr>
        <tr>
          <td colspan="2"><button class="key key-main" id="zero-btn" value="0">0</button></td>
          <td><button class="key key-main" value=".">.</button></td>
          <td><button class="key key-fnc" value="add">+</button></td>
        </tr>
      </table>
    </div>
</body>

html,
body {
  width: 100%;
  background-color: #2F4F4F;
}

table {
  border-spacing: 0px;
  border-collapse: collapse;
  margin: 0px;
  padding: 0px;
}

td {
  margin: 0px;
  padding: 0px;
}

tr {
  margin: 0px;
  padding: 0px;
}

sub {
  font-family: cursive;
}

#title {
  text-align: center;
  width: 400px;
  font-family: 'Ubuntu Mono', monospace;
}

#display {
  text-align: right;
  width: 350px;
  height: 65px;
  margin: 5px 25px 10px 25px;
  background-color: #D3D3D3;
  box-shadow: 0px 3px 0px 0px #A9A9A9, inset -1px -3px 10px 1px #FFFFF0;
  border-radius: 6px;
  font-family: 'Ubuntu Mono', monospace;
}

#history {
  width: 330px;
  height: 28.5px;
  line-height: 32.5px;
  margin: 2px 10px 2px 10px;
  font-size: 16px;
}

#value {
  width: 315px;
  height: 28.5px;
  line-height: 32.5px;
  margin: 2px 10px 2px 10px;
  font-size: 24px;
}

#memory {
  width: 5px;
  font-size: 16px;
  margin-left: 10px;
}

#calculator {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  background-color: #A9A9A9;
  box-shadow: 7px 10px 34px 1px rgba(0, 0, 0, 0.68), inset -1px -6px 12px 0.1px #89847e;
  margin-top: 100px;
  margin-bottom: 25px;
  padding: 5px 0 25px 0;
  border-radius: 10px;
}

#keypad {
  width: 350px;
  margin: 0px 25px 0px 25px;
}

.key {
  float: left;
  width: 66px;
  height: 50px;
  margin: 2px;
  font-size: 20px;
  border-radius: 6px;
  font-family: 'Ubuntu Mono', monospace;
}

.key-fnc {
  background-color: #C0C0C0;
  box-shadow: 0px 3px 0px 0px #808080, inset -1px -3px 10px 1px #D3D3D3;
}

.key-main {
  background-color: #D3D3D3;
  box-shadow: 0px 3px 0px 0px #808080, inset -1px -3px 10px 1px #FFFFF0;
}

#equal-btn {
  width: 66px;
  height: 104px;
  margin: 2px;
}

#zero-btn {
  width: 136px;
  height: 50px;
  margin: 2px;
}

$(document).ready(function() {
  var histDisp = '';
  var histCalc = '';
  var current = '0';
  var input = '';
  var result = '';
  var hist = 0;
  var functionExecuted = false;
  var reset = false;

  function truncHistory(inp) {
    if (inp.length < 35) {
      return inp;
    } else {
      return '...' + inp.slice(inp.indexOf(' '), inp.length - 1);
    }
  }

  function zero() {
    if (!functionExecuted) {
      if (current === '' || current.length === 0) {
        current = input;
      } else if (current === '0') {
        current = input;
      } else {
        if (current.length < 16) {
          current += 0;
        }
      }
      $('#value').html(current);
    } else {
      clear();
      functionExecuted = false;
    }
  }

  function number() {
    if (!functionExecuted) {
      if (current == '0') {
        current = input;
      } else {
        if (current.length < 16) {
          current += input;
        }
      }
      $('#value').html(current);
    } else {
      clear();
      if (current == '0') {
        current = input;
      } else {
        if (current.length < 16) {
          current += input;
        }
      }
      $('#value').html(current);
      functionExecuted = false;
    }
  }

  function mc() {
    hist = 0;
    $('#memory').html('');
  }

  function mr() {
    current = hist;
    $('#value').html(current);
  }

  function ms() {
    if (!isNaN(current)) {
      hist = current === '' ? result : current;
      // display memory saved
      if (hist == '0') {
        $('#memory').html('');
      } else {
        $('#memory').html('M');
      }
    }
  }

  function mPlus() {
    if (!isNaN(current)) {
      hist += current === '' ? Number(result) : Number(current);
    }
    // display / hide memory saved
    if (hist == '0') {
      $('#memory').html('');
    } else {
      $('#memory').html('M');
    }
  }

  function mMinus() {
    if (!isNaN(current)) {
      hist -= current === '' ? Number(result) : Number(current);
      // display / hide memory saved
      if (hist == '0') {
        $('#memory').html('');
      } else {
        $('#memory').html('M');
      }
    }
  }

  function backspace() {
    if (!functionExecuted) {
      current = current.slice(0, current.length - 1);
      if (current.length === 0 || current == '0' || current == '-') {
        current = '0';
      }
      $('#value').html(current);
    }
  }

  function ce() {
    input = '';
    current = '0'
    $('#value').html(current);
  }

  function clear() {
    result = '';
    histDisp = '';
    histCalc = '';
    current = '0';
    $('#history').html(truncHistory(histDisp));
    $('#value').html(current);
  }

  function negate() {
    if (current == '0' || current.length === 0) {
      current = '0';
      $('#value').html(current);
    } else {
      if (current.indexOf('-') == -1) {
        current = '-' + current;
        $('#value').html(current);
      } else {
        current = current.slice(1);
        $('#value').html(current);
      }
    }
  }

  function sqrt() {
    if (current === '') {
      current = 0;
    }
    if (Number(current) < 0) {
      $('#value').html('Invalid Input');
      current = '';
      histDisp = '';
      histCalc = '';
      result = '';
      console.log(current + ' ' + histDisp + ' ' + histCalc);
    } else {
      histDisp += 'sqrt(' + current + ')'
      $('#history').html(truncHistory(histDisp));
      current = Math.sqrt(current).toString();
      $('#value').html(current);
    }
    functionExecuted = true;
  }

  function divide() {
    if (current !== '') {
      result = eval(histCalc + current);
      histDisp += !functionExecuted ? current + ' &divide; ' : ' &divide; ';
      histCalc += current + ' / ';
      $('#history').html(truncHistory(histDisp));
      $('#value').html(result);
      current = '';
      functionExecuted = false;
    } else {

    }
  }

  function percent() {
    current /= 100;
    $('#value').html(current);
    functionExecuted = true;
  }

  function multiply() {
    if (current !== '') {
      result = eval(histCalc + current);
      histDisp += !functionExecuted ? current + ' &times; ' : ' &times; ';
      histCalc += current + ' * ';
      $('#history').html(truncHistory(histDisp));
      $('#value').html(result);
      current = '';
      functionExecuted = false
    }
  }

  function reciproc() {
    current = 1 / current;
    $('#value').html(current);
    functionExecuted = true;
  }

  function subtract() {
    if (current !== '') {
      result = eval(histCalc + current);
      histDisp += !functionExecuted ? current + ' - ' : ' - ';
      histCalc += current + ' - ';
      $('#history').html(truncHistory(histDisp));
      $('#value').html(result);
      current = '';
      functionExecuted = false
    }
  }

  function addition() {
    if (current !== '') {
      result = eval(histCalc + current);
      histDisp += !functionExecuted ? current + ' + ' : ' + ';
      histCalc += current + ' + ';
      $('#history').html(truncHistory(histDisp));
      $('#value').html(result);
      current = '';
      functionExecuted = false
    }
  }

  function equals() {
    if (current !== '') {
      result = eval(histCalc + current);
      histDisp = '';
      histCalc = '';
      $('#history').html(truncHistory(histDisp));
      $('#value').html(result);
      current = '';
    } else {
      histDisp = '';
      histCalc = '';
      $('#history').html(truncHistory(histDisp));
      $('#value').html(result);
    }
  }

  function decimal(inp) {
    if (current.indexOf('.') !== -1) {
      input = '';
    }
    if (current === '') {
      input = '0.'
    }
    current += input;
    $('#value').html(current);
  }

  $(".key").click(function() {
    input = $(this).attr('value');
    if (!isNaN(input) || input === '.') {
      console.log(input);
      if (input === '.') {
        decimal();
      } else if (input === '0') {
        zero();
      } else {
        number();
      }
      // $('#value').html(current);
    } else {
      console.log(input);
      if (input == 'add') {
        addition();
      } else if (input == 'sub') {
        subtract();
      } else if (input == 'mult') {
        multiply();
      } else if (input == 'div') {
        divide();
      } else if (input == 'eq') {
        equals();
      } else if (input == 'C') {
        clear();
      } else if (input == 'CE') {
        ce();
      } else if (input == 'pm') {
        negate();
      } else if (input == 'del') {
        backspace();
      } else if (input == 'sqrt') {
        sqrt();
      } else if (input == 'MC') {
        mc();
      } else if (input == 'MR') {
        mr();
      } else if (input == 'MS') {
        ms();
      } else if (input == 'M+') {
        mPlus();
      } else if (input == 'M-') {
        mMinus();
      } else if (input == '%') {
        percent();
      } else if (input == 'inv') {
        reciproc();
      }
    }
  });
});

This Pen is owned by John on CodePen.

See more by @justawhiteguy on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.