Calculator

Calculator.markdown

Calculator

a pure CSS calculator inspired by the early Casio M-1

A Pen by Alejandro Ramirez on CodePen.

License.

index.html

<div class="calculator">
    <div class="display">
    </div>
    <div class="row">
      <button class="toprow ac">AC</button>
      <button class="toprow">C</button>
      <button class="toprow">MR</button>
      <button class="toprow">&#8730</button>
      <button class="toprow">&#65130;</button>
    </div>
    <div class="row">
        <button class="numbutton">7</button>
        <button class="numbutton">8</button>
        <button class="numbutton">9</button>
        <button class="numbutton operation">&#247;</button>
    </div>
     <div class="row">
        <button class="numbutton">4</button>
        <button class="numbutton">5</button>
        <button class="numbutton">6</button>
       <button class="numbutton operation">&#215;</button>
    </div> 
    <div class="row">
      <button class="numbutton"><span>1</span></button>
        <button class="numbutton">2</button>
        <button class="numbutton">3</button>
      <button class="numbutton operation">&#8722;</button>   
    </div> 
    <div class="row">
        <button class="numbutton">0</button>
      <button class="numbutton">.</button>
        <button class="numbutton operation">=</button>
      <button class="numbutton operation">+</button>
    </div>
</div>

script.js

var Calculator = (function(){
  var MAX_CHARS = 12;
  var digitBuffer = "";
  var insertDigit = function(value){
    if (digitBuffer.length <= MAX_CHARS) {
      digitBuffer += value;
    }
    return digitBuffer;
  };
  var add = function(value,callback){
    stack = stack + value;
    callback();
  };
  var substract = function(value, callback){
    stack =  stack - value;
    callback();
  };
  var multiply = function(value, callback) {
    stack = stack * value;
    callback();
  };
  var divide = function(value, callback) {
    stack = stack / value;
    callback();
  };
  var reset = function(callback){
    stack = 0;
  }

  var getStack = function() {
    return stack;
  };
  return {
    insertDigit: insertDigit,
    add: add,
    substract: substract,
    multiply: multiply,
    divide: divide,
    reset: reset,
    result: getStack,
    
  };
})();

$(function() {
    $(".display").attr('data-before','0');
});


$( ".numbutton" ).click(function() {
  if ($(this).is('.operation')){
    $(".display").attr('data-before','woop!');
  }
  else {
    var current = Calculator.insertDigit($(this).text());
    $(".display").attr('data-before',current);
  }
});

scripts

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

style.css

html {
  background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
  background-color: #ffffff;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
}

.calculator:before {
  background-color: salmon;
  width: 480px;
  height: 420px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -140px;
  /* (width + padding)/2 */
  
  margin-top: -210px;
  /* (height + padding)/2 */
  border-radius: 20px;
  z-index: -2;
}

.calculator {
background: url('http://api.thumbr.it/whitenoise-361x370.png?background=2d2a2eff&noise=8b7894&density=17&opacity=24');
  width: 260px;
  height: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -130px;
  /* (width + padding)/2 */
  
  margin-top: -225px;
  /* (height + padding)/2 */
  border-radius: 20px;
  box-shadow: 0 8px 0 10px rgba(255,255,255,1);
}

.display {
  position: relative;
  width: 220px;
  height: 90px;
  margin-top: 100px;
}

.display:after {
  padding: 18px;
  background-color: #000000;
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  color: #07BF6F;
  content: attr(data-before);
  text-align: right;
  text-shadow: 0 0 20px rgba(255,255,255,1) ;
  position: absolute;
  border-radius: 5px;
  box-shadow: 2px -3px 8px -2px rgba(173,168,173,1);
  top: 0; bottom: 0; left: 10%; right: -10%;
  z-index: 2;
  transform: perspective(50em) rotateX(20deg);
  line-height: 80px;
}

.display:before {
  padding: 10px 0 0 20px;
  background-color: silver;
  font-size: 12px;
  line-height: 12px;
  color: black;
  content: "PERSONAL M1";
  position: absolute;
  border-radius: 0;
  top: 0; bottom: 70%; left: 11%; right: -9%;
  z-index: 3;
  transform: perspective(50em) rotateX(20deg);
}

.row {
  overflow: hidden;
  margin: 0 10px 0px 18px;
}

.numbutton:focus {
  outline: none;
}

.numbutton {
  float: left;
  border: 1px solid;
  border-radius: 10px;
  margin: 10px;
  width: 35px;
  height: 29px;
  box-shadow: 1px 1px 5px -1px rgba(0, 0, 0, 1),
    inset 1px 1px 12px 1px white;
  background-color: #CBCCC7;
  font-family: 'Michroma', sans-serif;
  font-size: 18px;
  line-height: 18px;
}

.toprow{
  border: 0 solid;
  background-color: #000000;
  border-radius: 4px;
  color: #CBCCC7;
  font-family: 'Michroma', sans-serif;
  font-size: 12px;
  line-height: 18px; 
  width: 38px;
  margin: 12px 2px;
}

.ac {
  border: 0 solid;
  background-color: #DC3717;
}

styles

<link href="https://fonts.googleapis.com/css?family=Michroma" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet" />
<link href="https://fontlibrary.org/face/jura" rel="stylesheet" />