html, body{
   padding:0px;
   margin:0px;
   background:#222;
   font-family: 'Ubuntu', sans-serif;
   color:#FFF;
}

h4{ text-align:center; }
a{ color:white; }

.container{
   max-width:350px;
   min-height:400px;
   margin:20px auto;
   background:#CCC;
   display:flex;
   flex-direction:column;
   border-radius:4px 4px 4px 4px;
   box-shadow:0px 2px 6px rgba(0, 0, 0, 0.5);
   padding:5px;
}
.display{
   flex:1;
   background:#444;
   border-radius:4px 4px 0px 0px;
   display:flex;
   box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.display .math{
   flex: 1;
   margin:auto;
   text-align:right;
   padding:0px 34px;
   font-size:25px;
}
.buttons{
   flex:1;
   display:flex;
   flex-wrap: wrap;
   margin-top:5px;
}

.buttons .button{
   flex:1 0 auto;
   width:25%;
   height:50px;
   text-align:center;
   display:flex;
   color:black;
   cursor:pointer;
   user-select:none;
   border-radius:4px;
}

.buttons .button:hover{
   background:#444;
   color:white;
}
.buttons .button:active{
   box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.9);
}

.buttons .label{
   flex:1;
   margin:auto;
   font-size:25px;
}

//Reinvent the wheel
var $ = function(selector){ 
   var ele = document.querySelectorAll(selector);
   for(var i = 0; i < ele.length; i++){
      ele[i].on = function(event, func){ this.addEventListener(event, func); }
   }
   return ele;
};

var app = {
   display: $('.display .math')[0],
   math: '',
   init: function(){
      var buttons = $('.button');
      for(var i = 0; i < buttons.length; i++){
         buttons[i].on('click', app.input);
      }
   },
   input: function(){
      var button = this.getElementsByClassName('label')[0].innerHTML;
      switch(button){
         case 'DEL':
            app.delText();
            break;
            
         case 'AC':
            app.clearText();
            break;
         
         case '=':
            app.solve();
            break;
            
         default:
            app.addText(button)
      }
   },
   addText: function(button){
      if(app.math == '0') app.math = '';
      app.math += button;
      app.update();
   },
   delText: function(){
      var cur = app.display.innerHTML;
      app.math = app.math.slice(0, app.math.length-1);
      if(app.math == '') app.math = '0';
      app.update();
   },
   clearText: function(){
      app.math = '0';
      app.update();
   },
   solve: function(){
      app.math = eval(app.math);
      app.update();
   },
   update: function(){
      app.display.innerHTML = app.math;
   }
}

app.init();