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 (+,-*,/,%,=)
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">
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;
}
<!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👉
<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:-
*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
if this content helpful for you please share this with your circule
JADAV ANIL😎
www.niljadav.com