Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript Calculator created as a zipline for FreeCodeCamp
<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 -->
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).
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 = "";
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
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;
}
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.