Calculator

calculator.markdown

Calculator

A simple calculator made with Bootstrap and jQuery

A Pen by Rem Lampa on CodePen.

License.

index.html

<h1 id='title' class='text-primary'>Simple Online Calculator</h1>


<div class="container">
  <div class='row'>
    <div class='col-xs-12'>
      <input id='output' class='form-control input-lg' type='text' placeholder='0' readonly/>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-3'>
      <div class='operation btn btn-danger'>AC</div>
    </div>
    <div class='col-xs-3'>
      <div class='operation btn btn-danger'>CE</div>
    </div>
    <div class='col-xs-3'>
      <div class='operation btn btn-warning'>%</div>
    </div>
    <div class='col-xs-3'>
      <div class='operation btn btn-warning'>&divide;</div>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-3'>
      <div class='digit btn btn-default'>7</div>
    </div>
    <div class='col-xs-3'>
      <div class='digit btn btn-default'>8</div>
    </div>
    <div class='col-xs-3'>
      <div class='digit btn btn-default'>9</div>
    </div>
    <div class='col-xs-3'>
      <div class='operation btn btn-warning'>X</div>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-3'>
      <div class='digit btn btn-default'>4</div>
    </div>
    <div class='col-xs-3'>
      <div class='digit btn btn-default'>5</div>
    </div>
    <div class='col-xs-3'>
      <div class='digit btn btn-default'>6</div>
    </div>
    <div class='col-xs-3'>
      <div class='operation btn btn-warning'>&dash;</div>
    </div>
  </div>
  <div class='row'>
    <div class='col-xs-9'>
      <div class='row'>
        <div class='col-xs-4'>
          <div class='digit btn btn-default'>1</div>
        </div>
        <div class='col-xs-4'>
          <div class='digit btn btn-default'>2</div>
        </div>
        <div class='col-xs-4'>
          <div class='digit btn btn-default'>3</div>
        </div>
      </div>
      <div class='row'>
        <div class='col-xs-4'>
          <div class='digit btn btn-default'>0</div>
        </div>
        <div class='col-xs-4'>
          <div class='digit btn btn-default'>.</div>
        </div>
        <div class='col-xs-4'>
          <div class='operation btn btn-success'>=</div>
        </div>
      </div>
    </div>
    <div id='add-section' class='col-xs-3'>
      <div id='add' class='operation btn btn-primary'>+</div>
    </div>
  </div>
</div>

script.js

var calculator = {
  currentNumber: '',
  previousNumber: '',
  previousOperation: null,
  operatorReset: false,
  performOperation: function() {
    var result;

    var firstNumber = parseFloat(this.previousNumber);
    var secondNumber = parseFloat(this.currentNumber);

    switch (this.previousOperation) {
      // ÷
      case 247:
        result = firstNumber / secondNumber;
        break;
        // X
      case 88:
        result = firstNumber * secondNumber;
        break;
        // ‐
      case 8208:
        result = firstNumber - secondNumber;
        break;
        // +
      case 43:
        result = firstNumber + secondNumber;
        break;
    }
    this.previousNumber = result.toString();

    return this.previousNumber;
  }
};

$(document).ready(function() {

  $('.digit').click(function(event) {
    // prevent duplicate '.'
    if (calculator.currentNumber.length < 19 && !($(this).html() === '.' && calculator.currentNumber.indexOf('.') >= 1)) {
      if (calculator.currentNumber.length === 0 && $(this).html() === '.') {
        calculator.currentNumber += '0.';
      } else {
        // prevent non-decimal numbers starting with '0' 
        if (calculator.currentNumber === '0' && $(this).html() !== '.') {
          calculator.currentNumber = '';
        }
        calculator.currentNumber += $(this).html();
      }
      calculator.operatorReset = false;
      $('#output').val(calculator.currentNumber);
    }
  });

  $('.operation').click(function(event) {

    var currentOperation = $(this).html().charCodeAt(0);

    switch (currentOperation) {
      // AC
      case 65:
        // reset everything
        calculator.result = '0';
        calculator.previousNumber = '';
        calculator.currentNumber = '';
        calculator.previousOperation = null;
        calculator.operatorReset = false;
        $('#output').val(calculator.currentNumber);
        break;
        // CE
      case 67:
        // reset only current number
        calculator.currentNumber = '';
        calculator.operatorReset = true;
        $('#output').val(calculator.currentNumber);
        break;
        // %
      case 37:
        if (calculator.previousNumber !== '' && calculator.previousOperation > 0) {
          if (calculator.currentNumber === '') {
            calculator.currentNumber = '0';
          } else {
            calculator.currentNumber = calculator.previousNumber * calculator.currentNumber / 100;
          }
          $('#output').val(calculator.performOperation());
          calculator.currentNumber = '';
          calculator.previousOperation = null;
        }
        break;
        // &divide;
      case 247:
        // X
      case 88:
        // &dash;
      case 8208:
        // +
      case 43:
        // prevent multiple clicks of operators
        if (calculator.operatorReset) {
          calculator.previousOperation = currentOperation;
          return;
        }
        // check if we have a saved operation for execution
        if (calculator.previousOperation > 0) {
          // if we only have one number, create another one equal to zero
          if (calculator.previousNumber === '') {
            calculator.previousNumber = '0';
          }
          // perform the operation on the two numbers!
          $('#output').val(calculator.performOperation());

          // wait for another number
          calculator.currentNumber = '';
        } else {
          // no saved operation but we entered a new number
          // save the number then wait for another number
          if (calculator.currentNumber !== '') {
            calculator.previousNumber = calculator.currentNumber;
            calculator.currentNumber = '';
          }
        }
        // save the new operation for execution later
        calculator.previousOperation = currentOperation;
        calculator.operatorReset = true;
        break;
        // =
      case 61:
        // no new operation, perform saved operation
        if (calculator.previousOperation !== null) {
          $('#output').val(calculator.performOperation());
          calculator.previousOperation = null;
          calculator.currentNumber = '';
        }
        break;
    }
  });

});

scripts

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

style.css

#title {
  text-align: center;
}

.container {
  width: 250px;  
  min-width: 250px;
}

.row {
  text-align: center;
}

#output {
  width: 95%;
  text-align: right;
  padding: 10px;
  margin: 12px;
}

.btn {
  text-align: center;
  margin: 5px 0;
  min-width: 50px;
  min-height: 35px;
}

#add-section {
  padding: 0px 0px 0px 14px;
  margin: 0;
}

#add {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  padding: 29px 20px;
  text-align:center;
}

styles

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