these are my html , css and javascript code i tried clicking on the button of calculator but no change in the display of the numbers no calculation or display of number is happening if there any problem in code please suggest solutions.
html code
<html>
<head>
<title>Calculate</title>
<link rel="stylesheet" type="text/css" href="calculator.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript" src="calculator.js"></script>
<div class="text-center">
<h1>Bootstrap calculator</h1>
</div>
<div id="calcOutPut">
<span id="steps">0</span>
<hr/>
</div>
<div class="text-center" id="calculator">
<a class="btn btn-danger" id="deleteAll">AC</a>
<a class="btn btn-danger" id="backOne">CE</a>
<a class="btn btn-primary" id="/">/</a>
<a class="btn btn-primary" id="*">*</a>
<br/>
<a class="btn btn-primary" id="7">7</a>
<a class="btn btn-primary" id="8">8</a>
<a class="btn btn-primary" id="9">9</a>
<a class="btn btn-primary" id="-">-</a>
<br/>
<a class="btn btn-primary" id="4">4</a>
<a class="btn btn-primary" id="5">5</a>
<a class="btn btn-primary" id="6">6</a>
<a class="btn btn-primary" id="+">+</a>
<br/>
<a class="btn btn-primary" id="1">1</a>
<a class="btn btn-primary" id="2">2</a>
<a class="btn btn-primary" id="3">3</a>
<a class="btn btn-primary" id=".">.</a>
<br/>
<a class="btn btn-primary bigButton" id="0">0</a>
<a class="btn btn-primary bigButton" id="total">=</a>
</div>
</body>
</html>
css code
#calcOutPut{
height: 75px;
width: 250px;
border-top-left-radius: 2em;
border-top-right-radius: 2em;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
padding-top: 20px;
background-color: silver;
}
#calculator{
width: 250px;
background-color: grey;
padding-top: 20px;
padding-bottom: 30px;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
margin-right: auto;
margin-left: auto;
}
#steps{
padding-left: 50px;
font-size: 26px;
}
a{
margin: 5px;
width: 2.5vw;
height: 2.5vw;
}
.bigButton{
width: 93px;
}
javascript code
$(document).ready(function(){
var inputs = [""];
var totalString;
var operators1 = ["+","-","*","/"];
var operators2 = ["."];
var nums = [0,1,2,3,4,5,6,7,8,9];
function getValue(input){
if (operators2.includes(inputs[inputs.length-1])
===true && input === ".")) {
console.log("duplicat '.' ");
// statement
}
else if(inputs.length===1 && operators1.includes(input)===false){
inputs.push(input);
}
else if(operators1.includes(inputs[inputs.length-1])===false)){
inputs.push(input);
}
else if(nums.includes(Number(input))){
inputs.push(input);
}
update();
}
function update(){
totalString = inputs.join("");
$("#steps").html(totalString);
}
function getTotal(){
totalString = inputs.join("");
$("#steps").html(eval(totalString));
$("a").on("click", function(){
if (this.id==="deleteAll") {
inputs = [""];
update();
}
else if (this.id === "backOne") {
inputs.pop();
update();
}
else if (this.id === "total") {
getTotal();
}
else {
if (inputs[inputs.length-1].indexOf("+","-","*","/")===-1) {
getValue(this.id);
}
else {
getValue(this.id);
}
}
});
}
});