Calculator

Using Object Oriented Programming Principles

by soum1

HTML

<div class="divCalculator">
  <p><input type="text" id="txtEditor" /></p>
  <p><button value="1">1</button><button value="2">2</button><button value="3">3</button><button value="+">+</button></p>
  <p><button value="4">4</button><button value="5">5</button><button value="6">6</button><button value="-">-</button></p>
  <p><button value="7">7</button><button value="8">8</button><button value="9">9</button><button value="*">*</button></p>
  <p><button value="0">0</button><button value=".">.</button><button value="/">/</button><input type="button" id="btnClear" value="C" /></p>
  <p>
    <input type="button" id="btnEvaluate" value="=" />

  </p>
</div>

CSS

.divCalculator {
  text-align: center;
  display: inline-block;
  padding: 5px 20px;
  background: #f8f5f5;
  box-shadow: 0px 0px 7px #000;
  margin: 50px
}

button, input[type="button"] {
  margin-right: 10px;
  width: 25px;
  height: 25px
}

JavaScript

class Calculator {
  constructor(inputexpression, displayElem) {
    this.Expression = inputexpression;
    this.DisplayElem = displayElem;
  }
  setDisplay(){
  	this.DisplayElem.value += this.Expression;
  }
  evaluateValue(){
  	this.DisplayElem.value = eval(this.Expression);
  }
  clearDisplay(){
  	this.DisplayElem.value = "";
  }
}


document.querySelectorAll("button").forEach(function (item, index) {
  item.addEventListener('click', function() {
    let objCalculator = new Calculator(item.value, document.getElementById("txtEditor"));
    objCalculator.setDisplay();
  });
});

document.getElementById("btnEvaluate").addEventListener("click", function() {
  let objCalculator = new Calculator(document.getElementById("txtEditor").value, document.getElementById("txtEditor"));
  objCalculator.evaluateValue();
});

document.getElementById("btnClear").addEventListener("click", function() {
  let objCalculator = new Calculator(document.getElementById("txtEditor").value, document.getElementById("txtEditor"));
  objCalculator.clearDisplay();
});