<div class="calculator" name="Calc">
  <h1>Simple Calculator</h1>
  <input type="text" name="Input" id="textbox" class="textbox" readonly>
  <div class="buttons">
    <button class="button" id="clear">AC</button>
    <button class="button" id="CE"></button>
    <button class="button" id="modulus">%</button>
    <button class="button" id="divide">/</button>
    <button class="button" id="7">7</button>
    <button class="button" id="8">8</button>
    <button class="button" id="9">9</button>
    <button class="button" id="multiply">*</button>
    <button class="button" id="4">4</button>
    <button class="button" id="5">5</button>
    <button class="button" id="6">6</button>
    <button class="button" id="minus">-</button>
    <button class="button" id="1">1</button>
    <button class="button" id="2">2</button>
    <button class="button" id="3">3</button>
    <button class="button" id="plus">+</button>
    <button class="button" id="dot">.</button>
    <button class="button" id="0">0</button>
    <button class="button" id="Ans"></button>
    <button class="button" id="equals">=</button>
  </div>
</div>
body{
  background-color: tan;
}


.calculator {
  text-align: center;
  width: 300px;
  height: 350px;
  border-radius: 10px;
  margin: auto;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #Caa335;
  padding: 5px;
}

.buttons {
  width: 275px;
  
  text-align: center;
  margin:10px auto;
}

.button{
  float: left;
  height: 40px;
  /*t r b l*/
  /*margin: 2px 2px 15px 2px;*/
  /*width: 64.75px;*/
  width: 68px;
  color: #f19953;
  background: #fff;
  cursor: pointer;
}

.textbox {
  margin: 10px 0px 5px 0px;
  text-align: right;
  border: none;
  height: 25px;
  width: 275px;
  background-color: #F19953;
}
// A $( document ).ready() block.
$( document ).ready(function() {
//the javascript eval() function is a great resource that takes in a string and outputs that strings operations as a number eval("3 + 2") sends back 5

$("#1").click(function() {
 document.getElementById("textbox").value += '1';
});
  
$("#2").click(function() {
 document.getElementById("textbox").value += '2';
});
  
$("#3").click(function() {
 document.getElementById("textbox").value += '3';
});
  
$("#4").click(function() {
 document.getElementById("textbox").value += '4';
});  

$("#5").click(function() {
 document.getElementById("textbox").value += '5';
}); 
  
$("#6").click(function() {
 document.getElementById("textbox").value += '6';
}); 
  
$("#7").click(function() {
 document.getElementById("textbox").value += '7';
}); 
  
$("#8").click(function() {
 document.getElementById("textbox").value += '8';
}); 
  
$("#9").click(function() {
 document.getElementById("textbox").value += '9';
}); 
  
$("#0").click(function() {  document.getElementById("textbox").value += '0';
}); 
  
$("#dot").click(function() {  document.getElementById("textbox").value += '.';
});
  
  
$("#plus").click(function() {
 document.getElementById("textbox").value += ' + ';
});
  
$("#minus").click(function() {
 document.getElementById("textbox").value += ' - ';
});
  
$("#multiply").click(function() {
 document.getElementById("textbox").value += ' * ';
});
  
$("#divide").click(function() {
 document.getElementById("textbox").value += ' / ';
});
  
$("#modulus").click(function() {
 document.getElementById("textbox").value += ' % ';
});
  
  
$("#equals").click(function() {
 document.getElementById("textbox").value =  eval(document.getElementById("textbox").value);
});  
  
$("#clear").click(function() {
 document.getElementById("textbox").value =  '';
});   
  
  
  
}); //close doc rdy func

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js