a pure CSS calculator inspired by the early Casio M-1
A Pen by Alejandro Ramirez on CodePen.
a pure CSS calculator inspired by the early Casio M-1
A Pen by Alejandro Ramirez on CodePen.
<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">√</button> | |
<button class="toprow">﹪</button> | |
</div> | |
<div class="row"> | |
<button class="numbutton">7</button> | |
<button class="numbutton">8</button> | |
<button class="numbutton">9</button> | |
<button class="numbutton operation">÷</button> | |
</div> | |
<div class="row"> | |
<button class="numbutton">4</button> | |
<button class="numbutton">5</button> | |
<button class="numbutton">6</button> | |
<button class="numbutton operation">×</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">−</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> |
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); | |
} | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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; | |
} |
<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" /> |