Cacher is the code snippet organizer for pro developers

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

@import url(https://fonts.googleapis.com/css?family=VT323|Pacifico|Nova+Mono);
body {
  font-family: 'Nova Mono', monospace;
  background-image: url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/debut_light.png);
}

div,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-user-select: none;
  /* Chrome/Safari */
  
  -moz-user-select: none;
  /* Firefox */
  
  -ms-user-select: none;
  /* IE10+ */
  /* Rules below not implemented in browsers yet */
  
  -o-user-select: none;
  user-select: none;
}

.btn {
  width: 50px;
  position: relative;
  margin: 10px 5px;
  text-align: center;
  padding: 6px 0;
  box-shadow: 2px 2px 2px black;
  font-size: 1.7em;
}

.btn:active {
  top: 1px;
}

.double {
  width: 117px;
}

.result {
  position: relative;
  height: 60px;
  width: 250px;
  margin: auto;
  margin-bottom: 30px;
  border: 2px solid #888;
  border-radius: 7px;
  background-color: #6F7558;
  box-shadow: 3px 3px 4px #444 inset;
}

.result h2 {
  width: 230px;
  position: relative;
  text-align: right;
  font-family: 'VT323', monospace;
  margin: 4px 8px auto auto;
  font-size: 3em;
}

.contour {
  position: relative;
  border: 2px solid #666;
  border-radius: 25px;
  padding: 20px;
  padding-top: 40px;
  width: 320px;
  margin: 60px auto;
  background-color: #444;
  box-shadow: 5px 5px 2px #333;
}

h1.head {
  font-family: 'Pacifico', sans;
  margin-top: 40px;
  font-size: 3.4em;
  color: #555;
}

.btns {
  margin: 15px auto;
}
/* Scaling for Mobile */

