JavaScript Calculator created as a zipline for FreeCodeCamp

index.html

<div id="mainPage" class="rounded">

  
  <div class="small" align="center" id="titleName"><h4> Sandip Electronic Calculator </h3></div>
  
<div align="center"><h5> Free Code Camp<h5></div>
  
  <div id="display" align="right" class="rounded"> 
  <p id="screenP"><b>0</b></p>
   </div>
  
  
 <div id="buttons">
   
<div class="btn-toolbar" >
<button type="button" class="btn btn-danger" id="buttonSize" onClick= clickAC()>AC</button>
    
 <button type="button" class="btn btn-danger" id="buttonSize" onClick= clickAC()>CE</button>
    
<button type="button" class="btn btn-primary" id="buttonSize" onClick= userClick("percent")> %</button>
    
 <button type="button" class="btn btn-primary" id="buttonSize" onClick= userClick("root")> √</button>
 
</div>
   
   
<div class="btn-toolbar">
<button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("seven")>7</button>
  
<button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("eight")>8</button>
  
<button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("nine")>9</button>
  <button type="button" class="btn btn-primary" id="buttonSize" onClick= userClick("divide")>/</button>
  

</div>
   
   
   
<div class="btn-toolbar">
<button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("four")>4</button>
  
 <button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("five")>5</button>
  
 <button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("six")>6</button>
  <button type="button" class="btn btn-primary" id="buttonSize" onClick= userClick("multiply")>×</button>
  

</div>
   
   
 <div class="btn-toolbar">
 <button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("one")>1</button>
   
  <button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("two")>2</button>
   
 <button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("three")>3</button>
    <button type="button" class="btn btn-primary" id="buttonSize" onClick= userClick("subtract")>-</button>
 

   
 </div>
   
   
 <div class="btn-toolbar">
 <button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("zero")>0</button>
   
 <button type="button" class="btn btn-primary" id="buttonSize" onClick= userNumber("dot")>.</button>
   
 <button type"button" class="btn btn-primary" id="buttonSize" onClick= "clickEqual()">=</button>
   
 <button type="button" class="btn btn-primary" id="buttonSize" onClick= userClick("add")>+</button>
   
   

</div>
   
  </div>
</div> <!--  this is for the mainpage -->

JavaScript Calculator

Sandip Subedi Calculator
------------------------


