HTML Calculator
HTML calculator is used for performing basic mathematical operations like Addition, subtraction, multiplication, and division.
You can find the live preview below, try it:
To design the basic calculator, we will use HTML, CSS, and JavaScript. HTML is used to design the basic structure of the calculator. CSS styles are used to apply styles on the calculator and JavaScript is used to add the calculation functionality.
Approach:
- Created the design with the HTML Table where first
is holding the input field with id=”result” and the rest are filled with input button. - With every click of the button, it displays the respective value of the button to the input field by using the function dis().
- myFunction() is used to set the value pressed from the keyboard to the same input field.
- Calculation of the numbers can be done by both the “Enter” key as well as the “=” button on the Calculator UI. The solve() function is evaluating the result with the math.evaluate() and display the final answer to the input field with id=”result”.
- clr() function is also defined to clear the input field.
Example:
<!DOCTYPE html><html><head><scriptsrc=integrity="sha512-BbVEDjbqdN3Eow8+empLMrJlxXRj5nEitiCAK5A1pUr66+jLVejo3PmjIaucRnjlB0P9R3rBUs3g5jXc8ti+fQ=="crossorigin="anonymous"referrerpolicy="no-referrer"></script><scriptsrc=integrity="sha512-iphNRh6dPbeuPGIrQbCdbBF/qcqadKWLa35YPVfMZMHBSI6PLJh1om2xCTWhpVpmUyb4IvVS9iYnnYMkleVXLA=="crossorigin="anonymous"referrerpolicy="no-referrer"></script><!-- for styling --><style>table {border: 1px solid black;margin-left: auto;margin-right: auto;}input[type="button"] {width: 100%;padding: 20px 40px;background-color: green;color: white;font-size: 24px;font-weight: bold;border: none;border-radius: 5px;}input[type="text"] {padding: 20px 30px;font-size: 24px;font-weight: bold;border: none;border-radius: 5px;border: 2px solid black;}</style></head><!-- create table --><body><tableid="calcu"><tr><tdcolspan="3"><inputtype="text"id="result"></td><!-- clr() function will call clr to clear all value --><td><inputtype="button"value="c"onclick="clr()"/> </td></tr><tr><!-- create button and assign value to each button --><!-- dis("1") will call function dis to display value --><td><inputtype="button"value="1"onclick="dis('1')"onkeydown="myFunction(event)"> </td><td><inputtype="button"value="2"onclick="dis('2')"onkeydown="myFunction(event)"> </td><td><inputtype="button"value="3"onclick="dis('3')"onkeydown="myFunction(event)"> </td><td><inputtype="button"value="/"onclick="dis('/')"onkeydown="myFunction(event)"> </td></tr><tr><td><inputtype="button"value="4"onclick="dis('4')"onkeydown="myFunction(event)"> </td><td><inputtype="button"value="5"onclick="dis('5')"onkeydown="myFunction(event)"> </td><td><inputtype="button"value="6"onclick="dis('6')"onkeydown="myFunction(event)"> </td><td><inputtype="button"value="*"onclick="dis('*')"onkeydown="myFunction(event)"> </td></tr><tr><td><inputtype="button"value="7"onclick="dis('7')"onkeydown="myFunction(event)"> </td><td><inputtype="button"value="8"onclick="dis('8')"onkeydown="myFunction(event)"> </td><td><inputtype="button"value="9"onclick="dis('9')"onkeydown="myFunction(event)"> </td><td><inputtype="button"value="-"onclick="dis('-')"onkeydown="myFunction(event)"> </td></tr><tr><td><inputtype="button"value="0"onclick="dis('0')"onkeydown="myFunction(event)"> </td><td><inputtype="button"value="."onclick="dis('.')"onkeydown="myFunction(event)"> </td><!-- solve function call function solve to evaluate value --><td><inputtype="button"value="="onclick="solve()"> </td><td><inputtype="button"value="+"onclick="dis('+')"onkeydown="myFunction(event)"> </td></tr></table><script>// Function that display valuefunction dis(val) {document.getElementById("result").value += val}function myFunction(event) {if (event.key == '0' || event.key == '1'|| event.key == '2' || event.key == '3'|| event.key == '4' || event.key == '5'|| event.key == '6' || event.key == '7'|| event.key == '8' || event.key == '9'|| event.key == '+' || event.key == '-'|| event.key == '*' || event.key == '/')document.getElementById("result").value += event.key;}var cal = document.getElementById("calcu");cal.onkeyup = function (event) {if (event.keyCode === 13) {console.log("Enter");let x = document.getElementById("result").valueconsole.log(x);solve();}}// Function that evaluates the digit and return resultfunction solve() {let x = document.getElementById("result").valuelet y = math.evaluate(x)document.getElementById("result").value = y}// Function that clear the displayfunction clr() {document.getElementById("result").value = ""}</script></body></html>Output:
Improved By :Article Tags :Practice Tags :Report IssueImprove your Coding Skills with Practice
Please Login to comment...