Code For Making Calculator In HTML

 

<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: pink 2px; 


         } 


  


         input[type="button"] 


         { 


         background-color: yellow; 


         color: red; 


         border: solid green 2px; 


         width:100% 


         } 


  


         input[type="text"] 


         { 


         background-color:white; 


         border: solid black 2px; 


         width:100% 


         } 


      </style> 


   </head> 


   <!-- create table --> 


   <body> 


  

<div align="center">

   

 <div class = title >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> 


  </div>

  

 </body> 


</html>

Comments

Post a Comment

Popular posts from this blog

Automations and robotics

Automations and robotics refer to the use of technology to automate and perform tasks that were previously done by humans. Automation involves the use of software, machines, and other systems to perform tasks without human intervention. Robotics, on the other hand, involves the design and development of machines that can perform tasks autonomously or with limited human intervention. Automations and robotics are widely used in industries such as manufacturing, healthcare, transportation, and agriculture. In manufacturing, robots are used to perform repetitive and dangerous tasks, such as welding and painting. In healthcare, robots are used to perform surgeries and assist patients with mobility issues. In transportation, automated systems are used to control traffic flow and ensure the safety of drivers and passengers. In agriculture, robots are used to plant and harvest crops, reducing the need for manual labor. Advancements in technology have led to the development of more sophisticate...
Read more

Palindrome Pattern Program In Java Language

  class Palindrome_Pattern {     public static void main( String args[]){         int n= 5 ;         for ( int i= 1 ; i<=n; i++){             //spaces             for ( int j= 1 ; j<=n-i; j++){                 System.out.print( " " );             }             //number--1st part             for ( int j=i; j>= 1 ; j--){                 System.out.print(j);             }             //number --2nd part             for ( int j= 2 ; j<=i; j++){                 System.out.print(j);             }           ...
Read more

Rhombus Pattern Program In Java Language

  class Demo{   public static void main( String args[])   {     int n= 5 ;     for ( int i= 1 ; i<=n; i++){       //spaces       for ( int j= 1 ; j<=n-i; j++){         System.out.print( " " );       }       for ( int j= 1 ; j<=n; j++){         System.out.print( "*" );       }       System.out.println();     }   } } OUTPUT: ***** ***** ***** ***** *****
Read more