Kamalculator

index.jade

h1#title.animated.fadeIn Kamalculator
main#container.col.animated.fadeIn
 div.window
           article#ansWindow 
     div.keys
     ul.keypad2.keypads
       each val in ["+", "-", "/", "*","C"]
        button#op(
          type='button'
          name= val
          )
          li= val
     ul.keypad1.keypads
         each val in [5, 6, 7, 8, 9]
          button#num(
            type='button'
            name= val
            )
            li= val
     ul.keypad0.keypads
         each val in [0, 1, 2, 3, 4]
           button#num(
            type='button'
            name= val
            )
            li= val
        span#enter
          button(
            type='sumbit'
            name= '=') =

kamalculator.markdown

Kamalculator

its a calculator cleverly named after me

A Pen by Kameron Robinson on CodePen.

License.

script.js

var arr = [];
$('#enter').on('click', function() {
  //$('#window').fadeToggle();
  var arrStr = arr.join("");
  console.log(eval(arrStr));
  //$('#window').replaceWith(eval(arrStr));
  $(".curNums").fadeOut('fast');
  $(".curAns").fadeOut('fast');
  $('#ansWindow').append('<span class="curAns">' + eval(arrStr) + '</span>');
});

$('button#op, button#num').on('click', function() {
  if ($(this).prop('name') === "C" || $(this).prop('name') === "=") {
    $('#ansWindow').addClass("animated shake");
    setInterval(function() {
      $('#ansWindow').removeClass("animated shake");
    }, 3000);
    arr = [];
    $(".curAns").fadeOut('fast');
    $(".curNums").fadeOut('fast');
  }
  if ($(this).prop('name') !== 'C') {
    arr.push($(this).prop('name'));
    $('#ansWindow').append('<span class="curNums">' + $(this).prop('name') + '</span>');
  }
  console.log(arr);
  //console.log($(this).prop('name'));
});

scripts

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

style.sass

$font-stack:   Helvetica, sans-serif
$primary-color: #333
$bg-color: lightblue
$wdwColor: green

body
  font: 100% $font-stack
  color: $primary-color
  background-color: $bg-color
#container
  position: fixed
  top: 10%
  left: 50%
  margin-top: 50px
  margin-left: -100px
.col
  margin-top: 100px
  width: 202px
  height: 272px
  //border: 10px solid
  border-radius: 4%
  //background-color: #eee
  z-index: 100
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 6px 20px 0 rgba(0, 0, 0, 0.3)
  text-align: center
ul
  padding: 0px
  
ul.keypad0 li,ul.keypad1 li
  list-style: none
  display: inline
  padding: 0px

ul.keypad0
  margin-left: .02em
  margin-top: .5em
  margin-bottom: .5em
    
ul.keypad1
  margin-right: -1.9px
  margin-bottom: -1px
  margin-top: 0px
ul.keypad2
  margin-right: 0px
  height: 49px
  width: 200px
  margin-bottom: 0px
  //margin-left: 2px
ul.keypad2 li
  list-style: none
  padding: 0px
  margin: 0px

.keypads
  padding: 1.5px
div.keys
  //margin-left: 37px
  margin-top: 10px
  margin-right: 17px
  margin-right: 0px
  height: 195px
  width: 201px
button
  padding: 15px
  margin: -0.12099999999999999999999999999999999999em
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1), 0 6px 20px 0 rgba(0, 0, 0, 0.6)
  text-align: center
  border: .1px solid #fff
  background-color: $bg-color
  //border-radius: 9%
  //box-shadow: .3em .25em teal
.window
  height: 50px
  //border: 1px solid #000
#window
#ansWindow
  margin-right: 135px
  padding: 10px
  height: 17px
  width: 130px
  margin-top: 10px
  padding: 10px
  color: $bg-color - 100
  background-color: $bg-color - 10
  box-shadow: 0 4px 8px 0 rgba(0,0,0, 0.7), 0 6px 20px 0 rgba(0,0 , 0 , 0.08)
span#enter button
  padding-right: 176px
#title
  color: $bg-color - 30
  

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />