<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p id="previous" style="width:218px;height:20px;font-size:20px;margin:2px;margin-bottom:0px;padding:2px;padding-bottom:0px;border-left:1px solid;border-top:1px solid;border-right:1px solid" align="right"></p>
<p id="display" style="width:218px;height:40px;font-size:40px;margin:2px;margin-top:0px;padding:2px;padding-top:0px;border-left:1px solid;border-bottom:1px solid;border-right:1px solid" align="right"></p>
<button id="b_clear" style="width:166px;height:50px;font-size:30px;margin:2px">C</button>
<button id="b_divide" style="width:50px;height:50px;font-size:30px;margin:2px">/</button><br/>
<button id="b_7" style="width:50px;height:50px;font-size:30px;margin:2px">7</button>
<button id="b_8" style="width:50px;height:50px;font-size:30px;margin:2px">8</button>
<button id="b_9" style="width:50px;height:50px;font-size:30px;margin:2px">9</button>
<button id="b_multiply" style="width:50px;height:50px;font-size:30px;margin:2px">*</button><br/>
<button id="b_4" style="width:50px;height:50px;font-size:30px;margin:2px">4</button>
<button id="b_5" style="width:50px;height:50px;font-size:30px;margin:2px">5</button>
<button id="b_6" style="width:50px;height:50px;font-size:30px;margin:2px">6</button>
<button id="b_subtract" style="width:50px;height:50px;font-size:30px;margin:2px">-</button><br/>
<button id="b_1" style="width:50px;height:50px;font-size:30px;margin:2px">1</button>
<button id="b_2" style="width:50px;height:50px;font-size:30px;margin:2px">2</button>
<button id="b_3" style="width:50px;height:50px;font-size:30px;margin:2px">3</button>
<button id="b_add" style="width:50px;height:50px;font-size:30px;margin:2px">+</button><br/>
<button id="b_0" style="width:108px;height:50px;font-size:30px;margin:2px">0</button>
<button id="b_dot" style="width:50px;height:50px;font-size:30px;margin:2px">.</button>
<button id="b_equal" style="width:50px;height:50px;font-size:30px;margin:2px">=</button>
<script src="script.js"></script>
</body>
</html>
var previousValue;
var math = "";
$(document).ready(function() {
$("#b_0").click(function() {
$("#display").append("0");
});
$("#b_1").click(function() {
$("#display").append("1");
});
$("#b_2").click(function() {
$("#display").append("2");
});
$("#b_3").click(function() {
$("#display").append("3");
});
$("#b_4").click(function() {
$("#display").append("4");
});
$("#b_5").click(function() {
$("#display").append("5");
});
$("#b_6").click(function() {
$("#display").append("6");
});
$("#b_7").click(function() {
$("#display").append("7");
});
$("#b_8").click(function() {
$("#display").append("8");
});
$("#b_9").click(function() {
$("#display").append("9");
});
$("#b_dot").click(function() {
$("#display").append(".");
});
$("#b_clear").click(function() {
$("#display").text("");
math = "";
$("#previousValue").text("");
});
$("#b_add").click(function() {
currentValue = Number($("#display").text());
currentValue = Number($("#display").text());
if (math == "") {
previousValue = currentValue;
} else if (math == "+") {
previousValue += currentValue;
} else if (math == "-") {
previousValue -= currentValue;
} else if (math == "*") {
previousValue *= currentValue;
} else {
previousValue /= currentValue;
}
$("#display").text("");
math = "+";
$("#previous").text(previousValue + " " + math);
});
$("#b_subtract").click(function() {
currentValue = Number($("#display").text());
if (math == "") {
previousValue = currentValue;
} else if (math == "+") {
previousValue += currentValue;
} else if (math == "-") {
previousValue -= currentValue;
} else if (math == "*") {
previousValue *= currentValue;
} else {
previousValue /= currentValue;
}
$("#display").text("");
math = "-";
$("#previous").text(previousValue + " " + math);
});
$("#b_multiply").click(function() {
currentValue = Number($("#display").text());
if (math == "") {
previousValue = currentValue;
} else if (math == "+") {
previousValue += currentValue;
} else if (math == "-") {
previousValue -= currentValue;
} else if (math == "*") {
previousValue *= currentValue;
} else {
previousValue *= currentValue;
}
$("#display").text("");
math = "*";
$("#previous").text(previousValue + " " + math);
});
$("#b_divide").click(function() {
currentValue = Number($("#display").text());
if (math == "") {
previousValue = currentValue;
} else if (math == "+") {
previousValue += currentValue;
} else if (math == "-") {
previousValue -= currentValue;
} else if (math == "*") {
previousValue *= currentValue;
} else {
previousValue /= currentValue;
}
$("#display").text("");
math = "/";
$("#previous").text(previousValue + " " + math);
});
$("#b_equal").click(function() {
currentValue = Number($("#display").text());
if (math == "+") {
previousValue += currentValue;
} else if (math == "-") {
previousValue -= currentValue;
} else if (math == "*") {
previousValue *= currentValue;
} else if (math == "/") {
previousValue /= currentValue;
}
$("#display").text(previousValue);
$("#previous").text("");
});
});