Simple Calculator JavaScript
A simple calculator that can perform athematic function (+, -, x, and /).
Html and JavaScript Cod of Simple Calculator
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!doctype html> <html> <head> <title>Calculator using JavaSctipt</title> <link rel="stylesheet" href="styling.css"> </head> <body> <script> function calculate(result){ form.displayResult.value=form.displayResult.value+result; } </script> <div class="main"> <form name="form"> <div class="show"> <input type="text" placeholder="0" name="displayResult" /> </div> <div class="buttons"> <div class="row"> <input type="button" name="num7" value="7" onClick="calculate(num7.value)"> <input type="button" name="num8" value="8" onClick="calculate(num8.value)"> <input type="button" name="num9" value="9" onClick="calculate(num9.value)"> <input type="button" name="addb" value="+" onClick="calculate(addb.value)"> </div> <div class="row"> <input type="button" name="num4" value="4" onClick="calculate(num4.value)"> <input type="button" name="num5" value="5" onClick="calculate(num5.value)"> <input type="button" name="num6" value="6" onClick="calculate(num6.value)"> <input type="button" name="subb" value="-" onClick="calculate(subb.value)"> </div> <div class="row"> <input type="button" name="num1" value="1" onClick="calculate(num1.value)"> <input type="button" name="num2" value="2" onClick="calculate(num2.value)"> <input type="button" name="num3" value="3" onClick="calculate(num3.value)"> <input type="button" name="multi" value="*" onClick="calculate(multi.value)"> </div> <div class="row"> <input type="button" name="num0" value="0" onClick="calculate(num0.value)"> <input type="button" name="point" value="." onClick="calculate(point.value)"> <input type="button" name="dvd" value="/" onClick="calculate(dvd.value)"> <input type="button" class="green" value="=" onClick="displayResult.value=eval(displayResult.value)"> </div> </div> </form> </div> </body> </html> |
In the style, a CSS file named “styling.css” is linked. In that file, all the CSS that is being used is coded. You can find that file in the zip file below.
Output:
Download Code – JScalculator
