OOP Calculator

Object-oriented calculator implementation using straight Javascript.

by Sajeetharan Sinnathurai

HTML

<label>a
  <input type="text" id="Text1" name="TextBox1">
</label>
<br>
<label>b
  <input type="text" id="Text2" name="TextBox2">
</label>
<br>
<label>c
  <input type="text" id="txtresult" name="TextBox3">
</label>
<br>
<input type="button" name="clickbtn" value="+" onclick="add_number()">
<input type="button" name="clickbtn" value="-" onclick="sub_number()">
<input type="button" name="clickbtn" value="*" onclick="mul_number()">
<input type="button" name="clickbtn" value="/" onclick="div_number()">

CSS

#calculator {
  border: solid black 1px;
  display: inline-block;
  padding: 4px;
  border-radius: 4px;
}

#calculator input[type="text"] {
  text-align: right;
}

#buttontable {
  position: relative;
}

#buttontable input {
  width: 32px;
  height: 32px;
  padding: 0px;
}

JavaScript

function add_number() {
      var first_number = parseInt(document.getElementById("Text1").value);
      var second_number = parseInt(document.getElementById("Text2").value);
      var result = first_number + second_number;
      document.getElementById("txtresult").value = result;
 }