Programmers, Computer Science Students, or The people who love programming. The three kind of people always crazy about the new invention or something new matter which they love to do! This post I arrange with a cool HTML calculator.
By following this post you can make this project on a page with any kind of text editor. People face many problems when they want to build a calculator in JAVA programs. Most of the times they don’t understand to arrange java calculator programs with others project. But if you follow this post you gonna make calculator without any doubt.
Read Similar Programming Post:
1. Login Page In PHP: How To Create PHP Login Form
2. Windows 10 Problems When Its Your Operating System (OMG)
3. Upload Image With PHP and Resize Image with PHP
4. Make Auto Load And jQuery Refresh Page Div Every 10 Seconds
5. Facebook Widget For Website: Place Your Facebook Page Widget
Make Calculator With Html Calculator Source Code
So, let’s see how can you make a calculator with Html Calculator Code.
First, you have to copy HTML Calculator Codes From Below:
<html>
<head>
<style>
body
{
background-color:skyblue;
}
h2
{
text-align:center;
text-decoration:underline;
}
.box
{
background-color:#3d4543;
height:340px;
width:250px;
border-radius:10px;
position:relative;
top:80px;
left:40%;
}
.display
{
background-color:#222;
width:220px;
position:relative;
left:15px;
top:20px;
height:40px;
}
.display input
{
position:relative;
left:2px;
top:2px;
height:35px;
color:black;
background-color:#bccd95;
font-size:21px;
text-align:right;
}
.keys
{
position:relative;
top:15px;
}
.button
{
width:40px;
height:30px;
border:none;
border-radius:8px;
margin-left:17px;
cursor:pointer;
border-top:2px solid transparent;
}
.button.gray
{
color:white;
background-color:#6f6f6f;
border-bottom:black 2px solid;
border-top:2px #6f6f6f solid;
}
.button.pink
{
color:black;
background-color:#ff4561;
border-bottom:black 2px solid;
}
.button.black
{
color:white;
background-color:303030;
border-bottom:black 2px solid;
border-top:2px 303030 solid;
}
.button.orange
{
color:black;
background-color:FF9933;
border-bottom:black 2px solid;
border-top:2px FF9933 solid;
}
.gray:active
{
border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;
}
.pink:active
{
border-top:black 2px solid;
border-bottom:#ff4561 2px solid;
}
.black:active
{
border-top:black 2px solid;
border-bottom:#303030 2px solid;
}
.orange:active
{
border-top:black 2px solid;
border-bottom:FF9933 2px solid;
}
p
{
line-height:10px;
}
</style>
<script>
function c(val)
{
document.getElementById(“d”).value=val;
}
function v(val)
{
document.getElementById(“d”).value+=val;
}
function e()
{
try
{
c(eval(document.getElementById(“d”).value))
}
catch(e)
{
c(‘Error’)
}
}
</script>
</head>
<body>
<h2><marquee behavior=”alternate”><font color=”White”>Calculator Created by Luthfar Rahman(Mithun)</font></marquee></h2>
<div class=”box”>
<div class=”display”><input type=”text” readonly size=”20″ id=”d”></div>
<div class=”keys”>
<p><html>
<head>
<script type=”text/javascript”>
function digital_clock()
{
var date=new Date();
var hours=date.getHours();
var minutes=date.getMinutes();
var seconds=date.getSeconds();
hours=addZero(hours);
minutes=addZero(minutes);
seconds=addZero(seconds);
document.getElementById(‘hours’).innerHTML = hours;
document.getElementById(‘minutes’).innerHTML = minutes;
document.getElementById(‘seconds’).innerHTML = seconds;
setTimeout(‘digital_clock()’,500);
}
function addZero(date_part)
{
if(date_part < 10)
{
date_part=”0″ + date_part;
}
return date_part;
}
</script>
</head>
<body onload=”digital_clock()” bgcolor=lightgreen>
<center>
<div style=”border:lightblack 2px solid;width:100;background-color:#bccd95″>
<b id=hours> </b> :
<b id=minutes> </b> :
<b id=seconds> </b>
</div>
</center>
</body>
</html><input type=”button” class=”button gray” value=”mrc” onclick=’c(“Calculator Created…”)’><input type=”button” class=”button gray” value=”m-” onclick=’c(“…………….by…………….”)’><input type=”button” class=”button gray” value=”m+” onclick=’c(“Luthfar Rahman(Mithun).”)’><input type=”button” class=”button pink” value=”/” onclick=’v(“/”)’></p>
<p><input type=”button” class=”button black” value=”7″ onclick=’v(“7″)’><input type=”button” class=”button black” value=”8″ onclick=’v(“8″)’><input type=”button” class=”button black” value=”9″ onclick=’v(“9″)’><input type=”button” class=”button pink” value=”*” onclick=’v(“*”)’></p>
<p><input type=”button” class=”button black” value=”4″ onclick=’v(“4″)’><input type=”button” class=”button black” value=”5″ onclick=’v(“5″)’><input type=”button” class=”button black” value=”6″ onclick=’v(“6″)’><input type=”button” class=”button pink” value=”-” onclick=’v(“-“)’></p>
<p><input type=”button” class=”button black” value=”1″ onclick=’v(“1″)’><input type=”button” class=”button black” value=”2″ onclick=’v(“2″)’><input type=”button” class=”button black” value=”3″ onclick=’v(“3″)’><input type=”button” class=”button pink” value=”+” onclick=’v(“+”)’></p>
<p><input type=”button” class=”button black” value=”0″ onclick=’v(“0″)’><input type=”button” class=”button black” value=”.” onclick=’v(“.”)’><input type=”button” class=”button black” value=”C” onclick=’c(“”)’><input type=”button” class=”button orange” value=”=” onclick=’e()’></p>
</div>
</div>
</body>
</html>
Secondly, paste the code in notepad or text editor program. Then save it with the name of Calculatro.html.
Now click on the icon where you save the calculator as a name of Calculator.html and enjoy the programs. You can use this calculator for any kind of Accounting.
Finally, you are done with the HTML Calculator Code Project successfully. If you have any other question about this project or programs. Then use the comment section for asking me. Share the tips on social media with your buddies.