Calculator with Exception Handling

Calculator with Exception Handling

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;
  border: 1px solid #000;
}

JavaScript

class Calculator {
  constructor(inputexpression, displayElem) {
    this.Expression = inputexpression;
    this.DisplayElem = displayElem;
  }
  setDisplay(){
  	document.getElementById("btnClear").style.border = "1px solid #000";
  	this.DisplayElem.value += this.Expression;
  }
  evaluateValue(){
    try{
      this.DisplayElem.value = eval(this.Expression);
      alert("Calculated");
     }
  	catch (error){
        alert(error);
    }  
    finally {
    	document.getElementById("btnClear").style.border = "2px solid green";
    }
  }
  clearDisplay(){
  	  this.DisplayElem.value = "";
    	document.getElementById("btnClear").style.border = "1px solid #000";
  }
}


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();
});