Abigail's Calculator

by IPWright83

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <input id="screen" class="col" type="number" />
  </div>
  <div class="row">
    <div id="num1" class="col btn-number">1</div>
    <div id="num2" class="col btn-number">2</div>
    <div id="num3" class="col btn-number">3</div>
  </div>
  <div class="row">
    <div id="num4" class="col btn-number">4</div>
    <div id="num5" class="col btn-number">5</div>
    <div id="num6" class="col btn-number">6</div>
  </div>
  <div class="row">
    <div id="num7" class="col btn-number">7</div>
    <div id="num8" class="col btn-number">8</div>
    <div id="num9" class="col btn-number">9</div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div id="num0" class="col btn-number">0</div>
    <div class="col"></div>
  </div>
  <div class="row">
    <div class="col">+</div>
    <div class="col">-</div>
    <div class="col">=</div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

var screen = $("#screen")[0];

$(".btn-number").on("click", function() {
	 var buttonThatIClicked = this;
   console.log(buttonThatIClicked.textContent);
   
   screen.value = screen.value + buttonThatIClicked.textContent;
});


/* 

var person = new Person("Abigail");



console.log(person.name);
console.log(person.age); // 6 */
/* 
  person.run();
  person.eat();
  person.weewee(); 
*/