CodePen Embed - Functioning calculator

<div class="calc">
  <div class="nav">
    <div class="close">
      <i class="material-icons">power_settings_new</i>
    </div>
    <div class="minify">
      <i class="material-icons">remove</i>
    </div>
  </div>
  <div class="result">
    <div class="entered">
      <p class="f_entered"></p><p class="operator"></p><p class="l_entered"></p><p>=</p>
    </div>
    <div class="current">
      <h1>0</h1>  
    </div>
  </div>
  <div class="buttons">
    <div data-key="clear"><p>c</p></div>
    <div data-key="inv"><p>+ / -</p></div>
    <div data-key="sqrt"><p>√</p></div>
    <div data-key="*"><p>x</p></div>
    <div data-key="7"><p>7</p></div>
    <div data-key="8"><p>8</p></div>
    <div data-key="9"><p>9</p></div>
    <div data-key="/"><p>/</p></div>
    <div data-key="4"><p>4</p></div>
    <div data-key="5"><p>5</p></div>
    <div data-key="6"><p>6</p></div>
    <div data-key="-"><p>-</p></div>
    <div data-key="1"><p>1</p></div>
    <div data-key="2"><p>2</p></div>
    <div data-key="3"><p>3</p></div>
    <div data-key="+"><p>+</p></div>
    <div data-key="0"><p>0</p></div>
    <div data-key="comma"><p>,</p></div>
    <div data-key="pi"><p>π</p></div>
    <div data-key="equals"><p>=</p></div>
  </div>
</div>

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: local('Roboto Thin'), local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg13YhjbSpvc47ee6xR_80Hnw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v8/2fcrYFNaTjcS6g4U3t-Y5RV6cRhDpPC5P4GCEJpqGoc.woff) format('woff');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: #333;
    font-family: "Roboto", "Helvetica Neue", "Helvetica", Arial, sans-serif;
    font-size: 1em;
    -webkit-font-smoothing: antialiased;
    line-height: 1em;
    background: #E9E9E9;
}

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

a, a:hover, a:active, a:focus, a:visited {
  color: #333;
  text-decoration: none;
}

