JAVASCRIPT CALCULATOR

by Carl Angelo Nievarez

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
  function addChar(input, character) {
    if (input.value == null || input.value == "0")
      input.value = character
    else
      input.value += character
  }

  function cos(form) {
    form.display.value = Math.cos(form.display.value);
  }

  function sin(form) {
    form.display.value = Math.sin(form.display.value);
  }

  function tan(form) {
    form.display.value = Math.tan(form.display.value);
  }

  function sqrt(form) {
    form.display.value = Math.sqrt(form.display.value);
  }

  function ln(form) {
    form.display.value = Math.log(form.display.value);
  }

  function exp(form) {
    form.display.value = Math.exp(form.display.value);
  }

  function deleteChar(input) {
    input.value = input.value.substring(0, input.value.length - 1)
  }

  function changeSign(input) {
    if (input.value.substring(0, 1) == "-")
      input.value = input.value.substring(1, input.value.length)
    else
      input.value = "-" + input.value
  }

  function compute(form) {
    form.display.value = eval(form.display.value)
  }

  function square(form) {
    form.display.value = eval(form.display.value) * eval(form.display.value)
  }

  function checkNum(str) {
    for (var i = 0; i < str.length; i++) {
      var ch = str.substring(i, i + 1)
      if (ch < "0" || ch > "9") {
        if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "." && ch != "(" && ch != ")") {
          alert("invalid entry!")
          return false
        }
      }
    }
    return true
  }

</script>
<form name="sci-calc">
  <table border="0" cellpadding="0" cellspacing="0" id="calculator">
    <tr>
      <td colspan="5" align="center">
        <input name="display" value="0" MAXLENGTH="25" class="view form-control" />
      </td>
    </tr>
    <tr>
      <td align="center">
       ...

CSS

form#calculator,
table#calculator td {
  margin: 0;
  padding: 0
}

input.cal {
  width: 50px !important;
  text-align: center;
}

input.back {
  width: 154px !important;
  text-align: center;
}

input.view {
  width: 100% !important;
  border-radius: 0px;
  margin-top: 5px;  
  margin-bottom: 5px;
}