<div id="MainBox">
  <div id="AltBox">
    <p class="marca" >Simple Calculator 1.0</p>
    <div class="Screen">
         <div class="Shine"></div>
         <div class="TextScreen">
             <input type="text"
                    id="numbers"
                    maxlength="10"
                    value="0"
                    readonly="true"/>
         </div>
    </div>
    <ul>
      <li><a onclick="updatePanel(this)" href="#">7</a></li>
      <li><a onclick="updatePanel(this)" href="#">8</a></li>
      <li><a onclick="updatePanel(this)" href="#">9</a></li>
      <li><a onclick="doOperation(this.innerHTML)" href="#">/</a></li>
      <li><a onclick="updatePanel(this)" href="#">4</a></li>
      <li><a onclick="updatePanel(this)" href="#">5</a></li>
      <li><a onclick="updatePanel(this)" href="#">6</a></li>
      <li><a onclick="doOperation(this.innerHTML)" href="#">*</a></li>
      <li><a onclick="updatePanel(this)" href="#">1</a></li>
      <li><a onclick="updatePanel(this)" href="#">2</a></li>
      <li><a onclick="updatePanel(this)" href="#">3</a></li>
      <li><a onclick="doOperation(this.innerHTML)" href="#">-</a></li>
      <li><a onclick="updatePanel(this)" href="#">0</a></li>
      <li><a onclick="doControl(this.innerHTML)" href="#">.</a></li>
      <li><a onclick="doControl(this.innerHTML)" href="#">C</a></li>
      <li><a onclick="doOperation(this.innerHTML)" href="#">+</a></li>
      <li><a class="igual" onclick="doControl(this.innerHTML)" href="#">=</a></li>
    </ul>
    <p class="credits">Created by CodeLine128. 2014</p>
  </div>
  
</div>
@import url(https://fonts.googleapis.com/css?family=Nova+Mono);

*{
  font-family: 'Nova Mono';
}
body{
  background-color: #e74c3c;
}
a{
  text-decoration:none;
}
a:hover{
  background:#008870;
}
#MainBox{
  position:relative;
}
#AltBox{
  position:absolute;
  right:0; left: 0; 
  margin:auto; margin-bottom:1em;
  width: 300px; height: auto;
  background-color: #232323;
  border-radius: 10px;
  padding: 1em;
  box-shadow: 0px 0px 8px black;
}
.marca{
  text-align: right;
  color:#95a5a6;
  font-size: 12px;
  margin-top: 0;
}
.Shine{
  position:absolute;
  z-index:3;
  width:100%;
  height:40px;
  background:rgba(255,255,255,0.2);
}
.Screen{
  position:relative;
  width:100%; height: 80px;
  background-color:#3498db;
  box-shadow: inset 0px 0px 20px #34495e;
}
.igual{
  margin-bottom:-1em;
  background-color: #1260FF;
  width:264px;
  border-radius:10px;
  
}
.igual:hover{
  background-color: #1280FF;
  
}
#numbers{
  position:absolute;
  z-index: 4;
  height:100%;
  width:100%;
  border:none;
  background:transparent;
  font-size: 48px;
  padding:10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;   
  box-sizing: border-box;     
  color: rgba(2,2,2,0.7);
  text-align: right;
  
}
ul{
  position:relative;
  list-style:none;
  padding:1em;
}
ul > li{
  display:inline-block;
}
ul > li > a{
  display:block;
  text-align:center;
  line-height: 60px;
  color:white;
  width:60px; height:60px;
  font-size:26px;
  border-radius:100%;
  background:#008845;
  margin:10px 0 10px 0;
}
.credits{
  position:absolute;
  font-size:14Px;
  padding-top:10px;
  padding-bottom:10px;
  color:#FFAAAA;
}
var result = 0;
var operation = false;
var lastoperator = '';

//Control and especial keys
function doControl(evt){
  var tempValue= document.getElementById("numbers").value;
  switch(evt){
      case 'C':
           document.getElementById("numbers").value = '0'; 
           result=0; operationsymbol = '';
           break;
      case '=':
            doOperation(lastoperator);
            result=0;
            operation=true;
            break;
      case '.':
            if(tempValue.indexOf('.') == -1){
              var lastdata=document.getElementById("numbers").value;
              lastdata = lastdata + '.';
              document.getElementById("numbers").value = lastdata;
            }
            break;
      break;
  }
}

//Math operations
function doOperation(evt){
  var tempValue= parseFloat(document.getElementById("numbers").value);
  switch(evt){
      case '+':
        result+=tempValue;
        document.getElementById("numbers").value = result;
        operation=true;
        lastoperator=evt;
        break;
      case '*':
        if (result != 0)
          result= result*tempValue;
        else
          result= tempValue;
      
        document.getElementById("numbers").value = result;
        operation=true;
        lastoperator=evt;
        break;
      case '/':
        if (result != 0)
          result= result/tempValue;
        else
          result= tempValue;
      
        document.getElementById("numbers").value = result;
        operation=true;
        lastoperator=evt;
        break;
      case '-':
        if (result != 0)
          result= result-tempValue;
        else
          result= tempValue;
      
        document.getElementById("numbers").value = result;
        operation=true;
        lastoperator=evt;
        break;
          
  }
}
//Update the calculator screen with the new information
function updatePanel(evt){
          var lastdata=document.getElementById("numbers").value;
          if(lastdata=='0') lastdata='';
          
          if(operation){
            lastdata = evt.innerHTML;
            operation=false;
          }
          else{
            lastdata = lastdata + evt.innerHTML;
          }
           
  
          document.getElementById("numbers").value = lastdata;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.