JavaScript preprocessors can help make authoring JavaScript easier and more convenient. For instance, CoffeeScript can help prevent easy-to-make mistakes and offer a cleaner syntax and Babel can bring ECMAScript 6 features to browsers that only support ECMAScript 5.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
HTML Settings
Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<html>
<body>
<div id='frame' class="container-fluid">
<div id='numPad'class="row">
<p id='display' style='font-size:62px;'></p>
</div>
<div class='row text-center'>
<div id='row1' class='row' style='margin: 0;'>
<button class="button allClear" style='width:111px;'>Clear</button>
<button class="button clearEntry" style='width:111px;'>CE</button>
<button class="button op_key">/</button>
</div>
<div id='row2' class='row' style='margin:0;'>
<button class="button digit">7</button>
<button class="button digit">8</button>
<button class="button digit">9</button>
<button class="button op_key">x</button>
</div>
<div id='row3' class='row' style='margin:0;'>
<button class="button digit">4</button>
<button class="button digit">5</button>
<button class="button digit">6</button>
<button class="button op_key">-</button>
</div>
<div id='row4' class='row' style='margin:0;'>
<button class="button digit">1</button>
<button class="button digit">2</button>
<button class="button digit">3</button>
<button class="button op_key">+</button>
</div>
<div id='row6' class='row' style='margin:0;'>
<button class="button digit">0</button>
<button class="button point" >.</button>
<button class="button equals" style='width:148px; background: #71BCC6;'>=</button>
</div>
</div>
</div>
</body>
</html>
body{
background: #9ae6f9;
}
#frame{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 300px;
height: 350px;
border: 2px solid #9B150B;
}
#numPad{
border-bottom: 1px solid #9B150B;
width: auto;
height: 100px;
background: #FF9890;
}
.col-centered{
float: none;
margin: 0 auto;
}
.button {
background-color: #E84D41;
color: white;
padding: 15px 15px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border: none;
float: left;
width: 74px;
height: 49.2px;
outline: 0;
}
.button:hover{
background-color:#FF9890;
color: black;
}
p{
color: black;
float: right;
}
alert("Thanks for checking out my OOP JavaScript Calculator. Enjoy!");
var kclass = {
//number
NUM: 1,
//decimal
DECI: 2,
//operator
OP: 3,
//clear entry
CE: 4,
//equal
EQ: 5
}
//different states
var states = {
//default state
START: 1,
//when the first number is added
FIRST_ARG: 2,
//if the first num starts with a decimal or contains a decimal
FIRST_ARG_FLOAT: 3,
//operator
OP: 4,
//when the second num is added
SECOND_ARG: 5,
//if the 2nd num has a decimal other than the beginning
SEC_ARG_FLOAT: 6,
//if 2nd num start with a decimal
SEC_ARG_DECI: 7,
//equals
EQ: 8
}
//default state of calculator
$("#display").text(0);
//contains variables and calc functions
var calc = {
//monitors current state
state: states.START,
//monitors current operator
op: "",
//monitors what is currently displayed on the display
disp: "",
//stores the first number for further operations
acc1: "",
//stores the 2nd number for further operations
acc2: "",
//function that controls transitions between states using switch
//two arguments - key_class(key category), key(specific key)
doStep: function(key_class, key){
switch (this.state){
case states.START:
if(key_class === kclass.NUM){
//state action
this.dispSet(key);
//move to the next state
this.state = states.FIRST_ARG;
}
if(key_class === kclass.DECI){
this.dispSet("0.");
this.state = states.FIRST_ARG_FLOAT;
}
break;
case states.FIRST_ARG:
if(key_class === kclass.NUM){
this.dispAppend(key);
this.state = states.FIRST_ARG;
}
if(key_class === kclass.OP){
this.op = key;
//store value of the disp in a acc1 variable in order to be able to store second number in the disp
this.acc1 = this.disp;
this.state = states.OP;
}
if(key_class === kclass.DECI){
this.dispAppend(key);
this.state = states.FIRST_ARG_FLOAT;
}
if(key_class === kclass.CE){
this.dispSet("0");
calc.state = states.START
}
break;
case states.FIRST_ARG_FLOAT:
if(key_class === kclass.NUM){
this.dispAppend(key);
this.state = states.FIRST_ARG_FLOAT;
}
if(key_class === kclass.OP){
this.op = key;
//store value of the disp in a acc1 variable in order to be able to store second number in the disp
this.acc1 = this.disp;
this.state = states.OP;
}
if(key_class === kclass.CE){
this.dispSet("0");
calc.state = states.START;
}
break;
case states.OP:
if(key_class === kclass.NUM){
this.dispSet(key);
this.state = states.SECOND_ARG;
}
if(key_class === kclass.DECI){
this.dispSet("0.");
this.state = states.SEC_ARG_DECI;
}
break;
case states.SECOND_ARG:
if(key_class === kclass.DECI){
this.dispAppend(key);
this.state = states.SEC_ARG_FLOAT;
}
if(key_class === kclass.NUM){
this.dispAppend(key);
this.state = states.SECOND_ARG;
}
if(key_class === kclass.EQ){
//store the second number in the acc2 variable so that we can use it if the equal sign is pressed more than once
this.acc2 = this.disp;
//calculate the result
this.operation(this.acc1, this.disp);
this.displayUpdate(this.disp);
this.state = states.EQ;
}
if(key_class === kclass.OP){
//calculate the result
this.operation(this.acc1, this.disp);
this.op = key;
//store the result of the operation in the acc1 in order to be used in the next operation
this.acc1 = this.disp;
this.displayUpdate(this.disp);
this.state = states.OP;
}
if(key_class === kclass.CE){
this.dispSet("0");
calc.state = states.OP;
}
break;
case states.SEC_ARG_FLOAT:
if(key_class === kclass.NUM){
this.dispAppend(key);
this.state = states.SEC_ARG_FLOAT;
}
if(key_class === kclass.EQ){
this.acc2 = this.disp;
this.operation(this.acc1, this.disp);
this.displayUpdate(this.disp);
this.state = states.EQ;
}
if(key_class === kclass.OP){
this.operation(this.acc1, this.disp);
this.op = key;
this.acc1 = this.disp;
this.displayUpdate(this.disp);
this.state = states.OP;
}
if(key_class === kclass.CE){
this.dispSet("0");
calc.state = states.OP;
}
break;
case states.SEC_ARG_DECI:
if(key_class === kclass.NUM){
this.dispAppend(key);
this.state = states.SEC_ARG_FLOAT;
}
if(key_class === kclass.CE){
this.dispSet("0");
calc.state = states.OP;
}
break;
case states.EQ:
if(key_class === kclass.EQ){
this.operation(this.disp, this.acc2);
this.displayUpdate(this.disp);
this.state = states.EQ;
}
if(key_class === kclass.NUM){
this.dispSet(key);
this.state = states.FIRST_ARG;
}
if(key_class === kclass.OP){
this.op = key;
this.acc1 = this.disp;
this.state = states.OP;
}
if(key_class === kclass.DOT){
this.dispSet("0.");
this.state = states.FIRST_ARG_FLOAT;
}
if(key_class === kclass.CE){
this.dispSet("0");
this.clearer();
}
break;
}
},
//does all the arithmetical operations
operation: function(first, sec){
if(this.op === "/"){
this.disp = first / sec;
}
if(this.op === "-"){
this.disp = first - sec;
}
if(this.op === "x"){
this.disp = first * sec;
}
if(this.op === "+"){
this.disp = Number(first) + Number(sec);
}
if(this.op === "%"){
this.disp = first % sec;
}
},
//restarts the calculator to the default state
clearer: function(){
$("#display").text(0);
this.state = states.START;
this.op;
this.disp;
this.acc1;
this.acc2;
},
//appends a display var
dispAppend: function(key){
this.disp += key;
this.displayUpdate(this.disp);
},
//set a new value to the display var
dispSet: function(key){
this.disp = key;
this.displayUpdate(this.disp);
},
//dipsplay display var
displayUpdate: function(dispText){
$("#display").text(dispText);
}
}
//Button Click Functions
//when the number is clicked
$(".digit").on("click", function(){
calc.doStep(kclass.NUM, $(this).html());
})
//when the operator is clicked
$(".op_key").on("click", function(){
calc.doStep(kclass.OP, $(this).html());
})
//when the equal sign is clicked
$(".equals").on("click", function(){
calc.doStep(kclass.EQ, $(this).html());
})
//when the dot is clicked
$(".point").on("click", function(){
calc.doStep(kclass.DECI, $(this).html());
})
//when AC clicked - clear all variable values
$(".allClear").on("click", function(){
calc.clearer();
})
//when CE clicked - erase the last entered input
$(".clearEntry").on("click", function(){
calc.doStep(kclass.CE, $(this).html());
})
Also see: Tab Triggers