Calculator app with java script
Image of calculatorTo make simple calculator that can add, multiply,subtract, divide, find the power, and find the mod of numbers. This calculator has a history feature which will enable you go back to previous computations. The history can be hidden/shown and cleared as well. The calculator should be able to receive keyboard inputs also instead of clicking buttons.
What you should have!
- A text editor preferably Notepad++.
- A web browser(like chrome or firefox)
------------------------------
Ok Lets Start!!
If you have some experience with HTML, you can do some fancy calculator Graphical User Interface(GUI). However, if you just a beginner and want to tryout stuff, you can use the normal HTML tables to create the GUI of the calculator. I suggest however that having some fundamental knowledge in HTML would help you understand the GUI code better.
I will display the HTML code below. Before you copy and paste, be mindful that I used images as buttons and stored the images in a folder called gfx. Also, this calculator also responds to mouse hovers and there are images for those also. So what you can do is you can find where there are "src=url" and remove all those from the HTML and change all the input types to buttons for each input type,
OR you can create custom images but make sure you use the naming conversion used in this HTML. for example, the key "1" is 1.bmp. and yah your image files should be bmp.They can be png or jpg if you want however you have to modify the HTML to take that into consideration. If you don't get this part, you can drop a comment and I will be glad to answer you.
<html>
<head>
</head>
<body>
<!--<div id="morethings" style="visibility:visible" align="center" >
<textArea readonly="readonly" id="histoy" rows=5></textArea>
</div>-->
<table id="calculatorLayout" style="border:1px solid;box-shadow:0px 0px 10px 1px rgba(100,100,100,1)" align=center>
<tr id = "historyRow"><td colspan=2>
<div id="morethings" style="visibility:visible" >
<textArea readonly="readonly" id="histoy" rows=9 cols=6 style="max-height:200px;min-height:200px;max-width:200px;min-width:200px"></textArea>
</div>
</td></tr>
<tr bgColor=lightGreen>
<td height = 30 colspan = 2 >
<span id="values" ></span>
</td>
</tr>
<tr>
<td colspan=2><a href="#" onclick="hideHistory()">show/hide history</a><|||><a href="" onclick="clear()">clearAll</a></td>
</tr>
<tr>
<div id = "buttons">
<tr><td>
<input type=image value="^" src="gfxCalc/exp.bmp" onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)" onKeyPress="detectKey()">
<input type=image value="mod" src="gfxCalc/mod.bmp" onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)" onKeyPress="detectKey()">
</td></tr>
<td>
<input type=image value="7" src="gfxCalc/7.bmp" onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)" onKeyPress="detectKey()">
<input type=image src="gfxCalc/8.bmp" value = 8 onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)">
<input type=image src="gfxCalc/9.bmp" value = 9 onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)"></td><td><input type=image src="gfxCalc/plus.bmp" value = "+" onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)"></td></tr>
<tr><td><input type=image src="gfxCalc/4.bmp" value = 4 onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)">
<input type=image src="gfxCalc/5.bmp" value = 5 onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)">
<input type =image src="gfxCalc/6.bmp" value = 6 onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)"></td><td><input type=image src="gfxCalc/x.bmp" value = "*" onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)"></td></tr>
<tr><td><input type=image src="gfxCalc/1.bmp" value = 1 onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)">
<input type=image src="gfxCalc/2.bmp" value = 2 onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)">
<input type=image src="gfxCalc/3.bmp" value = 3 onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)"></td><td><input type=image src="gfxCalc/minus.bmp" value = "-" onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)"></td></tr>
<tr><td ><input type=image src="gfxCalc/dot.bmp" value = "." onclick="detectBtn(this)">
<input type=image src="gfxCalc/0.bmp" value = 0 onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)">
<input type = image src="gfxCalc/dive.bmp" value = "/" onmouseover = "buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)"></td><td>
<input type=image src="gfxCalc/equals.bmp" value = "=" width = 50 onmouseover="buttonFxOver(this)" onmouseout="buttonFxOut(this)" onclick="detectBtn(this)"></td></tr>
</div>
</table>
</body>
</html>
Ok lets continue...
Now if you paste this code and try to open it with a browser, you will see a page that has a rectangular shape with some objects on it.
Now to the logic part. I suggest here to that some fundamental Javascript would help.
To start writing javascript, you need to put the script inside of a script tag like so
</script>
Now the first function we are going to write is the detectBtn() function. This function has a parameter which is the object/ the button that was clicked. In order start any computation, you need to know what button was clicked.
function detectBtn(clickedBtn){
myButton = clickedBtn;
checkBtn(myButton.value);}
From this function, we can see that the function detectBtn calls another function checkBtn and supplies the value of the button that was clicked. The value of the button is the value that is specified in the value attribute of the HTML.
The function checkBtn goes on to do more complex things like determining whether an equal sign was clicked and or a sign was clicked among other things. I will write code for the function and I will explain
function checkBtn(buttonVal){//the comments in this function should help you understand what they are doing
for(var i =0;i<signs.length;i++){//loop checks whether the current object is a sign or not
if (buttonVal == signs[i]){//if it is a sign, it calls the signclicked function and isSign is true
signclicked(buttonVal);
isSign = true;
break;
}
}
//I wanted to use this if statement to check if the user had already pressed//a dot. You know we can't have two dots in a number.
//if(currentObj.value="."){
//isDot=true;
//}
if (buttonVal=="="){
isSign=true;
histoy.value=histoy.value+calcArr[2]+"\n";
calculate();
drawLine();
//values.innerHTML = calcArr[0]+"";
signState=false;
firstNum="";
//opDone = true;
//calcArr[0]="";
}
if (!isSign){//this decides whether to store the operands for the operation or store the operator
storeOperands(buttonVal);
}
isSign=false;
} //to be continued... Stay tuned
