Edit in JSFiddle

var calc = new MathCalc();

document.getElementById("btn").addEventListener("click", function(){
	var expressionString = document.getElementById("calc").innerHTML;
  
  if(!expressionString){
  	alert("No expression given");
    return;
  }
  
  var expr = calc.parse(expressionString.replace(new RegExp("<br>", 'g'), ""));

  if (expr.error) {
      alert(expressionString + ' : ' + expr.error.text);
  }else {
      var res = expr.eval();
      
      document.getElementById("exp").innerHTML = expressionString;
      document.getElementById("result").innerHTML = res;
  }
}, false);

// Prevent enter in content editable
document.getElementById("calc").addEventListener("keydown", function(e){
	return e.which != 13;
}, false);

<div class="screen-border">
  <div contenteditable="true" id="calc" class="screen"></div>
</div>
<br/>

<div style="text-align:center;">
  Used expression: <span id="exp"></span>
<br/>
Result: <span id="result"></span>
<br/>
<input type="button" class="key" value="Calculate" id="btn"/>
</div>

.screen{
  border-left: 30px solid #ccc;
	border-right: 30px solid #ccc;
	border-top: 10px solid #ccc;
	border-bottom: 10px solid #ccc;
	width: 242px;
	height: 60px;
	border-radius: 5px;
	margin-left: -2px;
	margin-top: px;
	color: black;
	font-size: 1rem;
	line-height: 4.5rem;
	overflow: hidden;
	padding-right: 40px;
}

.screen-border{
  width: 327px;
	background-color: #b0b78e!important;
	border: 8px solid #000;
	margin: 5px auto;
	line-height: 2;
	text-align:right;
	padding: 0 10px 0 0;
	height: 80px;
	border-radius: 5px;
}

.key{
	background-color: #404133;
	border: 3px solid black;
	border-radius: 3px;
	height: 50px;
	line-height: 50px;
	color: white;
	font-size: 1.5em;
	position: relative;
}