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 HTML calculator, we will use HTML, and CSS. HTML is used to design the basic structure of the calculator. CSS styles are used to apply styles on the calculator.
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.
Note: Please check this JavaScript Calculator for the complete calculator code including JavaScript. In this article, we have only added HTML and CSS code to design the calculator.
Example:
<!DOCTYPE html> <html> <head> <title>HTML Calculator</title> <!-- 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> <body> <!-- Create table --> <table id="calcu"> <tr> <td colspan="3"> <input type="text" id="result"> </td> <td><input type="button" value="c"></td> </tr> <tr> <td><input type="button" value="1"></td> <td><input type="button" value="2"></td> <td><input type="button" value="3"></td> <td><input type="button" value="/"></td> </tr> <tr> <td><input type="button" value="4"></td> <td><input type="button" value="5"></td> <td><input type="button" value="6"></td> <td><input type="button" value="*"></td> </tr> <tr> <td><input type="button" value="7"></td> <td><input type="button" value="8"></td> <td><input type="button" value="9"></td> <td><input type="button" value="-"></td> </tr> <tr> <td><input type="button" value="0"></td> <td><input type="button" value="."></td> <td><input type="button" value="="></td> <td><input type="button" value="+"></td> </tr> </table> </body> </html> |
Output:
HTML Calculator
<!–
–>
HTML Scientific Calculator
How to Create a Binary Calculator using HTML, CSS and JavaScript ?
Percentage calculator using HTML CSS and JavaScript
Design a Tip Calculator using HTML, CSS and JavaScript
Age Calculator Design using HTML CSS and JavaScript
Design a Calculator using JavaScript with Neumorphism Effect/Soft UI
Calculator in PHP using If-Else Statement
Design and Implement Calculator using jQuery
Design a BMI Calculator using JavaScript
Design a Loan Calculator using JavaScript
Courses
Recently Published
<!–
–>
Improve your Coding Skills with Practice
<!– –>
Improvement
Please go through our recently updated Improvement Guidelines before submitting any improvements.
This article is being improved by another user right now. You can suggest the changes for now and it will be under the article’s discussion tab.
You will be notified via email once the article is available for improvement.
Thank you for your valuable feedback!
Thank you for your valuable feedback!
Please go through our recently updated Improvement Guidelines before submitting any improvements.
Suggest Changes
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the neveropen portal.
Create Improvement
Enhance the article with your expertise. Contribute to the neveropen community and help create better learning resources for all.
<!– –>
<!–
–>
Please Login to comment…