HTML Calculator

Read

Discuss

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 31 Jul, 2023

HTML Calculator

Please Login to comment...