Mini Calculator Template

HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CALK</title> </head> <body> <div id="main"> <div id="cal"> <input type="text" id="numbers" name="cal" value="0" unselectable="on" onselectstart="return false;" onmousedown="return false;" readonly> <ul id="btn"> <li id="clr" class="h24 w48 red">C</li> <li id="dau" class="h24 w48">*</li> <li id="dal" class="h24 w48">/</li> <li id="x7" class="h24 w48">7</li> <li id="x8" class="h24 w48">8</li> <li id="x9" class="h24 w48">9</li> <li id="x4" class="h24 w48">4</li> <li id="x5" class="h24 w48">5</li> <li id="x6" class="h24 w48">6</li> <li id="x1" class="h24 w48">1</li> <li id="x2" class="h24 w48">2</li> <li id="x3" class="h24 w48">3</li> <li id="x0" class="h24 w96">0</li> <li id="kab" class="h24 w48">.</li> </ul> <ul id="btn1"> <li id="min" class="h24 w48">-</li> <li id="plu" class="h48 w48">+</li> <li id="sum" class="h48 w48">=</li> </ul> </div> </div> </body> </html>
CSS
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, input, li { display: block; } table { border-collapse: collapse; border-spacing: 0; } html{font-size:62.5%;} html,body { height:100%; } body { font: 1em/1.5 font-family: 'Share Tech Mono', monospace; overflow-x: hidden; color:#555; background-image:url(../img/n.png); -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } input{font-family: 'Share Tech Mono', monospace;overflow:hidden;} #main, #cal, li{position: relative;} #btn{float: left;list-style: none;display: block; width: 80px;margin:0;padding:0;} #btn1{float: left;width:26px;display: block;margin:0;padding:0;} li{font-size:11px;font-family: Arial, sans-serif; text-shadow:0px 1px 1px #ffffff;font-weight:900; cursor:pointer;background: #eee;text-align:center;margin:1px;float: left; -webkit-box-shadow:0px 0px 0px 1px #aaaaaa inset,2px 0px 0px 0px #ffffff inset,0px -2px 0px 0px #aaaaaa inset,0px 2px 0px 0px #ffffff inset,-2px 0px 0px 0px #ffffff inset; -moz-box-shadow:0px 0px 0px 1px #aaaaaa inset,2px 0px 0px 0px #ffffff inset,0px -2px 0px 0px #aaaaaa inset,0px 2px 0px 0px #ffffff inset,-2px 0px 0px 0px #ffffff inset; box-shadow:0px 0px 0px 1px #aaaaaa inset,2px 0px 0px 0px #ffffff inset,0px -2px 0px 0px #aaaaaa inset,0px 2px 0px 0px #ffffff inset,-2px 0px 0px 0px #ffffff inset;} li:hover{background: #0f0;} .h24 {height: 12px;line-height: 12px;} .h48 {height: 26px;line-height: 26px;} .w48 {width: 24px;} .w96 {width: 50px;} .fx:after{content:"";overflow:hidden;clear: both;margin:0;padding:0;} #main{width: 110px; height: 98px; margin: 0 auto; background:#999;overflow: hidden;padding: 1px;} #cal{width:106px;height:84px;display: block; background:#ccc;padding:2px;margin:0 auto;} #cal input{cursor: pointer; text-align:right;width:104px;height: 12px;line-height: 12px;padding:0;margin:1px;border:0;} .red {background-color: #f0f;} li:hover{ transform:matrix(0.99,0.00,0.00,0.99,0,0); -ms-transform:matrix(0.99,0.00,0.00,0.99,0,0); -webkit-transform:matrix(0.99,0.00,0.00,0.99,0,0); } li:active{ transform:matrix(0.99,0.00,0.00,0.99,0,1); -ms-transform:matrix(0.99,0.00,0.00,0.99,0,1); -webkit-transform:matrix(0.99,0.00,0.00,0.99,0,1); } input { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #showkey {font-weight: 900; font-size: 9px; background: #333; color: #eee; border:0;line-height: 10px; margin: 0 auto; width: 112px; height: 10px; position: relative;display: block;padding: 0;} .loader,.loader::before, .loader::after { display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .loader { width: 72px; height: 72px; margin: auto; border: 1px solid #999; border-radius: 3px; overflow:hidden; text-align: center; -webkit-animation:spin .7s linear infinite; -moz-animation:spin .7s linear infinite; animation:spin .7s linear infinite; -webkit-transform: perspective(100px ) rotateX(180deg); transform: perspective(100px ) rotateX(180deg); background: #FFF; } .loader::before,.loader::after { content: 'Loading...'; z-index: -1; } @-moz-keyframes spin { 100% { -moz-transform: rotateX(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } } @keyframes spin { 100% { -webkit-transform: rotateY(360deg); transform:rotateY(360deg); } }
JAVASCRIPT
"use strict"; var mains = document.getElementById("main"); mains.className = "loader"; var wait = setTimeout(function() { var last = document.getElementById('main'); last.classList.remove('loader'); }, 3000); var resource = document.createElement('link'); resource.setAttribute("rel", "stylesheet"); resource.setAttribute("href","https://fonts.googleapis.com/css?family=Share+Tech+Mono"); //resource.setAttribute("type","text/css"); var head = document.getElementsByTagName('head')[0]; head.appendChild(resource); var temps = document.getElementById("numbers"); //get displays output ID var nums=0; var rep = function () { var nums = this.id; switch(nums) { case 'x0': temps.value+=this.innerHTML; break; case 'x1': temps.value+=this.innerHTML; break; case 'x2': temps.value+=this.innerHTML; break; case 'x3': temps.value+=this.innerHTML; break; case 'x4': temps.value+=this.innerHTML; break; case 'x5': temps.value+=this.innerHTML; break; case 'x6': temps.value+=this.innerHTML; break; case 'x7': temps.value+=this.innerHTML; break; case 'x8': temps.value+=this.innerHTML; break; case 'x9': temps.value+=this.innerHTML; break; case 'min': temps.value=this.innerHTML; break; case 'plu': temps.value=this.innerHTML; break; case 'dal': temps.value=this.innerHTML; break; case 'dau': temps.value=this.innerHTML; break; case 'kab': temps.value=this.innerHTML; break; case 'sum': temps.value = eval(temps.value); break; case 'clr': temps.value=0; break; default: console.log('no case'); break; } }; document.getElementById('x0').onclick = rep; document.getElementById('x1').onclick = rep; document.getElementById('x2').onclick = rep; document.getElementById('x3').onclick = rep; document.getElementById('x4').onclick = rep; document.getElementById('x5').onclick = rep; document.getElementById('x6').onclick = rep; document.getElementById('x7').onclick = rep; document.getElementById('x8').onclick = rep; document.getElementById('x9').onclick = rep; document.getElementById('clr').onclick = rep; document.getElementById('plu').onclick = rep; document.getElementById('kab').onclick = rep; document.getElementById('dau').onclick = rep; document.getElementById('dal').onclick = rep; document.getElementById('sum').onclick = rep;
Expand for more options Login