<html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#calculator
{
margin-left:396px;
margin-top: 206px;
padding: 1%;
width : 20%;
height: 50%;
background-color: #999;
}
#display
{
border : solid #999 2px;
margin-bottom: 2px;
padding-left: -3px;
}
.button
{
width: 40px;
}
.button1
{
width:40px;
}
#shift
{
margin-right: 4px;
}
</style>
</head>
<body>
<form id="calculator">
<input type ="text" name="display" id="display" disabled="true" >
</br>
<input type="button" id="shift" class="dis"value="NO" class="button1"onclick="">
<input type="button" id="clear" value="AC" class="button" onclick="er()" disabled=true>
<input type="button" id="on" value="ON" class="button" onclick="ondisabled()">
<input type="button" id="off" value="OFF"class="button" onclick="offdisabled()">
</br>
<input type="button" id="one" value="1" class="button" onclick="calculator.display.value +='1'" disabled=true>
<input type="button" id="two" value="2" class="button" onclick="calculator.display.value +='2'" disabled=true> <input type="button" id="three" value="3" class="button" onclick="calculator.display.value +='3'" disabled=true>
<input type="button" id="plus" value="+" class="button" onclick="calculator.display.value +='+'" disabled=true>
</br>
<input type="button" id="four" value="4" class="button" onclick="calculator.display.value +='4'" disabled=true>
<input type="button" id="five" value="5" class="button" onclick="calculator.display.value +='5'"disabled=true>
<input type="button" id="six" value="6" class="button" onclick="calculator.display.value +='6'" disabled=true>
<input type="button" id="minus" value="-" class="button" onclick="calculator.display.value +='-'" disabled=true>
</br>
<input type="button" id="seven" value="7" class="button" onclick="calculator.display.value +='7'" disabled=true>
<input type="button" id="eight" value="8" class="button" onclick="calculator.display.value +='8'" disabled=true>
<input type="button" id="nine" value="9" class="button" onclick="calculator.display.value +='9'" disabled=true>
<input type="button" id="multiply" value="X"class="button" onclick="calculator.display.value +='*'" disabled=true>
</br>
<input type="button" id="dot" value="." class="button" onclick="calculator.display.value +='.'" disabled=true>
<input type="button" id="zero" value="0" class="button" onclick="calculator.display.value +='0'" disabled=true>
<input type="button" id="equal" value="=" class="button" onclick="e()" disabled=true>
<input type="button" id="divide" value="/" class="button" onclick="calculator.display.value +='/'" disabled=true></td>
</br>
</form>
</body>
</html>
<script type="text/javascript">
function ondisabled()
{
var w = document.getElementById("display");
w.placeholder = "0";
console.log("inside ondisabled");
document.getElementById("one").disabled = false;
document.getElementById("two").disabled = false;
document.getElementById("three").disabled = false;
document.getElementById("four").disabled = false;
document.getElementById("five").disabled = false;
document.getElementById("six").disabled = false;
document.getElementById("seven").disabled = false;
document.getElementById("eight").disabled = false;
document.getElementById("nine").disabled = false;
document.getElementById("zero").disabled = false;
document.getElementById("plus").disabled = false;
document.getElementById("minus").disabled = false;
document.getElementById("multiply").disabled = false;
document.getElementById("divide").disabled = false;
document.getElementById("equal").disabled = false;
document.getElementById("dot").disabled = false;
document.getElementById("clear").disabled = false;
}
function offdisabled()
{
var w = document.getElementById("display");
w.value = "";
w.placeholder = "";
console.log("inside ondisabled");
document.getElementById("one").disabled = true;
document.getElementById("two").disabled = true;
document.getElementById("three").disabled = true;
document.getElementById("four").disabled = true;
document.getElementById("five").disabled = true;
document.getElementById("six").disabled = true;
document.getElementById("seven").disabled = true;
document.getElementById("eight").disabled = true;
document.getElementById("nine").disabled = true;
document.getElementById("zero").disabled = true;
document.getElementById("plus").disabled = true;
document.getElementById("minus").disabled = true;
document.getElementById("multiply").disabled = true;
document.getElementById("divide").disabled = true;
document.getElementById("equal").disabled = true;
document.getElementById("dot").disabled = true;
document.getElementById("clear").disabled = true;
}
function e()
{ var x = document.getElementById("display").value;
console.log(x);
var operator = ["+" , "-" , "*" , "/"];
console.log(operator);
var q = -1;
for(var i=0;i<= x.length-1 ; i++)
{
if(operator.includes(x[i]) && (x[i] == x[i+1]))
q=i;
}
var expression;
var rad = document.getElementById("display");
console.log(q);
if(q == -1)
{
expression = x;
// var express = eval(x);
// rad.value = express;
// console.log(express);
}
else
{
var newstr = x.substring(0,q+1)+ x.substring(q+2,x.length);
console.log(newstr);
expression = newstr;
// var newd = eval(newstr);
// var rad = document.getElementById("display");
// rad.innerHTML = eval(x);
// rad.value = newd;
// console.log(newd);
}
}
</script>