99learner: How to Create Calculator in HTML

If you are looking for a calculator program written in HTML then you are in the right place. Here you will find the complete source code for the calculator with step by step implementation guide.

How to Create Calculator in HTML

First of all, create the HTML structure for the calculator as follows:

If you are looking for a calculator program written in HTML then you are in the right place. Here you will find the complete source code for the calculator with step by step implementation guide.<span data-inserter-version="2" face=""Segoe UI", "Helvetica Neue", Helvetica, sans-serif" id="ezoic-pub-ad-placeholder-118" style="background-color: white; border: 0px; color: #3a3a3a; font-size: 18px; margin: 0px; padding: 0px;"><h2 style="background-color: white; border: 0px; color: #0a0101; font-family: "Segoe UI", "Helvetica Neue", Helvetica, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 0px 0px 20px; padding: 0px;">How to Create Calculator in HTML </h2>First of all, create the HTML structure for the calculator as follows:<p style="background-color: white; border: 0px; color: #3a3a3a; font-family: &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; font-size: 18px; margin: 0px 0px 1.5em; padding: 0px;">If you are looking for a calculator program written in HTML then you are in the right place. Here you will find the complete source code for the calculator with step by step implementation guide.<span data-inserter-version="2" id="ezoic-pub-ad-placeholder-118" style="background-color: white; border: 0px; color: #3a3a3a; font-family: &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; font-size: 18px; margin: 0px; padding: 0px;"><h2 style="background-color: white; border: 0px; color: #0a0101; font-family: &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; font-size: 26px; font-weight: 400; line-height: 1.2em; margin: 0px 0px 20px; padding: 0px;">How to Create Calculator in HTML&nbsp;</h2><p style="background-color: white; border: 0px; color: #3a3a3a; font-family: &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; font-size: 18px; margin: 0px 0px 1.5em; padding: 0px;">First of all, create the HTML structure for the calculator as follows:<p style="background-color: white; border: 0px; color: #3a3a3a; font-family: &quot;Segoe UI&quot;, &quot;Helvetica Neue&quot;, Helvetica, sans-serif; font-size: 18px; margin: 0px 0px 1.5em; padding: 0px;"> <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>            <style>         .title{         margin-bottom: 10px;         text-align:center;         width: 210px;         color:green;         border: solid black 2px;         }           input[type="button"]         {         background-color:white;         color: black;         border: solid black 2px;         width:100%         }           input[type="text"]         {         background-color:white;         border: solid black 2px;         width:100%         }      </style>   </head>      <body>      <div class="title">99learner Calculator</div>      <table border="1">         <tr>            <td colspan="3"><input id="result" type="text" /></td>                        <td><input onclick="clr()" type="button" value="c" /> </td>         </tr>         <tr>                                    <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>                        <td><input onclick="solve()" type="button" value="=" /> </td>            <td><input onclick="dis('*')" type="button" value="*" /> </td>         </tr>      </table>   </body></html> and your calculator is ready : <html>

<head>

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

<style>

.title{

margin-bottom: 10px;

text-align:center;

width: 210px;

color:green;

border: solid black 2px;

}

input[type="button"]

{

background-color:white;

color: black;

border: solid black 2px;

width:100%

}

input[type="text"]

{

background-color:white;

border: solid black2px;

width:100%

}

</style>

</head>

<body>

<div class="title">99learner's Calculator</div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

and your calculator is ready :

99learner's Calculator

99learner

How to Create Calculator in HTML

How to Create Calculator in HTML

No comments:

Post a Comment

Celebrities Banned In Other Countries

Search This Blog