HTML Calculator

06 Jul, 2022
HTML calculator is used to perform the basic mathematical operations like Addition, subtraction, multiplication, and division.












 




 
 
 
 


 
 
 
 


 
 
 
 


 
 

 
 




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.
Complete Code:
<html>   <head>      <script>         //function that display value         function dis(val)         {             document.getElementById("result").value+=val         }                    //function that evaluates the digit and return result         function solve()         {             let x = document.getElementById("result").value             let y = eval(x)             document.getElementById("result").value = y         }                    //function that clear the display         function clr()         {             document.getElementById("result").value = ""         }      </script>      <!-- for styling -->      <style>         .title{         margin-bottom: 10px;         text-align:center;         width: 210px;         color:green;         border: solid black 2px;         }           input[type="button"]         {         background-color:green;         color: black;         border: solid black 2px;         width:100%         }           input[type="text"]         {         background-color:white;         border: solid black 2px;         width:100%         }      </style>   </head>   <!-- create table -->   <body>      <div class = title >GeeksforGeeks Calculator</div>      <table border="1">         <tr>            <td colspan="3"><input type="text" id="result"/></td>            <!-- clr() function will call clr to clear all value -->            <td><input type="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><input type="button" value="1" onclick="dis('1')"/> </td>            <td><input type="button" value="2" onclick="dis('2')"/> </td>            <td><input type="button" value="3" onclick="dis('3')"/> </td>            <td><input type="button" value="/" onclick="dis('/')"/> </td>         </tr>         <tr>            <td><input type="button" value="4" onclick="dis('4')"/> </td>            <td><input type="button" value="5" onclick="dis('5')"/> </td>            <td><input type="button" value="6" onclick="dis('6')"/> </td>            <td><input type="button" value="-" onclick="dis('-')"/> </td>         </tr>         <tr>            <td><input type="button" value="7" onclick="dis('7')"/> </td>            <td><input type="button" value="8" onclick="dis('8')"/> </td>            <td><input type="button" value="9" onclick="dis('9')"/> </td>            <td><input type="button" value="+" onclick="dis('+')"/> </td>         </tr>         <tr>            <td><input type="button" value="." onclick="dis('.')"/> </td>            <td><input type="button" value="0" onclick="dis('0')"/> </td>            <!-- solve function call function solve to evaluate value -->            <td><input type="button" value="=" onclick="solve()"/> </td>            <td><input type="button" value="*" onclick="dis('*')"/> </td>         </tr>      </table>   </body></html>   
Output:At first-After entering some data-And finally result will be like-
AnmolAgarwal
CSS-Questions
HTML-Questions
JavaScript-Questions
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property