Calculator App

In this example below you will see how to do a Calculator App with some HTML / CSS and Javascript

Calculator Application made in JavaScript

Thumbnail
This awesome code was written by erkand-imeri, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright erkand-imeri ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Calculator App</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="calculator">
   <div class="row">
    <span id="tapp">CALCULATOR</span>
   </div>
 <div class="row">
     
   <input type="text" id="resultscreen"   disabled/>
</div>

   <div class="row">
   <button class="pnt keys" value="AC">AC</button>
     <button class="pnt keys" value="CE">CE</button>
   <button class="opp keys" value="%">%</button>
   <button  class="opp keys" value="/">/</button>
   </div>
   <div class="row">
   <button class="keys" value="7">7</button>
     <button class="keys" value="8">8</button>
   <button class="keys" value="9">9</button>
   <button class="opp keys" value="*">X</button>
   </div>
   <div class="row">
   <button class="keys" value="4">4</button>
     <button class="keys" value="5">5</button>
   <button class="keys" value="6">6</button>
   <button class="opp keys" value="-">-</button>
   </div>
   <div class="row">
   <button class="keys" value="1">1</button>
     <button class="keys" value="2">2</button>
   <button class="keys" value="3">3</button>
   <button id="cmplus" class="opp keys" value="+">+</button>
   </div>
   <div class="row">
   <button class="keys" value="0">0</button>
     <button class="opp keys" value=".">.</button>
   <button class="opp" id="equal" value="=">=</button>
   
   </div>
  
 </div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/erkand-imeri/calculator-app-PZoBpy */
@import url(https://fonts.googleapis.com/css?family=Dosis);
body
{
  background-color:#7c7069;
}
#calculator
{
   width: 280px;
  margin: 0 auto;
  margin-top: 40px;
  height:  370px;
  background-color: #c5beb9;
  border-radius: 70px/25px;
 -webkit-box-shadow: 0px 5px 14px ;
 box-shadow: 0px 5px 14px ;
  text-align: center;
}
#resultscreen
{
  width:  230px;
  height: 50px;
  background: #b5b596;
  margin:  auto;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: inset 2px -2px 8px #969669;
  color: black;
  font-size: 38px;
  text-align: right;
  font-weight: bold;
}
#tapp
{
  display:table;
  margin:0 auto;
  margin-top: 10px;
  font-family: 'Dosis', sans-serif;
  font-weight: bold;
  font-size: 18px;
}
button
{
  width: 55px;
  height: 35px;
  border-radius: 20px/80px;
  margin-top: 15px;
  color: white;
  background-color: #060613;
   }
button:focus {outline:0;}
.pnt
{
  background-color: #cc2900;
}
.opp
{
  border: 2px solid #b36b00;
  font-size:  18px;
  }
#cmplus
{
 height: 85px;
  float: right;
  margin-right: 13%;
  margin-left: -13%;
}
.row:last-child
{
  float:  left;
  margin-top: -18%;
  margin-left: 9%;
}

/*Downloaded from https://www.codeseek.co/erkand-imeri/calculator-app-PZoBpy */
(function(){
  
  var keys=document.getElementsByClassName("keys");
  var operators = ['+', '-', '*', '%','/'];
  var result=document.getElementById("resultscreen"); 

  
for( var i=0; i<keys.length; i++){
    keys[i].addEventListener("click", function(e) { 
    
  addtoscreen(e.target.value);
    
    });
}

var equalsto=document.getElementById('equal');  
  
  equalsto.addEventListener('click',function(){
     var temp=eval(result.value);
    result.value=temp;
    
    
  });
  
  
 
function addtoscreen(vlin)
  {
    var str=result.value;
    var lastChar = str[str.length - 1];
   
 if(isNaN(lastChar) &&  isNaN(vlin))
    {}
    else
      {
        str+=vlin;
      }
         
   
  if(vlin==='AC'){result.value='';}
    else if(vlin==='CE')
      {
        var temp=result.value;
        var len=temp.length-1;
        var newtemp=temp.substring(0,len);
        result.value=newtemp;
      }
    else{
      result.value=str;}
   }
  
 
  
  
})();

Comments