how to make html calculator

simple html calculator ! How to make html calculator

in this article we make a simple html calculator using only html , css and inline java script, in this article we make a designed very "simple calculator in html"

if you don't know html please click me

we make html calculator step by step, im sure you imagine a real calculator and his layout design, and we make as like a real calculator in html,

components in html calculator
  • 1 to 9 digit
  • 0 and  dot(.)
  • clear(c) button
  • control buttons (+,-*,/,%,=)
you can make any type of layout as per your choice, and you can customize as per your req..

so lets start making simple html calculator step by step

-here is simple 5 steps, and last full html simple calculator example of this program..

-first create  html and css file
<html>
 <head><title> calculator in html</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
                html calculator simple

 </body>
</html>

-second add form tag in your code
<form name="cal">

-in 3rd step i'm using table tag for best alignment  you can make as per your choice
<table border="2" name="tab">
</table>

-4th add a display section using text-box(in table tag designed as shown)
<input type="text" name="dip"  disabled> 

-5th add calculator button as per i mentioned

*1 to 9 digit button code
<input type="button" onclick="cal.dip.value += '9'" value="9" class="bu" >
            ||        ||                    ||                 ||               '8'               8        ||
                                           (change only values)

*clear button code
<input type="button" value="c" onclick="cal.dip.value = ''" class="ebu" >

*control button code
<input type="button" onclick="cal.dip.value += '+'" value="+" class="bu" >
            ||        ||                    ||                 ||               '*'               *        ||
                                           (change only values)

*equal button code
<input type="button"   onclick="cal.dip.value = eval(cal.dip.value)" class="eb" value="=" >

note= please check onclick value "cal.dip.value" cal is a form name and dip is text box name so as per you give tag name, change onclick values as your form and textbox name...calculator code html
-and you can also change class or id name choice is yours....
-close all opened tags and save file
-css is for styling your html calculator so its depending on you(for example see below)

watch on youtube how to make a calculator in html

here is full html basic calculator example:-

calculator css code:-




body
{
    background-color: #474747;
}
table
{
    border-radius: 10px;
    background-color: #363636;
}
.bu
{
        background-color: #E8175D;
        width: 30px;
        border:none;
        border-radius: 5px;
        color: white;
}
.ebu
{
        background-color: #A8A7A7;
        width: 30px;
        border:none;
        border-radius: 5px;
        color: white;
     
}
.cb
{
    width: 68px;
    background-color: #99B898;
    border:none;
    color: white;
        border-radius: 5px;
}
.eb
{
    width: 68px;
    background-color: #99B898;
    border:none;
    color: white;
        border-radius: 5px;
}
.pb
{
    height: 52px;
    width: 30px;
    background-color: #99B898;
    color: white;
    border:none;
        border-radius: 5px;
}
#td
{
    border:none;
    border-radius: 10px;

}

input
{
    width:150px;
    border-radius: 10px;
    text-align: right;
}
p
{
    color: white;

    font-size: 8px;
    font-weight: bolder;
    font-family: 'Inder', sans-serif;
    text-decoration: none;
 
    }


calculator html code:-




<!DOCTYPE html>
<html>
<head>
    <title>simple html calculator by niljadav</title>
    <link rel="stylesheet" type="text/css" href="c.css">
</head>
<body>
<center>
    <form name="cal">
    <table border="2" name="tab">
         
            <tr>
                <td align="center"      id="td"     colspan="4"><input type="text" name="dip"  disabled></td>             
            </tr>
            <tr>
                <td align="center"      id="td"    ><input type="button" value="c" onclick="cal.dip.value = ''" class="ebu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '%'" value="%" class="ebu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '/'" value="/" class="ebu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '*'" value="*" class="ebu" ></td>
            </tr>
            <tr>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '9'" value="9" class="bu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '8'" value="8" class="bu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '7'" value="7" class="bu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '-'" value="-" class="ebu" ></td>
            </tr>

            <tr>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '4'" value="4" class="bu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '5'" value="5" class="bu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '6'" value="6" class="bu" ></td>
                <td align="center"      id="td"     rowspan="2"><input type="button" onclick="cal.dip.value += '+'"  value="+" class="pb" ></td>
            </tr>

            <tr>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '1'" value="1" class="bu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '2'" value="2" class="bu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '3'" value="3" class="bu" ></td>
             
            </tr>
            <tr>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '.'" value="." class="bu" ></td>
                <td align="center"      id="td"    ><input type="button" onclick="cal.dip.value += '0'" value="0" class="bu" ></td>
             
                <td align="center"      id="td"     colspan="2"><input type="button"   onclick="cal.dip.value = eval(cal.dip.value)" class="eb" value="=" ></td>
            </tr>
     

    </table>
    <a href="https://www.niljadav.com/"><p>www.niljadav.com</p></a>
<br><p> html calculator code by Aniljadav</p>
</form>
</center>
</body>
</html>

html calculator code download

best apps under 0mb 2021👉
thanks for visiting us
if this content helpful for you please share this with your circule

  JADAV ANIL😎
www.niljadav.com