Monday, December 10, 2018

How to make a Calculator Using JavaScript


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:

Post a Comment