calculator.css

body {
  background-color: #c9c9c9;
  background-size: cover;
}

#cal {
  width: 400px;
  margin: 0 auto;
  background-color: #1e7145;
  height: 620px;
  border-radius: 20px;
  box-shadow: 10px 10px 5px #888888;
}

h1 {
  margin-top: 100px;
  font-size: 25px;
  font-weight: bold;
  color: white;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 7px;
}

#showarea {
  border-radius: 10px;
  background: #cecfac;
  text-align: right;
  font-size: 25px;
  padding-top: 15px;
  padding-right: 7px;
  width: 335px;
  height: 62px;
  margin: 0 auto;
  margin-bottom: 10px;
}

#buttonarea {
  height: 446px;
  padding: 16px;
  margin: 0 auto;
  text-align: center;
  padding-top: 22px;
  margin-left: 6px;
}

.button {
  width: 65px;
  height: 60px;
  font-size: 25px;
  border-radius: 3px;
  margin: 0 10px 10px 8px;
}

.button:hover {
  background-color: gray;
  color: black;
  border: 2px solid #e7e7e7;
}

.row2,
.row3,
.row4,
.row5,
.row6 {
  padding-top: 5px;
}

#ex2 {
  position: absolute;
  font-size: 15px;
  margin-top: -2px;
}

#limitb {
  line-height: 10px;
}

#lim {
  font-size: 30px;
}

#equal {
  height: 209px;
  margin-right: 19px;
  margin-left: 0;
}

.pull {
  margin-right: 13px;
}

#equal:hover {
  background-color: #1FAEFF;
}

h3 {
  text-align: right;
}

calculator.html

<h1>Calculator</h1>
  <div id='showarea'><span id='result'></span></div>
  <div id='buttonarea'>
    <div>
      <button class='button' id='sqrt'> &radic;</button>
      <button class='button' id='square'><span id='ex'>X</span>
    <span id='ex2'>2</span></button>
      <button class='button' id='limitb'><span id='limit'>1/</span><span id='lim'>x</span></button>
      <button class='button' id='CE'>&#9003</button>
    </div>
    <div class='row2'>
      <button class='button' id='C'>C</button>
      <button class='numbers button operator' value='/'>&divide;</button>
      <button class='numbers button operator' value='*'>X</button>
      <button class='numbers button operator' value='-'>-</button><br>
    </div>
    <div class='row3'>
      <button class='numbers button' value='7'>7</button>
      <button class='numbers button' value='8'>8</button>
      <button class='numbers button' value='9'>9</button>
      <button class='numbers button operator' value='+'>+</button>
    </div>

    <div class='row4'>
      <button class='numbers button' value='4'>4</button>
      <button class='numbers button' value='5'>5</button>
      <button class='numbers button pull' value='6'>6</button>
      <button class='button pull-right' id='equal'>=</button>
    </div>
    <div class='row5'>
      <button class='numbers button' value='1'>1</button>
      <button class='numbers button' value='2'>2</button>
      <button class='numbers button pull' value='3'>3</button>
    </div>
    <div class='row6'>
      <button class='button' id='negate'>+/-</button>
      <button class='numbers button' value='0'>0</button>
      <button class='button pull' value='.' id='dot'>.</button>
    </div>
  </div>
</div>

calculator.js

function truncateText(elementSelector) {
  var str = $(elementSelector).text();
  if (str.length > 23) {
    str = str.substr(0, 23);
    $(elementSelector).text(str);
  }
}

function count() {
  var arr = [];

  $('.numbers').click(function() {
    var val = $(this).attr('value');
    if (arr[0] === '0' && arr.indexOf('.') === -1 && arr.indexOf('/') === -1 && arr.indexOf('*') === -1 && arr.indexOf('+') === -1 && arr.indexOf('-') === -1) {
      arr = [];
      $('#result').text(''); //fix 0030, 00.03
      arr.push(val);
      $('#result').text($('#result').text() + val);
    } else if (arr[0] === '+' || arr[0] === '-' || arr[0] === '*' || arr[0] === '/') {

      $('#result').text('');
      arr = [];
    } else {
      arr.push(val);
      $('#result').text($('#result').text() + val);
      truncateText('#result');
    }
    console.log(arr)
  });
  $('#equal').click(function() {
    var len = arr.length - 1;
    if (arr[len] === '+' || arr[len] === '-' || arr[len] === '*' || arr[len] === '/') {
      $('#result').text($('#result').text());
    } else {
      var equa = eval($('#result').text());
      $('#result').text(equa);
      arr.push(equa);
      truncateText('#result');
    }
    console.log(arr)
  });
  $('#limit').click(function() {

    var lim = eval($('#result').text());

    $('#result').text(1 / lim);
    arr.push(1 / lim);
    truncateText('#result');
  });
  $('#negate').click(function() {

    var neg = eval($('#result').text());

    $('#result').text(neg * -1);
    arr.push(neg * -1);
  });
  $('#CE').click(function() {
    if (arr[0] === '+' || arr[0] === '-' || arr[0] === '*' || arr[0] === '/') {
      $('#result').text('');
    } else {
      arr.splice(-1, 1);
      $('#result').text(arr.join(''));
      truncateText('#result');
    }
  });
  $('#C').click(function() {
    $('#result').text('');
    arr = [];
  });
  $('#square').click(function() {
    var squa = eval($('#result').text());
    $('#result').text(squa * squa);
    arr.push(squa * squa);
    truncateText('#result');
  });
  $('#sqrt').click(function() {
    var sqt = Math.sqrt(eval($('#result').text()));
    $('#result').text(sqt);
    arr.push(sqt);
    truncateText('#result');
  });
  $('#dot').click(function() {
    var last = $('#result').text().slice(-1);
    if (last === '.') {
      $('#result').text();
    }
    if (arr.indexOf('.') !== -1) {
      $('#result').text();
    } else {
      arr.push('.');
      $('#result').text($('#result').text() + '.');
    }
  });
  $('.operator').click(function() {
    arr = [];
  });
}
count();