JavaScript Calculator

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>JavaScript Calculator</title>
  <link href='https://fonts.googleapis.com/css?family=Dosis:500' rel='stylesheet' type='text/css'>
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="container-fluid background" >
  <div class="pusher"></div>
  <div class="calc" id="page">
    <div class="speaker"></div>
    <div class="screen">
      <div class="entryScreen"> 
        <h1 align= "right" id="entry">0</h1>
        <h1 align = "right" id="answer">
        </h1>  
      <div class="expression">
          <h3 align ="left" id="expression"></h3>
      </div>   
      </div>
      <div class="btnPusher"></div>
      
      <div class="row">
      <li class="btn btn-danger" id="clear"> C </li>
        <li class="btn btn-warning" id="negative"><!--<span  class="glyphicon glyphicon-plus-sign"></span> /<span class="glyphicon glyphicon-minus-sign"></span> --> - / + </li>
        <li class= "btn btn-warning" id="divide">&divide; </li>
      <li class= "btn btn-warning" id="multiply"> &times;</li>
      </div>
      <div class="row">
    <li class = "btn" id ="7">7</li>
    <li class = "btn" id="8">8</li>
    <li  class = "btn" id="9" >9</li>
    <li class ="btn btn-warning" id="minus"> - </li> 
      </div>
      <div class= "row">
      <li class ="btn" id="4">4 </li>
    <li class ="btn" id="5"> 5</li>      
    <li class ="btn" id="6"> 6</li>
      <li class ="btn btn-warning" id="add"> + </li>
      </div>
      <div class= "row">
     <li class ="btn" id="1"> 1</li>
      <li class ="btn" id="2"> 2</li>
      <li class ="btn" id="3"> 3 </li>
       
      
      </div>  
      <div class="row">
      <li class ="btn btn-primary zero" id="0"> 0 </li>
        
      <li class ="btn" id="decimal"> . </li>
      <li class ="btn btn-primary equal" id="equal"> = </li>  
      </div>
      
    </div>  
    <div class= "home">
    </div>
    <div class="innerButton"></div>
  </div>
</div>  
</div>
<div class="footer">
  <div class="text-center">Coded by Conor Hinchee</div>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/captnstarburst/javascript-calculator-RRJOyQ */
