How to create calculator using HTML

 Write the codes:

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




Output:



Follow on : 



Comments

Post a Comment

Popular posts from this blog

What is a Blogs? How to create account on Blog?

What is a blog?How to create a Blog account? Prakhar Doneria A blog is a way to create free of cost web pages which can we uploaded online on search engines for free.The world "BLOG" comes from "WEB BLOG" . A blog provides a free domain name to a person who uses it.One of the most common blog site is GOOGLE BLOG which gives free service to its user. It is one of the most common site in which every age person can post his/her blog according to his/her choice.A blog provides a secure place for its user. The topic placed on a blog can be from personal to profesional. It is intresting to know about a person who uses a "BLOG" is called "BLOGGER". The emergence and growth of blogs in the late 1990s coincided with the advent of web publishing tools that facilitated the posting of content by non-technical users who did not have much experience with HTML or computer programming. Previously, a knowledge of such technologies as HT
Read more

What is JAVASCRIPT?How to make a program using HTML and Java | "Hello World" | Prakhar Doneria

Learn Java+HTML5 by using Notepad by, Prakhar Doneria Java is used for creating Games while HTML is used for creating web based games and pages. JAVA+HTML are together are used to make a web game. JavaScript is the Programming Language for the WebGames. Java+HTML can also be made by using NOTEPAD JavaScript can update and change both HTML and CSS. JavaScript can calculate, manipulate and validate data. Download this PDF and make a program saying "Hello World" Click to download PDF in GOOGLE DRIVE(Google One) Was the PDF helpful? Remarks: Enter a feedback if you think! Thanks YOUTUBE Animation by HTML
Read more

HOW TO ADD PIE CHART IN HTML | PRAKHAR DONERIA

Input:   <html>   <head>     <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js" ></script>     <script type = "text/javascript" >       google . charts . load ( "current" , { packages :[ "corechart" ]});       google . charts . setOnLoadCallback ( drawChart );       function drawChart () {         var data = google . visualization . arrayToDataTable ([           [ 'Task' , 'Hours per Day' ],           [ 'Work' ,     11 ],           [ 'Eat' ,       2 ],           [ 'Commute' ,   2 ],           [ 'Watch TV' , 2 ],           [ 'Sleep' ,     7 ]         ]);         var options = {           title : 'My Daily Activities' ,           is3D : true ,         };         var chart = new google . visualization . PieChart ( document . getElementById ( 'piec
Read more