@media screen and (max-width: 450px) {
  h1.head {
    display: none;
  }
  .contour {
    top: 30px;
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    left: 50%;
    margin-left: -112px;
  }
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

/**
 *     SIMPLE POCKET CALCULATOR
 *       for freeCodeCamp.com
 *
 * --------------------------------------
 *   !!! NOW RESPONSIVE !!!
 *   Scales down on small devices,
 * try resizing your page to 300px width
 * --------------------------------------
 */

$(document).ready(function() {

  var current_out = []; // display digits, as an array of chars
  var active_operator; // char in [+-*/] representing the last op button pushed
  var previous_operand; // float -the first operand for chaining ops 

  // Custom base logarithm
  // Math.log10 is unsupported in old browsers
  function getBaseLog(b, e) {
    return Math.log(e) / Math.log(b);
  }

  // fallbacks for 'weird' inputs
  function parseCurrOpnd(digitsString) {

    if (digitsString === '.') return 0.0;
    if (isNaN(parseFloat(digitsString))) return 0.0;
    else return parseFloat(digitsString);
  }

  // one callback for all the buttons
  $('.btn').click(function() {
    switch ($(this).text()) {
      case "1":
      case "2":
      case "3":
      case "4":
      case "5":
      case "6":
      case "7":
      case "8":
      case "9":
      case "0":
        {

          // if the user pressed a digit
          // add the symbol to the display array, and show it
          if (current_out.length < 10) {
            current_out.push($(this).text());
            $('.result h2').text(current_out.join(''));
          }
          break;
        }

        // if the user pressed the decimal point
        // add the symbol only if it's the first one, and show it
      case ".":
        {
          if (current_out.indexOf('.') === -1 && current_out.length < 10) {
            current_out.push($(this).text());
            $('.result h2').text(current_out.join(''));
          }
          break;
        }
      case "AC":
        {

          // ALL CLEAR
          current_out = [];
          previous_operand = undefined;
          active_operator = undefined;
          $('.result h2').text('0');
          break;
        }
      case "CE":
        {

          // CLEAR LAST IN : push back a char from display
          current_out.pop();
          var disp = (current_out.length) ? current_out.join('') : '0';
          $('.result h2').text(disp);
          break;
        }

        /* if the user pressed an operator button, the previous pending
        operation is executed and returned, then the active op is set */
      case "x":
        {
          exec_active_oper(parseCurrOpnd(current_out.join('')));
          active_operator = "x";
          break;
        }
      case "+":
        {
          exec_active_oper(parseCurrOpnd(current_out.join('')));
          active_operator = "+";
          break;
        }
      case "-":
        {
          exec_active_oper(parseCurrOpnd(current_out.join('')));
          active_operator = "-";
          break;
        }
      case "/":
        {
          exec_active_oper(parseCurrOpnd(current_out.join('')));
          active_operator = "/";
          break;
        }
      case "%":
        {

          /* % calculates the current display percent of the 
          pending operand*/
          var perc;
          if (previous_operand) {
            if (current_out.length > 0)
              perc = previous_operand * parseCurrOpnd(current_out.join('')) / 100.0;
            else
              perc = 0;
            exec_active_oper(perc);
            active_operator = undefined;
          }
        }
        break;
      case "=":
        {
          exec_active_oper(parseCurrOpnd(current_out.join('')));
          active_operator = undefined;
          break;
        }
    }
  });

  // BUSINESS LOGIC HERE
  function exec_active_oper(curr_opnd) {
    if (active_operator) {
      switch (active_operator) {
        case "x":
          {
            previous_operand *= curr_opnd;
            break;
          }
        case "+":
          {
            previous_operand += curr_opnd;
            break;
          }
        case "-":
          {
            previous_operand -= curr_opnd;
            break;
          }
        case "/":
          {
            previous_operand /= curr_opnd;
            break;
          }
      }
    } else {

      /* if there is not active pending operator, returns the current display
      as the pending operand */
      previous_operand = parseCurrOpnd($('.result h2').text());
    }

    // the calc allows max 10 digits for  rationals
    var rounder;
    if (previous_operand !== 0)
      rounder = Math.floor(getBaseLog(10, /* log10 */
        Math.abs(previous_operand)));
    else
      rounder = 0;
    rounder = Math.pow(10, 10 - rounder);
    var rounded = Math.round(previous_operand * rounder) / rounder;

    // check if output is to big to be displayed.
    // !! No scientific notation.
    if (rounded <= 9999999999 && rounded >= -9999999999) {
      $('.result h2').text(rounded);
    } else {
      $('.result h2').text('err');
      previous_operand = undefined;
    }
    current_out = [];
  }
});

<div class="container text-center">
  <h1 class="head">Simple Calculator</h1>
  <div class="contour">
    <div class="result">
      <h2>0</h2></div>
    <div class="btns">
      <div class="r">
        <div class="btn btn-danger btn-lg">AC</div>
        <div class="btn btn-danger btn-lg">CE</div>
        <div class="btn btn-primary btn-lg">%</div>
        <div class="btn btn-primary btn-lg">/</div>
      </div>
      <div class="r">
        <div class="btn btn-default btn-lg">7</div>
        <div class="btn btn-default btn-lg">8</div>
        <div class="btn btn-default btn-lg">9</div>
        <div class="btn btn-primary btn-lg">x</div>
      </div>
      <div class="r">
        <div class="btn btn-default btn-lg">4</div>
        <div class="btn btn-default btn-lg">5</div>
        <div class="btn btn-default btn-lg">6</div>
        <div class="btn btn-primary btn-lg">-</div>
      </div>
      <div class="r">
        <div class="btn btn-default btn-lg">1</div>
        <div class="btn btn-default btn-lg">2</div>
        <div class="btn btn-default btn-lg">3</div>
        <div class="btn btn-primary btn-lg">+</div>
      </div>
      <div class="r">
        <div class="btn btn-default btn-lg">0</div>
        <div class="btn btn-default btn-lg">.</div>
        <div class="btn btn-primary btn-lg double">=</div>
      </div>

    </div>
  </div>
</div>