body {
  background-image: -webkit-linear-gradient(120deg, #8CA6DB, #B993D6);
  background-image: linear-gradient(120deg, #8CA6DB, #B993D6);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: 'Roboto' helvetica, sans-serif;
  overflow: hidden;
}

p, h1, h2, h3, h4, h5, h6, i {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.calc {
  min-width: 280px;
  max-width: 280px;
  height: 480px;
  background: #2C3643;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.7);
}
.calc .nav {
  width: 280px;
  background: rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  z-index: 3;
  padding: 3px 5px 0px 5px;
}
.calc .nav .close i {
  color: white;
  font-size: 22px;
  cursor: pointer;
}
.calc .nav .minify {
  margin-left: 5px;
}
.calc .nav .minify i {
  color: white;
  font-size: 22px;
  cursor: pointer;
}
.calc .result {
  position: relative;
  height: 130px;
  background: #2C3643;
  border-radius: 5px 5px 0px 0px;
  padding: 0px 20px;
}
.calc .result .entered {
  position: absolute;
  top: 35px;
  right: 20px;
}
.calc .result .entered p {
  color: #727272;
  display: inline;
}
.calc .result .entered p:first-child, .calc .result .entered p:nth-child(2), .calc .result .entered p:nth-child(3) {
  margin-right: 3px;
}
.calc .result .current {
  position: absolute;
  bottom: 30px;
  right: 20px;
}
.calc .result .current h1 {
  font-size: 2.5em;
  color: white;
  font-weight: 300;
}
.calc .buttons {
  height: 350px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.calc .buttons div {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 69px;
  height: 69px;
  background: #3A4654;
  cursor: pointer;
}
.calc .buttons div.pressed {
  background: rgba(58, 70, 84, 0.4);
}
.calc .buttons div:nth-child(1) p {
  color: #727272;
}
.calc .buttons div:nth-child(2) p, .calc .buttons div:nth-child(3) p, .calc .buttons div:nth-child(4) p, .calc .buttons div:nth-child(8) p, .calc .buttons div:nth-child(12) p, .calc .buttons div:nth-child(16) p {
  color: #727272;
}
.calc .buttons div:nth-child(4), .calc .buttons div:nth-child(8), .calc .buttons div:nth-child(12), .calc .buttons div:nth-child(16), .calc .buttons div:nth-child(20) {
  width: 70px;
}
.calc .buttons div:nth-child(20) p {
  color: #FF5252;
}
.calc .buttons div p {
  font-size: 22px;
  color: white;
}

class Calculator {
  
  constructor() {
    this.current = 0;
    this.entered = 0;
    this.answer = 0;

    this.decimal = false;

    this.operator = '';

    this.states = {
      'inv': false,
      'comma': false
    }

    this.options = [
      ['equals', this.processEquals.bind(this)],
      ['clear', this.processClear.bind(this)],
      ['sqrt', this.processSqrt.bind(this)],
      ['inv', this.processInv.bind(this)],
      ['comma', this.processComma.bind(this)],
      ['pi', this.processPi.bind(this)]
    ];

    this.firstEnteredOutput = document.querySelector('.f_entered');
    this.lastEnteredOutput = document.querySelector('.l_entered');
    this.operatorOutput = document.querySelector('.operator');

    this.currentOutput = document.querySelector('.current > h1');
    this.buttons = document.querySelectorAll('.buttons > div');

    for(var i = 0, n = this.buttons.length; i < n; i++) {
      var calc = this;
      var button = this.buttons[i];

      button.addEventListener('mousedown', function() {
        var _this = this;
        calc.processAction(_this.getAttribute('data-key'));
        _this.classList.add('pressed');
        setTimeout(function() {
          _this.classList.remove('pressed');
        }, 400);
      });

      button.addEventListener('mouseup', function() {
        var _this = this;
        _this.classList.remove('pressed');
      });
    }
  }

  processAction(a) {
    for(var i = 0, n = this.options.length; i < n; i++) {
      var option = this.options[i];
      if(a === option[0]) {
        option[1]();
        return;
      }
    }

    if(a === '+' || a === '-' || a === '/' || a === '*') {
      this.processASDM(a);
      return;
    } else {
      this.processNumber(a);
      return;
    }

  }

  processEquals() {
    if(!!this.operator) {
      this.displayNumber(this.current, this.lastEnteredOutput);
      this.answer = eval(this.entered + this.operator + this.current);
      this.displayNumber(this.answer, this.currentOutput);

      this.current = this.answer;
    }
  }

  processClear() {
    this.current = 0;
    this.displayNumber(this.current, this.currentOutput);
    this.entered = 0;
    this.operator = '';
    this.firstEnteredOutput.innerHTML = '';
    this.lastEnteredOutput.innerHTML = '';
    this.operatorOutput.innerHTML = '';
  }

  processSqrt() {
    this.current = Math.sqrt(this.current);
    this.displayNumber(this.current, this.currentOutput);
  }

  processInv() {
    this.current = this.current * -1;
    this.displayNumber(this.current, this.currentOutput);
  }

  processComma() {
    if(!this.decimal) {
      this.current += '.';
      this.currentOutput.innerHTML = this.current;
    }

    this.decimal = true;
  }

  processPi() {
    this.current = Math.PI;
    this.displayNumber(this.current, this.currentOutput);
  }

  processASDM(a) {
    if(!!this.entered && !!!this.answer) {
      return;
    }

    if(this.answer) {
      this.lastEnteredOutput.innerHTML = '';
    }

    this.decimal = false;
    this.operator = a;
    this.entered = this.current;
    this.displayNumber(this.entered, this.firstEnteredOutput);
    a === '*' ? this.operatorOutput.innerHTML = 'x' : this.operatorOutput.innerHTML = this.operator;
    this.current = 0;
    this.displayNumber(this.current, this.currentOutput);
  }

  processNumber(n) {
    this.current === 0 ? this.current = n : this.current += n;
    this.displayNumber(this.current, this.currentOutput);
  }

  displayNumber(n, location) {
    location.innerHTML = String(n).substring(0, 10);
  }
}

var Calc = new Calculator();

This Pen is owned by Roemerdt on CodePen.

See more by @Roemerdt on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js