'************************************** ' Name: Calculator ' Description:Its a basic calculator fun ' ctionality built completely in Javascrip ' t. Many of the exceptions are not coded ' but this is a good start to improve furt ' her on the calculator functionality. Save the below code as index.html and open it on any browser window. ' By: Prashant Sethi ' ' ' Inputs:None ' ' Returns:None ' 'Assumes:None ' 'Side Effects:None '************************************** <!doctype html> <html> <head> <title>My JavaScript Calculator</title> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0"> </head> <body> <form> <input type="button" id = "one" value="1" name="onebutton" onclick=funcDisplayVal(event) class="mybutton"> <input type="button" id = "two" value="2" name="twobutton" onclick=funcDisplayVal(event) class="mybutton"> <input type="button" id = "three" value="3" name="threebutton" onclick=funcDisplayVal(event) class="mybutton"> <br> <input type="button" id = "four" value="4" name="fourbutton" onclick=funcDisplayVal(event) class="mybutton"> <input type="button" id = "five" value="5" name="fivebutton" onclick=funcDisplayVal(event) class="mybutton"> <input type="button" id = "six" value="6" name="sixbutton" onclick=funcDisplayVal(event) class="mybutton"> <br> <input type="button" id = "seven" value="7" name="sevenbutton" onclick=funcDisplayVal(event) class="mybutton"> <input type="button" id = "eight" value="8" name="eightbutton" onclick=funcDisplayVal(event) class="mybutton"> <input type="button" id = "nine" value="9" name="ninebutton" onclick=funcDisplayVal(event) class="mybutton"> <br> <input type="button" id = "zero" value="0" name="zerobutton" onclick=funcDisplayVal(event) class="mybutton"> <input type="button" id = "cancel" value="C" name="cancelbutton" onclick=funcCancelVal() class="mybutton"> <input type="button" id = "plus" value="+" name="plusbutton" onclick=funcPlusVal() class="mybutton"> <br> <input type="button" id = "minus" value="-" name="minusbutton" onclick=funcMinusVal() class="mybutton"> <input type="button" id = "multiply" value="*" name="multiplybutton" onclick=funcMultiplyVal() class="mybutton"> <input type="button" id = "divide" value="/" name="dividebutton" onclick=funcDivideVal() class="mybutton"> <input type="button" id = "equal" value="=" name="equalbutton" onclick=funcDisplayResult() class="mybutton"> </form> <br> <input id = "calcresult" name="resultbox" class="result" type="text" disabled="true"></input> <br> <script type="text/javascript"> var firstValue = "fv"; var secondValue = "sv"; var seconditem = false; var operator = ""; function funcDisplayVal(event){ if(seconditem == false){ document.getElementById("calcresult").value= document.getElementById("calcresult").value + event.target.value; firstValue = parseInt(document.getElementById("calcresult").value); } else{ document.getElementById("calcresult").value= document.getElementById("calcresult").value + event.target.value; secondValue = parseInt(document.getElementById("calcresult").value); } } function funcPlusVal(){ if(firstValue != "fv"){ document.getElementById("calcresult").value= ""; seconditem = true; operator = "plus"; } else { alert("Enter 1st Value to operate on."); } } function funcMinusVal(){ if(firstValue != "fv"){ document.getElementById("calcresult").value= ""; seconditem = true; operator = "minus"; } else { alert("Enter 1st Value to operate on."); } } function funcMultiplyVal(){ if(firstValue != "fv"){ document.getElementById("calcresult").value= ""; seconditem = true; operator = "multiply"; } else { alert("Enter 1st Value to operate on."); } } function funcDivideVal(){ if(firstValue != "fv"){ document.getElementById("calcresult").value= ""; seconditem = true; operator = "divide"; } else { alert("Enter 1st Value to operate on."); } } function funcDisplayResult(){ var finalval = 0; if(secondValue != "sv"){ switch(operator){ case "plus": finalval = Number(firstValue) + Number(secondValue); document.getElementById("calcresult").value= finalval; seconditem = false; break; case "minus": finalval = Number(firstValue) - Number(secondValue); document.getElementById("calcresult").value= finalval; seconditem = false; break; case "multiply": finalval = Number(firstValue) * Number(secondValue); document.getElementById("calcresult").value= finalval; seconditem = false; break; case "divide": finalval = Number(firstValue) / Number(secondValue); document.getElementById("calcresult").value= finalval; seconditem = false; break; } } else{ alert("Enter 2nd Value to operate on."); } seconditem = false; firstValue = "fv"; secondValue = "sv"; operator = ""; } function funcCancelVal(){ firstValue = "fv"; secondValue = "sv"; seconditem = false; operator = ""; document.getElementById("calcresult").value= ""; } </script> <style> body{ font-family: Arial, Helvetica, sans-serif; } .mybutton{ width: 60px; height:60px; color: blue; font-size:20px; } .result { color: firebrick; text-align: left; width: 260px; height:60px; font-size: 20px; } </style> </body> </html>