<html>
<head>
<title>Calculator</title>
<style>
.bg{
width: 500px;
margin: auto;
}
.cal{
float: left;
}
input{
height: 40px;
width: 70px;
font-family: serif;
font-size: 20px;
border-width: 5px;
background-color: lightgrey;
}
#scr{
width: 218px;
height: 10%;
background-color: grey;
color:white;
font-family: sans-serif;
font-size: 25px;
border-width:2px;
border-color: yellow;
}
#clr{
width: 143px;
border-width: 8px;
background-color: darkblue;
font-size: 17px;
color:white;
}
#clr:hover{
background-color: blue;
}
#eql{
background-color: darkred;
color:white;
border-width: 2px;
}
.form{
border: solid 5px;
width:218px;
background-color: lightblue;
}
input:hover{
background-color: grey;
color:white;
}
#eql:hover{
background-color:red;
}
.history{
width:200px;
height: 57vh;
background-color: lightblue;
float: left;
overflow: scroll;
scroll-behavior: smooth;
}
.his{
background-color: lightgrey;
width: 183px;
height: 60px;
text-align: center;
}
</style>
</head>
<body>
<br><br>
<div class="bg">
<h1 style="text-align: center;">Calculator</h1>
<div class="cal">
<form name="f1" class="form">
<input type="text" id="scr" name="scr"><br>
<input type="button" id="clr" value='Clear all' onclick="f1.scr.value= ' ' ">
<input type="button" value=' sqr ' onclick="f1.scr.value=eval(f1.scr.value)*eval(f1.scr.value) ">
<br>
<br>
<input type="button" value=' 1 ' onclick="f1.scr.value+= '1' ">
<input type="button" value=' 2 ' onclick="f1.scr.value+= '2' ">
<input type="button" value=' 3 ' onclick="f1.scr.value+= '3' ">
<br>
<br>
<input type="button" value=' 4 ' onclick="f1.scr.value+= '4' ">
<input type="button" value=' 5 ' onclick="f1.scr.value+= '5' ">
<input type="button" value=' 6 ' onclick="f1.scr.value+= '6' ">
<br>
<br>
<input type="button" value=' 7 ' onclick="f1.scr.value+= '7' ">
<input type="button" value=' 8 ' onclick="f1.scr.value+= '8' ">
<input type="button" value=' 9 ' onclick="f1.scr.value+= '9' ">
<br>
<br>
<input type="button" value=' + ' onclick="f1.scr.value+= '+' ">
<input type="button" value=' 0 ' onclick="f1.scr.value+= '0' ">
<input type="button" value=' - ' onclick="f1.scr.value+= '-' ">
<br>
<br>
<input type="button" value=' / ' onclick="f1.scr.value+= '/' ">
<input type="button" value=' x ' onclick="f1.scr.value+= '*' ">
<input type="button" id="eql" value=' = ' onclick="f1.scr.value=eval(f1.scr.value)" onclick="history(f1.scr.value)">
</form>
</div>
<div class="history" id="his">
<div class="his">History</div>
<p>8+5 = 13</p>
</div>
</div>
<script type="text/javascript">
let history=document.getElementById("his");
function history(v)
{
para=document.createElement('p');
data=v + "+" + eval(v);
para.innerHTML=data;
history.appendChild(para);
return eval(v);
}
</script>
</body>
</html>
Comments
Post a Comment