HTML Codes for making Working Calculator at Home😎😁

Hello everyone Today we are back with a topic “How to make calculator at home with HTML CODING”

HAPPY CODING TO ALL 🇮🇳🇮🇳🇮🇳🎉😎🎉😅

SO SOME SIMPLE CODES ARE BELOW. JUST COPY THEM.

******************************************
<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”>
Inventips Calculator</div>
<table border=”1″>
<tr>

            <td colspan=”3″><input id=”result” type=”text” /></td>

            <!– clr() function will call clr to clear all value –>

            <td><input onclick=”clr()” type=”button” value=”c” /> </td>

         </tr>
<tr>

            <!– create button and assign value to each button –>

            <!– dis(“1”) will call function dis to display value –>

            <td><input onclick=”dis(‘1’)” type=”button” value=”1″ /> </td>

            <td><input onclick=”dis(‘2’)” type=”button” value=”2″ /> </td>

            <td><input onclick=”dis(‘3’)” type=”button” value=”3″ /> </td>

            <td><input onclick=”dis(‘/’)” type=”button” value=”/” /> </td>

         </tr>
<tr>

            <td><input onclick=”dis(‘4’)” type=”button” value=”4″ /> </td>

            <td><input onclick=”dis(‘5’)” type=”button” value=”5″ /> </td>

            <td><input onclick=”dis(‘6’)” type=”button” value=”6″ /> </td>

            <td><input onclick=”dis(‘-‘)” type=”button” value=”-” /> </td>

         </tr>
<tr>

            <td><input onclick=”dis(‘7’)” type=”button” value=”7″ /> </td>

            <td><input onclick=”dis(‘8’)” type=”button” value=”8″ /> </td>

            <td><input onclick=”dis(‘9’)” type=”button” value=”9″ /> </td>

            <td><input onclick=”dis(‘+’)” type=”button” value=”+” /> </td>

         </tr>
<tr>

            <td><input onclick=”dis(‘.’)” type=”button” value=”.” /> </td>

            <td><input onclick=”dis(‘0’)” type=”button” value=”0″ /> </td>

            <!– solve function call function solve to evaluate value –>

            <td><input onclick=”solve()” type=”button” value=”=” /> </td>

            <td><input onclick=”dis(‘*’)” type=”button” value=”*” /> </td>

         </tr>
</table>
</body>

</html> 

HAPPY CODING😎😎😎😎😎🇮🇳🇮🇳🇮🇳

Leave a Reply

Your email address will not be published.

Related Post