HTML CSS CODE
Here is the CSS and HTML code for a simple calculator. <!DOCTYPE html><html>
<head>
<style>
.button {
background-color: #ff5511;
border: none;
font-weight: bold;
color: white;
padding: 12px 44px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 5px;
cursor: pointer;
border-radius: 25px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.3s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
.form {
background-color: #2d9fff;
border: none;
color: white;
padding: 12px 32px;
font-weight: bold;
color: #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 8px;
cursor: pointer;
border-radius: 45px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-transition-duration: 0.3s; /* Safari */
transition-duration: 0.3s;
}
.form:hover {
background-color: #4caf40; /* Green */
color: white;
}
#rcorners1 {
border-radius: 25px;
}
</style>
</head>
<script type="text/javascript">
function addingcalculator(form){
a=eval(form.a.value);
b=eval(form.b.value);
form.c.value=a+b; }
function subcalculator(form){
a=eval(form.a.value);
b=eval(form.b.value);
form.c.value=a-b; }
function mulcalculator(form){
a=eval(form.a.value);
b=eval(form.b.value);
form.c.value=a*b; }
function divdcalculator(form){
a=eval(form.a.value);
b=eval(form.b.value);
form.c.value=a/b; }
function raisingcalculator(form){
a=eval(form.a.value);
b=eval(form.b.value);
form.c.value=Math.pow(a,b);}
</script>
<br />
<body>
<form>
<table>
<tbody>
<tr><td align="center">
INPUT A <input name="a" type="text" class="form" value="" /><br / /><br />
INPUT B <input name="b" type="text" class="form" value="" /><br / /><br />
<input onclick="addingcalculator(this.form)" type="button" class="button" id="rcorners1" value="+" />
<input onclick="subcalculator(this.form)" type="button" class="button" id="rcorners1" value="--" /><br / >
<input onclick="mulcalculator(this.form)" type="button" class="button" id="rcorners1" value="x" >
<input onclick="divdcalculator(this.form)" type="button" class="button" id="rcorners1" value="/" /><br / >
<input onclick="reset(this.form)" type="button" class="button" id="rcorners1" value="Clear" /><br / /><br / >
OUTPUT <input name="c" type="text" class="form" / /><br / /><br / >
<a href="https://howtopedic.blogspot.com">Calculator</a></div>
</td>
</tr>
</tbody></table>
</form>
</body>
No comments:
Post a Comment
I FEEL AWESOME WHEN YOU COMMENT.