HTML | Calculator

Here a Calculator is going to be formed with HTML code.

  • Calculator Title: This is the title at the top of our application, “GeeksforGeeks Calculator”.
  • Output Screen: This will be our output screen, where all text will be shown. Like the input that the user will type and the answer calculated from the user input. So, we can again break down this into two smaller pieces as shown below:

    • Question Output: This will be the input given by the user.
    • Answer Output: This will be the result calculated from user input.

    • HTML Code:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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>   

    chevron_right

    

    

    
                        filter_none
    

    

    

    

    Output:
    
At first-
    

    
After entering some data-
    

    
And finally result will be like-
    

    



    
    
    
        My Personal Notes
        arrow_drop_up
    
    
    
    
        
        
    
            
            
        
    
    
    

    Recommended Posts:
    Naman_Garg
    Check out this Author's contributed articles.
    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
    Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.


    Improved By :  AnmolAgarwal

    
					
		
    
    Article Tags : 
    Web Technologies
    
           	
            
    
         
    
         
     
                5
    
                
    
        


    
        
        
        
        
        
    
    
    
            
    
            2.8
            
    
            
    
             
                 Based on 6 vote(s)
                    
    
            
            
            
            
            
        
    
        
        
    
        
    
        
    
        
    
        
    
        
    
        
    

    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.