JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="calc">
    <div id="bot">
        
        <div id="front">
            <div class="eyes">
                <div class="left eye"></div>
                <div class="right eye"></div>    
                <div id="result" class="dsp"></div>
                <div id="ro-me" class="dsp">rotate me ;-)</div>
                <div id="frmla" class="dsp">Target &divide; Context = Result</div>
            </div><!--/end .eyes-->
        

            <div id="np">            
                <a>7</a>
                <a>8</a>
                <a>9</a>
                <a>4</a>
                <a>5</a>
                <a>6</a>
                <a>1</a>
                <a>2</a>
                <a>3</a>
                <a>&divide;</a>
                <a>0</a>
                <a>=</a>
            </div><!--/#np-->
            
            <div id="ctrls" class="cf">
                <a id="clr">c</a>
                <b id="sp" class="slctd">%</b>
                <b id="sem">ems</b>
                <i id="hlp">?</i>
            </div><!--/#ctrls-->
            
            
        </div><!--/#front-->
        <div id="back">

            <div class="eyes">
                <div class="left eye"></div>
                <div class="right eye"></div>    
            </div><!--/end #eyes-->
            
            <div id="desc">
                <h1>Responsive Bot</h1>
                <p>Hallo, I am a HTML5 App that calculates responsive values using Ethan Marcotte's Responsive Web Design Formula: <strong>Target &divide; context = Results</strong></p>
            </div>

            <div id="backcta"><button id="backflip">Calculate!</button></div>
            
            <div id="instructions">
                <h4>Keyboard Instructions</h4>
                <table>
                    <tr><td>/</td><td>Divide</td></tr>
                    <tr><td>Backspace</td><td>Erase last digit</li></tr>
                    <tr><td>C</td><td>Clear input</li></tr>
                   ...

CSS

#calc{display:block;width:85%;height:31em;padding:0 0 2em 0;color:#333;position:relative;-webkit-transform:translate3d(0,0,0)}#bot{margin:0;padding:1em 0;border-radius:.75em;background-color:#fff;background-image:-webkit-gradient(linear,0% 0,0% 100%,from(#fff),to(#c8c8c8),color-stop(.4,#f8f8f8));background-image:-moz-linear-gradient(46% 15% 270deg,#f8f8f8,#cfcfcf,#cfcfcf 100%);-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.75);box-shadow:2px 2px 5px rgba(0,0,0,0.75);border-bottom:2px solid #c0c0c0;width:100%;height:100%;position:absolute}#bot>#front,#bot>#back{display:block;position:absolute;width:100%;height:100%}.sa #calc{-webkit-perspective:800}.sa #bot{-webkit-transform-style:preserve-3d;-webkit-transition:-webkit-transform .5s;-webkit-transform-origin:right center}.sa #bot>#front,.sa #bot>#back{-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden}.sa #bot>#back{-webkit-transform:rotateY(180deg)}.sa #bot.flipped{-webkit-transform:rotateY(180deg);-webkit-transform:translateX(-100%) rotateY(-180deg)}h1{font-style:normal;font-weight:600;font-size:2em;color:#111;text-shadow:-1px 0 0 #ddd}#back p,#back #instructions{width:85%;margin:1em auto;font-size:.85em;line-height:1.4em}#back p em{font-style:normal;font-size:1.30em;font-weight:600}#back p span{font-size:.8em;line-height:.9em}.eyes{position:relative;width:90%;height:4em;padding:1em 0;margin:0 auto 1em;border:1px solid #666;border-radius:.5em;background-color:#000;background-image:-webkit-gradient(linear,0% 0,0% 40%,from(#3c3c3c),to(#000),color-stop(.3,#333));background-image:-moz-linear-gradient(0% 0 270deg,#3c3c3c,#000,#000 100%);opacity:.95;-webkit-box-shadow:inset 0 1px 5px rgba(255,255,255,0.6),1px 1px 3px rgba(0,0,0,0.3);box-shadow:inset 0 1px 5px rgba(255,255,255,0.6),1px 1px 3px rgba(0,0,0,0.3)}.eye{width:2em;height:3.5em;position:absolute;margin-left:-1em;-webkit-border-radius:9999px;border-radius:100%;background-color:#6fbcf7;box-shadow:0 0 8px #5db9ff;-webkit-box-shadow:0 0 12px...

JavaScript

$(document).ready(function(){var a=$("#debug"),D=$("#result"),I=$("#frmla"),P=$("#hlp"),T=$("#clr"),Z=$("#bot"),O=$("#back"),C=$("#front"),A=$("#front .eye"),N=$("#np a"),i=$("#sp"),y=$("#sem"),b=$("#history"),e=$("#clear-history"),L=$("#paper"),v=L.height(),o="",u="",m=false,Y=true,U=true,Q=false,G=false,n=false,S=0,W=(navigator.userAgent.match(/Chrome/g))?true:false,K=($.browser.mozilla)?true:false,d=($.browser.webkit)?true:false;var E=document.getElementById("result");L.hide().css({height:0});H();p();i.click(J);y.click(z);e.click(V);T.click(w);N.click(h);$(document).keypress(j);if(!K){console.log("hello");document.onkeydown=R}document.onkeypress=R;$("#hlp").click(l);$("#backflip").click(l);function h(ab){X();var aa=$(ab.target).html();x(aa)}function j(aa){X();u=B(aa.keyCode||aa.which);console.log("key pressed: "+u+" | keyCode: "+aa.keyCode+" | which: "+aa.which);x(u)}function x(aa){if(parseInt(aa)<10){M(aa)}else{if(aa==="÷"){Q=true;M(aa)}else{if(aa==="="&&Q){q()}else{if(aa==="="&&!Q){}else{if(aa==="C"){w()}else{if(aa==="E"){z()}else{if(aa==="P"){J()}else{}}}}}}}}function M(aa){E.innerHTML+=aa;o+=aa}function w(){E.innerHTML="";o="";g();Q=false}function q(){f=o;if(f.substring(f.length-2)=="÷0"){k("÷0? Nice try")}else{f=f.split("÷");t=parseInt(f[0]);c=parseInt(f[1]);r=(t/c);r=(!m)?r*100:r;r=(r.toString().length>7)?r.toPrecision(7):r;r+=(m)?"em":"%";o="";E.innerHTML=r;G=true;Q=false;html='<ul class="row" id="row-'+S+'">';html+='<li class="t">'+t+"</li>";html+='<li class="c">'+c+"</li>";html+='<li class="r">'+r+"</li>";html+="</ul>";b.prepend(html);if(n){$("#row-"+S).hide().slideDown(600).fadeIn(400,s)}else{L.show().animate({height:v+b.height()},{duration:500,complete:s})}S++;return false}return true}function k(aa){temp=E.innerHTML;E.innerHTML=aa;setTimeout(function(){E.innerHTML=temp},2000)}function X(){if(U){F()}if(G){E.innerHTML=""}G=false}function B(ab){var aa;switch(ab){case 48:aa=0;break;case 49:aa=1;break;case 50:aa=2;break;case 51:aa=3;break;case...