FCC Calculator

FCC Calculator.markdown

FCC Calculator

This is a JavaScript calculator that was made using Jade, Stylus, jQuery, and JavaScript. The look of the calculator is inspired by apple's calculator for mac.

A Pen by Adam Recvlohe on CodePen.

License.

index.html

h1 FCC Calculator
.container
  #output 0
  .button-container
    .button.special#clear C
    .button.special#pls-mns ±
    .button.special#percent %
    .button.operator#divide ÷
    .button.number#seven 7
    .button.number#eight 8
    .button.number#nine 9
    .button.operator#times ×
    .button.number#four 4
    .button.number#five 5
    .button.number#six 6
    .button.operator#minus -
    .button.number#one 1
    .button.number#two 2
    .button.number#three 3
    .button.operator#plus +
    .button.number#zero 0
    .button#decimal .
    .button.operator#equals =

script.js

($ => {

  let equation = new Array();
  let num = '';
  let answer = '';

  const output = symbol => {
    $('#output').html(symbol);
  }

  const pushNum = () => {
    equation.push(num);
    num = '';
  }

  const addCalc = (operator, symbol) => {
    equation.push(num);
    num = '';
    equation.push(operator);
    $('#output').html(symbol);
  }

  const calc = () => {
    pushNum();
    answer = String(eval(equation.join('')));
    answer = +parseFloat(answer).toFixed(7);
    if (answer === Infinity)
      answer = '∞';
    if (answer === -Infinity)
      answer = '-∞';
    if (answer === '3.14')
      answer = 'π';
    equation = [String(answer)];
    output(answer);
  }

  $('.button').on('click', function() {

    var val = $(this).text();

    if (isFinite(val) || val === '.') {
      num += val;
      output(num)
    } else if (val === 'C') {
      equation = [];
      num = '';
      answer = '';
      output('0');
    } else if (val === '±') {
      /-/.test(answer) ?
        answer = equation[0].replace('-', '') : answer = '-' + answer;
      equation = [String(answer)];
      output(answer);
    } else if (val === '%') {
      output(num + '%');
      num = num / 100 * equation[0];
    } else if (val === '+')
      addCalc(val, 'plus');
    else if (val === '-')
      addCalc(val, 'minus');
    else if (val === '÷')
      addCalc('/', 'over');
    else if (val === '×')
      addCalc('*', 'times');
    else if (val === '=')
      calc();
    else
      addCalc(val, num);
  });
})(jQuery);

scripts

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

style.css

body
  font-size 62.5%
  font-family: Hack, monospace
  color lighten(black, 13%)
  box-sizing: border-box
h1
  text-align center
  font-size 3em
.container
  border .5px solid black
  width 300px
  margin 20px auto
  #output
    width auto
    box-sizing border-box
    border 1px solid black
    height 65px
    padding 2px
    flex 1 1 auto
    font-size 5em
    overflow-x auto
    overflow-y hidden
    text-align right
    white-space nowrap
  .button-container
    display flex
    flex-wrap wrap
    .button
      border 1px solid grey
      flex-basis 20%
      flex-grow 1
      height 50px
      display flex
      align-items center
      justify-content center 
      font-size 2.5em
      user-select none
      &:hover
        cursor pointer
    #zero
      flex-grow 6.8
    .operator
      background-color lighten(orange, 10%)
      color white
      font-size 2.5em
    .special
      background lighten(grey, 80%)