CodePen Embed - Calculator

<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">
    
    <title>Calculatron</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/font-awesome.css" rel="stylesheet">
  <link href="css/calculator-styles.css" rel="stylesheet">
  

    
  </head>
  <body>
  <div class='container'>
  <div class='row'>
    <div class='col-md-4'>
    </div>
    <div class='col-md-4'>
      <div id='calc'>
        <h1 class='center' id='heading'>Calculatron</h1>
        <input type="text" disabled id='screen' value="">
        <div class='row'>
          <div class='col-md-2'>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn clear-btn' id='oper-ac'>AC</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn clear-btn' id='oper-ce'>CE</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn oper-btn' id='oper-percent'>%</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn oper-btn' id='oper-divide' operator='/'>&divide;</button>
          </div>
        </div>
        <div class='row'>
          <div class='col-md-2'>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-9' number='9'>9</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-8' number='8'>8</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-7' number='7'>7</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn oper-btn' id='oper-times' operator='*'>&times;</button>
          </div>
        </div>
        <div class='row'>
          <div class='col-md-2'>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-6' number='6'>6</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-5' number='5'>5</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-4' number='4'>4</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn oper-btn' id='oper-minus' operator='-'>&minus;</button>
          </div>
        </div>
        <div class='row'>
          <div class='col-md-2'>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-3' number='3'>3</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-2' number='2'>2</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-1' number='1'>1</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn oper-btn' id='oper-plus' operator='+'>&plus;</button>
          </div>
        </div>
        <div class='row'>
          <div class='col-md-2'>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-0' number='0'>0</button>
          </div>
          <div class='col-md-2'>
            <button class='calc-btn num-btn' id='num-dec' number='.'>.</button>
          </div>
          <div class='col-md-4'>
            <button class='calc-btn' id='equals-btn'>=</button>
          </div>
          
        </div>
      </div>
    </div>
    <div class='col-md-4'>
    </div>
  </div>
  </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  <script src="js/calculator-js-v0.12.js"></script>
  
  </body>
</html>

.container {
  background-image: url(../images/old_mathematics_@2X.png); 
  background-repeat: repeat;
  width: 100%;
  min-height: 100vh;
}

.center {
  text-align: center;
}

#calc {
  background-color: darkgray;
  background: linear-gradient(to right, royalblue , lightsteelblue);
  box-shadow: 5px 5px 5px #888888;
  border-radius: 15px;
  height: 580px;
  width: 500px;
  margin-top: 100px;
  font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', 'sans serif';
  position: absolute;
}

#heading {
  margin: 10px;
}

#screen {
  width: 400px;
  height: 70px;
  margin: 10px 50px 10px 50px;
  padding: 10px;
  text-align: right;
  font-size: 40px;
  font-family: Verdana, Geneva, sans-serif;
}

.calc-btn {
  height: 70px;
  width: 70px;
  margin-top: 10px;
  font-size: 40px;
}

.oper-btn {
  color: blue;
}

.clear-btn {
  color: red;
}

.num-btn {
  
}

#equals-btn {
  width: 160px;
  color: green;
}

var screenDisplay = '';
var equationArray = [];
var result = 0;
var numBtnClick = false;
var operBtnClick = false;
var equalBtnClick = false;

$('.num-btn').click(function () {
  screenDisplay = screenDisplay + $(this).attr('number');
  $('#screen').val(screenDisplay);
  numBtnClick = true;
  if (numBtnClick == true && operBtnClick == true) {
    screenDisplay = $(this).attr('number');
    $('#screen').val(screenDisplay);
    operBtnClick = false;
    equalBtnClick = false;
  };
  if (numBtnClick == true && equalBtnClick == true) {
    equationArray = [];
    result = 0;
    screenDisplay = $(this).attr('number');
    $('#screen').val(screenDisplay);
    equalBtnClick = false;
    numBtnClick = false;
  };
});

$('.oper-btn').click(function() {
  screenDisplay = $('#screen').val();
  equationArray.push(screenDisplay);
  equationArray.push($(this).attr('operator'));
  numBtnClick = false;
  operBtnClick = true;
});

$('#equals-btn').click(function() {
  equationArray.push(screenDisplay);
  result = equationArray.join();
  result = result.replace(/,/g,'');
  result = eval(result);
  $('#screen').val(result);
  equalBtnClick = true;
  numBtnClick = false;
  equationArray = []; 
  result = 0;
});

$('#oper-ce').click(function() {
  screenDisplay = '';
  $('#screen').val(screenDisplay);
});

$('#oper-ac').click(function() {
  screenDisplay = '';
  $('#screen').val(screenDisplay);
  equationArray = [];
  result = 0;
});

This Pen is owned by Dan on CodePen.

See more by @4xDMG on CodePen

External CSS

External JavaScript