A [Pen](http://codepen.io/sandipsubedi/pen/MKJyLg) by [Sandip Subedi](http://codepen.io/sandipsubedi) on [CodePen](http://codepen.io/).

[License](http://codepen.io/sandipsubedi/pen/MKJyLg/license).

script.js

var toReturn = "";
  
var firstNumber = 1;
var secondNumber = 1;
var toDo = "";
var myBoo = false;
// myBoo will be true when we already got the first number

var functionCount = 0;


var toDisplay = "";

function userNumber(whereNumber){  

switch(whereNumber){
case "seven":
 toDisplay +="7";
  document.getElementById("screenP").innerHTML = toDisplay;
 break;
      
case "eight":
toDisplay +="8";
  document.getElementById("screenP").innerHTML = toDisplay;
 break;
      
 case "nine":
 toDisplay +="9";
 document.getElementById("screenP").innerHTML = toDisplay;
 break;
      
 case "four":
 toDisplay +="4";
 document.getElementById("screenP").innerHTML = toDisplay;
 break;
      
 case "five":
 toDisplay +="5";
 document.getElementById("screenP").innerHTML = toDisplay;
 break;
    
    
case "six":
 toDisplay +="6";
 document.getElementById("screenP").innerHTML = toDisplay;
 break;
      
    
case "one":
 toDisplay +="1";
 document.getElementById("screenP").innerHTML = toDisplay;
 break;
      
      case "two":
 toDisplay +="2";
 document.getElementById("screenP").innerHTML = toDisplay;
 break;
      
      case "three":
 toDisplay +="3";
 document.getElementById("screenP").innerHTML = toDisplay;
 break;
      
      case "zero":
 toDisplay +="0";
 document.getElementById("screenP").innerHTML = toDisplay;
 break;
    
 case "dot":
 toDisplay +=".";
 document.getElementById("screenP").innerHTML = toDisplay;
 break;
         
  }

  
}



function userClick(where){
 var temp = "";
  functionCount ++ ;
    if(functionCount > 1){
    clickEqual();
  }

  
switch(where){
    
 case "root":
 temp = document.getElementById("screenP").innerHTML;
 firstNumber = parseInt(temp);
document.getElementById("screenP").innerHTML = "√";
toDo = "root";
myBoo = true;
toDisplay = "";
break;    
    
    
 case "percent":
 temp = document.getElementById("screenP").innerHTML;
 firstNumber = parseInt(temp);
document.getElementById("screenP").innerHTML = "%";
toDo = "percent";
myBoo = true;
toDisplay = "";
break;
     
 case "divide":
 temp = document.getElementById("screenP").innerHTML;
 firstNumber = parseInt(temp);
     document.getElementById("screenP").innerHTML = "/";
     toDo = "divide";
     myBoo = true;
    toDisplay = "";
     break;
     
  case "multiply":
 temp = document.getElementById("screenP").innerHTML;
 firstNumber = parseInt(temp);
     document.getElementById("screenP").innerHTML = "*";
     toDo = "multiply";
        myBoo = true;
    toDisplay = "";
     break;
     
     
 case "subtract":
 temp = document.getElementById("screenP").innerHTML;
 firstNumber = parseInt(temp);
     document.getElementById("screenP").innerHTML = "-";
     toDo = "subtract";
        myBoo = true;
    toDisplay = "";
     break;
     
     
  case "add":
 temp = document.getElementById("screenP").innerHTML;
 firstNumber = parseInt(temp);
document.getElementById("screenP").innerHTML = "+";
     toDo = "add"; 
        myBoo = true;
    toDisplay = "";
     break;
 }
    
}

function clickAC(){
  toReturn = "";
  myBoo = false;
firstNumber = 1;
secondNumber = 1;
toDo = "";
functionCount = 0;
  document.getElementById("screenP").innerHTML = "0"; 
}

function clickEqual(){
  // we will get the second number right before user hits equals
  var temp ="";
  temp = document.getElementById("screenP").innerHTML;
  secondNumber = parseInt(temp);
  toReturn = "";
  myBoo = false;
  
   
    switch(toDo){
        case "root":
      toReturn =   Math.sqrt(firstNumber);
      break;
        
    case "percent":
      toReturn =   (firstNumber /100);
      break;
      
      case "divide":
      toReturn =  (firstNumber / secondNumber);
      break;
      
      case "multiply":
      toReturn =   (firstNumber * secondNumber);
      break;
      
      case "subtract":
      toReturn =  (firstNumber - secondNumber);
      break;
      
      case "add":
      toReturn =   (firstNumber + secondNumber); 
      break;
  }
 
    document.getElementById("screenP").innerHTML = toReturn;  
toDisplay = "";
 functionCount = 0;
  toReturn = "";
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

p.small {
    font-variant: small-caps;
   font-style: oblique;
  font-weight:bold;
}

.rounded {
  border-radius: 10px;
  background: #000;
  
}


#mainPage{
  width:340px;
  height:520px;
  margin: 0 auto;
  margin-top: 40px;
  background:lightgrey;
  border-radius: 25px;
  box-shadow: 0 0 20px #545454;
  
}

#titleName{
  padding-top:20px;
}

#display{
   border: 2px solid black;
  padding-right:10px;
  padding-top:10px;
  background:darkgrey;
  margin: 12px 19px 12px 19px;
  font-size: 150%;
    font-size: 25px;
  box-shadow: 0 0 10px #545454;
    }



#buttonSize{
  width: 3.4em;  
  height: 3.4em;
  margin-top:13px;
  margin-left:15px;
  border-radius: 15px;
  font-size: 15px;
  }


#buttons{
  margin: 15px auto 19px auto;
   width:300px;
  height:340px;
  
   padding-left:15px;
   padding-top:5px;
   border-radius: 30px;
     font-size: 25px;
  box-shadow: 0 0 10px #545454;
  }

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />