Calculator

Creating a calculator in JavaScript can be very easy if you use the eval function. This function checks the string you pass to it and executes the string as if it as code from a script. If eval was used on the value of a text box, this could allow math functions to be executed then displayed to the same text box.

<form name="calculator">
 <input type="text" disabled id="total" style="text-align: right; background: white; width:">
</form>

<table>
 <tr>
  <td><input type="button" value="C" style="width: 100%" onclick="calculator.total.value = ''"></td>
  <td><input type="button" value="/" style="width: 100%" onclick="calculator.total.value += '/'"></td>
  <td><input type="button" value="*" style="width: 100%" onclick="calculator.total.value += '*'"></td>
  <td><input type="button" value="-" style="width: 100%" onclick="calculator.total.value += '-'" ></td>
 </tr>
 <tr>
  <td><input type="button" value="7" onclick="calculator.total.value += '7'"></td>
  <td><input type="button" value="8" onclick="calculator.total.value += '8'"></td>
  <td><input type="button" value="9" onclick="calculator.total.value += '9'"></td>
  <td rowspan="2"><input type="button" onclick="calculator.total.value += '+'" style="height: 50px; vertical-align: middle" value ="+"></td>
 </tr>
 <tr>
  <td><input type="button" value="4" onclick="calculator.total.value += '4'"></td>
  <td><input type="button" value="5" onclick="calculator.total.value += '5'"></td>
  <td><input type="button" value="6" onclick="calculator.total.value += '6'"></td>
 </tr>
 <tr>
  <td><input type="button" value="1" onclick="calculator.total.value += '1'"></td>
  <td><input type="button" value="2" onclick="calculator.total.value += '2'"></td>
  <td><input type="button" value="3" onclick="calculator.total.value += '3'"></td>
  <td rowspan="2"><input type="button" onclick="calculator.total.value = eval(calculator.total.value)" style="height: 50px; vertical-align: middle" value ="="></td>
 </tr>
 <tr>
  <td colspan="2"><input type="button" style="width: 68px; text-align: center" value="0" onclick="calculator.total.value += '0'"></td>
  <td><input type="button" value="."  style="width: 100%" onclick="calculator.total.value += '.' "></td>
 </tr>
</table>

At first this looks like a great deal of code, but it is not really that much. There is more HTML in the code than JavaScript. A lot of the code does the exact same thing, but just passes a different value to the text box we have created. Let's look at the form that is in the code.
This is a very basic form with only a input element inside of it. The input element is a text box. Since we do not want users to actually type in this box, we have used the attribute disabled. We have also given the box the id total, and used CSS to align the text in the box to the right and made the background white. That is all that there is for the form.
Moving on to the table, we see that we have five rows with four columns. Each cell has one button. To make the buttons look more uniform, some of them have a CSS style, that make them look the same as the other buttons. Inside each button there is an onclick event. All of the onclick events for the buttons, except the equals and clear button, do the same thing. When clicked, they add the value of that button to what the value in the text box. The equals button uses the eval function to execute what ever the value of the text box is. If this is not a actual math equation, then the button does not execute the string. The clear button, sets the value of the text box to nothing. This allows the user to clear the box at any time they wish. You can see the code in action below.