index.html
<!doctype HTML>
<html>
<head> <title> calculator</title>
<link rel="stylesheet" href="cal.css">
</head>
<body>
<script>
function on(){
document.getElementById('display').value="";
document.getElementById('display').style.display="block";
}
function clear1(){
document.getElementById('display').value="";
}
function insert(num){
document.calculator.display.value=document.calculator.display.value+num;
}
function equal(){
var x=document.calculator.display.value;
if(x){
document.calculator.display.value=eval(x);
}
}
function back(){
var x=document.calculator.display.value;
document.calculator.display.value=x.substring(0,x.length-1);
}
function off(){
document.getElementById('display').style.display="block";
}
</script>
<div id="contain">
<div id="abc">
<p>CALCULATOR</p>
</div>
<form name="calculator">
<input type="text" id="display" name="display"></form>
<table>
<tr>
<td> <input type="button" value="7" onclick="insert(7)"> </td>
<td> <input type="button" value="8" onclick="insert(8)"> </td>
<td> <input type="button" value="9" onclick="insert(9)"> </td>
<td> <input type="button" value="X" onclick="insert('*')"> </td>
<td> <input type="button" id="on" value="ON" onclick="on()"> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="insert(4)"> </td>
<td> <input type="button" value="5" onclick="insert(5)"> </td>
<td> <input type="button" value="6" onclick="insert(6)"> </td>
<td> <input type="button" value="/" onclick="insert('/')"> </td>
<td> <input type="button" value="C" onclick="clear1()"> </td>
</tr>
<tr>
<td> <input type="button" value="1" onclick="insert(1)"> </td>
<td> <input type="button" value="2" onclick="insert(2)"> </td>
<td> <input type="button" value="3" onclick="insert(3)"> </td>
<td> <input type="button" value="-" onclick="insert('-')"> </td>
<td> <input type="button" value="<" onclick="back()"> </td>
</tr>
<tr>
<td> <input type="button" value="0" onclick="insert(0)"> </td>
<td> <input type="button" value="." onclick="insert('.')"> </td>
<td> <input type="button" value="+" onclick="insert('+')"> </td>
<td> <input type="button" value="=" onclick="equal()"> </td>
<td> <input type="button" id="off" value="OFF" onclick="off()"> </td>
/tr>
</table>
</div>
</body>
</html>
cal.css
#contain{
background:silver;
position: relative;
width: 300px;
border: 5px solid black;
border-radius: 12px;
margin: 0px auto;
padding: 20px 20px 100px 20px;
}
#abc{
position: relative;
float:left;
margin-top: 10px;
}
#abc p{
color: black;
font-size: 20px;
font-weight: 900;
}
input[type=button] {
background:black;
color:white;
width: 100%;
font-size: 20px;
font-weight: 900;
border-radius:7px;
margin-left: 13px;
margin-top: 10px;
}
input[type = text] {
position: relative;
display:none;
width: 90%;
margin: 5px auto;
font-size: 20px;
padding: 10px;
}
.textview{
margin-left:20px;
}
0 Comments