Jean's Simple Calculator

index.html

html
  head
    title Jean's Simple Calculator

  body
    .calculator
      p#title Jean's
      p#subtitle Simple Calculator
      input(type='text' disabled)#answer
      .row
        button.ctrl AC
        button.ctrl CE
        button %
        button ÷
      .row
        button 7
        button 8
        button 9
        button x
      .row
        button 4
        button 5
        button 6
        button -
      .row
        button 1
        button 2
        button 3
        button.tall +
      .row
        button 0
        button .
        button =

Jean's Simple Calculator.markdown

Jean's Simple Calculator

A simple calculator built using JavaScript.

A Pen by Jean on CodePen.

License.

script.js

var entries = [];
var total = 0;

var temp = '';
$("button").on('click', function() {
  var val = $(this).text();

  if (!isNaN(val) || val === '.') {
    temp += val;
    $("#answer").val(temp.substring(0, 10));

  } else if (val === 'AC') {
    entries = [];
    temp = '';
    total = 0;
    $("#answer").val('')

  } else if (val === 'CE') {
    temp = '';
    $("#answer").val('')

  } else if (val === 'x') {
    entries.push(temp);
    entries.push('*');
    temp = '';

  } else if (val === '÷') {
    entries.push(temp);
    entries.push('/');
    temp = '';

  } else if (val === '=') {
    entries.push(temp);

    var nt = Number(entries[0]);
    for (var i = 1; i < entries.length; i++) {
      var nextNum = Number(entries[i + 1])
      var symbol = entries[i];

      if (symbol === '+') {
        nt += nextNum;
      } else if (symbol === '-') {
        nt -= nextNum;
      } else if (symbol === '*') {
        nt *= nextNum;
      } else if (symbol === '/') {
        nt /= nextNum;
      }

      i++;
    }

    if (nt < 0) {
      nt = Math.abs(nt) + '-';
    }

    $("#answer").val(nt);
    entries = [];
    temp = '';

  } else {
    entries.push(temp);
    entries.push(val);
    temp = '';
  }
});

scripts

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

style.css

@import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Merriweather|Righteous|Tinos);

$darkGrey: #4d4c4c;
$realGreen: #0f9d58;
$goodRed: #ec2704;
$niceBlue: #2e3a98;
$someGrey: #c0c1c5;
$white: #f4f5fb;
$lightGrey: #eaeaec;
$black: #000000;

body, html {
  width: 100%;
  background-color: $someGrey;
}

.calculator {
  width: 260px;
  height: 335px;
  background-color: $darkGrey;
  margin: 0 auto;
  border-radius: 20px;
  box-shadow: inset 5px 0 10px -5px darken($black, 20),
              inset -5px 0 10px -5px darken($black, 20),
              inset 0px -5px 10px -2px darken($black, 20),
                    0 0 1px 2px darken($black, 20),
                    0 10px 20px 0 darken($black, 30);
}

p#title {
text-align: center;
    padding-top: 10px;
    margin-bottom: -10px;
    color: $white;
    font-family: 'Merriweather';
  }

p#subtitle {
    text-align: center;
    text-transform: uppercase;
    color: $lightGrey;
    font-family: 'Righteous';
    font-size: .7em;
  }

input[type='text'] { 
  background-color: $realGreen;
    border: 1px ($realGreen, 10);
    line-height: 40px;
    width: 80%;
    font-size: 2em;
    direction: rtl;
    font-family: 'Tinos';
    padding-right: 10px;
  margin-left: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: inset 0px -2px 10px ($realGreen, 10);
    &:focus {
      outline: none;
    }
  }

.row {
    display: block;
  margin-left: 10%;
    button {
      width: 40px;
      height: 30px;
      border: 1px solid $niceBlue;
      border-top: 2px solid
lighten($niceBlue, 20);
      @include background-image(linear-gradient(to bottom, $niceBlue, darken($niceBlue, 10)));
      color: white;
      font-size: 1.1em;
      border-radius: 20%;
      border-top-left-radius: 80%10px;
      border-top-right-radius: 80%10px;
      border-bottom-left-radius: 100%10px;
      border-bottom-right-radius: 100%10px;
      margin-left: 5px;
      margin-right: 5px;
      margin-bottom: 8px;
      box-shadow: inset 0 1px 4px lighten($niceBlue, 20),
                  inset 0 -4px 20px darken($niceBlue, 10),
                        0 3px 1px 0 darken($niceBlue, 10);
      &:focus {
        outline: 0;
      }     
     
      &:active {
        @include background-image(linear-gradient(to top, $niceBlue, darken($niceBlue, 10)));
      }
      
    }
    .ctrl {
      border: 1px solid $goodRed;
      border-top: 2px solid lighten($goodRed, 20);
      @include background-image(linear-gradient(to bottom, $goodRed, darken($goodRed, 10)));
      box-shadow: inset 0 1px 4px lighten($goodRed, 20),
                  inset 0 -4px 20px darken($goodRed, 10);
      &:active {
        @include background-image(linear-gradient(to top, $goodRed, darken($goodRed, 10)));
      }
    }
    .tall {
      height: 65px;
      float: right;
      margin-right: 27px;
      margin-left:  -8px;
    }
}