HTML Calculator

Last Updated : 31 Jul, 2023

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>  