In this post we are going to create a calculator using simple HTML and JavaScript callback function. Using callback functions we have to write less code in compare to writing huge line of code using simple JavaScript functions. Callback and promises are the very useful and fastest way to write the code.
Without any further delay, lets start the coding to create a web based simple calculator using the javaScript callback functions. We will discuss the theory part of callback function and promises other article.
Create a html page with name calculator.html. copy the below code snippet and paste in calculator.html file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <html> <title>Calculator</title> <head> <script src="js/calculator.js"></script> </head> <body> <h3>Calculator</h3> Number 1: <input id="number1" type="number"/><br /><br /> Number 2: <input id="number2" type="number"/><br /><br /> <input type="button" onclick="calc(addNum)" value="Add" id="add" /> <input type="button" value="Multiply" onclick="calc(multiplyNum)" id="multiply" /> <input type="button" value="Divide" id="divide" onclick="calc(divideNum)" /> <br /><br /> Result: <input id="result" type="number"/><br /> </body> </html> |
Now create a folder with name js in the same directory where you have created your html page, this js folder is to separate the js file from other files.
Now open the js folder and create a calculator.js file.
Copy the below js code snippet the paste it in your calculator.js file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function calc(callback) { var n1 = parseFloat(document.getElementById("number1").value); var n2 = parseFloat(document.getElementById("number2").value); var result = callback(n1, n2); document.getElementById("result").value = result; } function multiplyNum(n1, n2) { return n1 * n2; } function divideNum(n1, n2) { return n1 / n2; } function addNum(n1, n2) { return n1 + n2; } |
Now open your calculator.html file in browser and see the result. below is the screen shot of the calculator.
 |
| callback function calculator |
You may download the complete exercise from GitHub https://github.com/RashidJorvee/callbackFunctionJS