body{
/*   ///background: url('http://aarongehan.com/ux/themes/portfolio/images/rain.jpg') no-repeat center center fixed; */
}
.background{
  min-height: 800px;
/*   background-image: url('http://www.conorhinchee.tech/wood-floor.jpg'); */
   background-repeat: no-repeat;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  background-color: #D9D6CF;
}
.footer{
  background-color : #D9D6Cf;
}
.pusher{
  padding-bottom : 15%;
}
.btnPusher{
  padding-bottom : 10%;
}
.calc{
  background-color: #253529;
  height: 500px;
  width: 300px;
  padding-right : 50px;
  border-radius: 25px;
  margin: 0 auto;
  box-shadow: 5px 5px 5px #888888;
  border-color: #C9C0BB;
  border-style: solid;
  border-width: 4px;
}
li{
  color: #FEFEFE;
  /*font-family: 'Headland One', serif;*/
  font-family: 'Dosis', sans-serif;
  
  margin: 10px 0px 0px 19px;
  
}
.btn{
  background: grey ; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(grey, black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(grey, black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(grey, black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(grey, black); /* Standard syntax */
  width: 50px;
  height: 45px;
  border-radius: 8px;
}
.equal{
  height: 40px;
  
}
.zero{
  width: 120px;
  
}
.btn:hover, .btn:focus, .btn:active, .btn.active  {
     
    border-color: white; /*set the color you want here*/
  background: white ; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(white, black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(white, black); /* Standard syntax */
}
.home{
  width: 50px;
	height: 50px;
	background: black;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  
  margin: 10px 0px 0px 120px;
  box-shadow: 0 0 3px 0px rgba(255,255,255, .1);
}
.speaker{
  width: 70px;
	height: 8px;
	background: black;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  -webkit-border-image: 
    	-webkit-gradient(linear, 0 0, 0 100%, from(#777), to(rgba(50, 50, 50, 0))) 1 100%;
  box-shadow: inset 1px -1px 1px #222,
              0 5px 60px #aaa;
  margin: 30px 0px 0px 106px;
}
.innerButton{
   
    margin : -35px 0px 0px 135px;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: black;
  box-shadow: inset 0 0 1px 2px rgba(255,255,255, .1);
 box-shadow: inset 1px -1px 1px #222,
              0 5px 60px #aaa; 
}
.screen{
  background: ;
  width 300px;
  height: 370px;
  margin: 15px -45px 10px 5px;
  box-shadow: inset 0 0 15px 2px rgba(0,0,0, .2), 0 0 2px 2px rgba(255,255,255, .03);
}
.entryScreen{
  background: white;
  /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(white,#01786F ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(white, #01786F); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(white, #01786F); /* For Firefox 3.6 to 15 */
    /*background: linear-gradient(white, tan); /* Standard syntax */
  width : 283px;
  height : 70px;
  font-family: 'Dosis', sans-serif;
}
.expression{
  margin: -16px 0px 0px 5px; 
}

/*Downloaded from https://www.codeseek.co/captnstarburst/javascript-calculator-RRJOyQ */
window.addEventListener("keydown", function(evt) {
  
  var digits = /['0123456789']/;
  var symbols = /['+''\-''*''/']/;
  
  if(evt.key === "Backspace"){
     evt.preventDefault();
     clear();
  }else if(evt.key.match(digits)){
    keyPress(evt.key);
  }else if(evt.key.match(symbols)){    
    expPress(evt.key);
  }else if(evt.key === "Enter"){
    equals();
  }else if(evt.key == "."){
    keyPress(evt.key);
  }
  
}, true);

$(document).ready(function() {

  $(function(){ $('#page').focus(); });
  
  $("#clear").on("click", function() {
    clear();
  });
  
  $("#negative").on("click", function() {
     keyPress("-");
  });
  
  $("#divide").on("click", function() {
    //alert("mulitply");
    expPress("/");
  });
  
  $("#multiply").on("click", function() {
    //alert("mulitply");
    expPress("*");
  });
  
  $("#7").on("click", function() {
    keyPress("7");
  });
  
  $("#8").on("click", function() {
    keyPress("8");
  });
  
  $("#9").on("click", function() {
    keyPress("9");
  });
  
  $("#minus").on("click", function() {
      expPress("-");
  });
  
  $("#4").on("click", function() {
    keyPress("4");
  });
  
  $("#5").on("click", function() {
    keyPress("5");
  });
  
  $("#6").on("click", function() {
    keyPress("6");
  });
  
  $("#add").on("click", function() {
      expPress("+");
  });
  
  $("#1").on("click", function() {
    keyPress("1");
  });
  
  $("#2").on("click", function() {
    keyPress("2");
  });
  
  $("#3").on("click", function() {
    keyPress("3");
  });
  
  $("#0").on("click", function() {
    keyPress("0");
  });
  
  $("#decimal").on("click", function() {
    keyPress(".");
  });
  
  $("#equal").on("click", function() {
    equals();  
  });
  
});

function updateEntry(str){
  $("#entry").html(str);
}

function getEntry(){
  return $("#entry").text();
}

function updateExpression(str){
  $("#expression").html(str);
}

function getExpression(){
  return $("#expression").text();
}

function updateAnswer(str){
  $("#entry").hide();
  $("#entry").html("0");
  $("#answer").html(str);
  $("#answer").show();
}

function keyPress(event){
  $("#answer").hide();
  $("#entry").show();
  
  var getNum = getEntry();
  var combo = "";
  var err = "err : ";
 //alert(getNum.length);
  if(getNum.length === 15){
    updateEntry(err + "limit");
    event = "";
  }else if(getNum === err + "limit"){
    updateEntry(event);
    event = "";
  } 
  switch (event){
      
    case '7':   if(getNum === "0"){
                  combo = event;
                }else{
                  combo = getNum + event;
                }
                updateEntry(combo);     
                break;
    case '8':   if(getNum === "0"){
                  combo = event;
                }else{
                  combo = getNum + event;
                }
                updateEntry(combo);
                break;
    case '9':   if(getNum === "0"){
                  combo = event;
                }else{
                  combo = getNum + event;
                }
                updateEntry(combo);
                break;
    case '4':   if(getNum === "0"){
                  combo = event;
                }else{
                  combo = getNum + event;
                }
                updateEntry(combo);
               break;
    case '5':   if(getNum === "0"){
                  combo = event;
                }else{
                  combo = getNum + event;
                }
                updateEntry(combo);
                break;
    case '6':   if(getNum === "0"){
                  combo = event;
                }else{
                  combo = getNum + event;
                }
                updateEntry(combo);
                break;
    case '1':   if(getNum === "0"){
                  combo = event;
                }else{
                  combo = getNum + event;
                }
                updateEntry(combo);
                break;
    case '2':   if(getNum === "0"){
                  combo = event;
                }else{
                  combo = getNum + event;
                }
                updateEntry(combo);
                break;
    case '3':   if(getNum === "0"){
                  combo = event;
                }else{
                  combo = getNum + event;
                }
                updateEntry(combo);
                break;
    case '0': 
                if(getNum === "0"){
                  combo = event;
                }else{
                  combo = getNum + event;
                }
                updateEntry(combo);
                break;
    case ".":
                if(getNum.indexOf('.') === -1){
                  combo = getNum + event;
                }else{
                  combo = getNum;
                }
                updateEntry(combo);
                break;
    case "-":
             if(getNum.indexOf('-') === -1){
               combo = event + getNum;
             }else{
               combo = getNum.slice(1);
             }
              updateEntry(combo);
              break;
    case 'default':
      
                 break;
  }
};

function clear(){
  $("#entry").show();
  $("#answer").hide();
  var getNum = getEntry();
  
  if(getNum === "0"){
    updateExpression("");
  }else{
    updateEntry("0");
  }
};

function expPress(event){
  var gtEntry = getEntry();
  var gtExpression = getExpression();
  
  
  if(gtEntry === '0' && gtExpression === ""){
      //doNothing!!!!
  }else if(gtExpression.length > 0){
    var maths = doMaths(gtExpression, gtEntry);
    //alert(maths);
    updateAnswer(maths);
    updateExpression(maths + " "+ event );
  }else{
    updateEntry("0");
    updateExpression(gtEntry + " " + event + " ");
  }
  
};

function equals(){
    var entry = getEntry();
    var expression = getExpression();
  
    if(expression === ""){
     //do Nothing
    }else{
      var maths = doMaths(expression, entry);
      updateAnswer(maths);
      updateExpression("");
    }
}

function doMaths(exp, entry){
  
 var expSplit = exp.split(" ");
  var symbols = /['+''\-''*''/']/;
  var numbers = [];
  var answer;
  
  
  console.log(expSplit);
   
  numbers.push(parseFloat(expSplit[0]));
  numbers.push(parseFloat(entry));
  console.log(numbers);
  
  switch(expSplit[1]){
    
    case '/' :
              answer = numbers[0] / numbers[1];
              console.log(answer);
              break;  
    case '*' :
              answer = numbers[0] * numbers[1];
              break;
    case '-' :
              answer = numbers[0] - numbers[1];
              break;
    case '+' :
              answer = numbers[0] + numbers[1];
              break;
    case 'default':
                  console.log("this shouldnot happen");
                  break;
  }
 //alert(answer); 
  
 answer = answer.toString();
 return answer;
}

Comments