<link href="https://fonts.googleapis.com/css2?family=Gotu&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Gotu&family=Playfair+Display:ital,wght@1,800&display=swap" rel="stylesheet">
<div class="text-center x">
  <h1>JQuery 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>
<br/>
<div  class="text-center" id="y">
  <span>Designed and Coded by-</span><br/>
<span class="text-center" style="font-style:italic">G.S.</span>
</div>
</div>
html,body{
  background-image:url("https://www.xmple.com/wallpaper/blue-black-gradient-linear-1920x1080-c2-00008b-000000-a-315-f-14.svg");
}
h1{
  color:black;
  font-family:"gotu";
}
.x{
  background-color:orange;
}
#y{
  background-color:orange;
  font-family:"gotu";
  
}
#calcoutput{
  background-color:white;
   width:250px;
  color:black;
  height:75px;
  border-top-left-radius:1.5em;
  border-top-right-radius:1.5em;
  margin-right:auto;
  margin-left:auto;
  margin-top:20px;
  padding-top:15px;
}
#calculator{
  background-color:orange;
  width:250px;
  height:auto;
  padding-top:20px;
  padding-bottom:30px;
  border-bottom-left-radius:1.5em;
  border-bottom-right-radius:1.5em;
  margin-right:auto;
  margin-left:auto;
}
#steps{
  padding-left:50px;
  font-size:2em;
}
a{
  font-family: 'Playfair Display', serif;
  margin:5px;
  width:auto;
  height:auto;
}
.bigButton{
  width:93px;
}
$(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] ) && input===".")
       {
       console.log("Duplicate");
       }
    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));
    var x=$("#steps").html();
    inputs.splice(0, inputs.length);
    inputs.push(x);
  };
  $("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);
        }
    }
  });
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js