Простой калькулятор на JavaScript

Возможно Вам где-нибудь пригодиться простой калькулятор, имеющий функции сложения, вычитания, деления и умножения. Таких калькуляторов огромное количество, причем имеется каждый для своей категории. Есть калькуляторы для подсчета товаров, есть для косинусов, синусов и тангенсов, в общем, на Ваш вкус и выбор предоставляется в интернете их огромное количество. Сегодня мы рассмотрим один из них, который по всей вероятности, возможно пригодиться и Вам!

Пропишем тег form и дадим ему класс Calculator, который будет взаимодействовать при нажатии кнопок input. Для вывода и ввода символов и чисел используем тег input с именем answer.

К каждой кнопке добавляем событие onClick и даем ему значение document.Calculator.answer.value. Таким образом, при нажатии кнопки, событие передается тегу form с классом Calculator, а тот в свое время работает с тегом input у которого имя answer.

<table cellspacing="3" class="table">
<tr>
<td colspan="4">
<form name="Calculator">
<input class="input_answer" type="text" name="answer"
onFocus="this.style.background='#f5f5dc'"
onBlur="this.style.background='#cdcdcd'">
</td>
<td><input type="button" class="input_button"
value="  C  " onClick="document.Calculator.answer.value = ''"></td>
<tr valign="top">
</form>
</tr>
<td><input type="button" class="input_button"
value="  *  " onClick="document.Calculator.answer.value += '*'"></td>
<td><input type="button" class="input_button"
value="  /  " onClick="document.Calculator.answer.value += '/'"></td>
<td><input type="button" class="input_button"
value="  -  " onClick="document.Calculator.answer.value += '-'"></td>
<td><input type="button" class="input_button" value="  +  "
onClick="document.Calculator.answer.value += '+'"></td>
<td><input type="button" class="input_button"
value="  =  " onClick="document.Calculator.answer.value = eval
(document.Calculator.answer.value)"></td>
</tr>
<tr valign="top">
<td><input type="button" class="input_button"
value="  6  " onClick="document.Calculator.answer.value += '6'"></td>
<td><input type="button" class="input_button"
value="  7  " onClick="document.Calculator.answer.value += '7'"></td>
<td><input type="button" class="input_button"
value="  8  " onClick="document.Calculator.answer.value += '8'"></td>
<td><input type="button" class="input_button"
value="  9  " onClick="document.Calculator.answer.value += '9'"></td>
<td><input type="button" class="input_button"
value="  0  " onClick="document.Calculator.answer.value += '0'"></td>
</tr>
<tr valign="top">
<td><input type="button" class="input_button" value="  1  "
onClick="document.Calculator.answer.value += '1'"></td>
<td><input type="button" class="input_button" value="  2  "
onClick="document.Calculator.answer.value += '2'"></td>
<td><input type="button" class="input_button" value="  3  "
onClick="document.Calculator.answer.value += '3'"></td>
<td><input type="button" class="input_button"
value="  4  " onClick="document.Calculator.answer.value += '4'"></td>
<td><input type="button" class="input_button"
value="  5  " onClick="document.Calculator.answer.value += '5'"></td>
</tr>
</table>

Придадим немного стилей, которые смогут подчеркнуть элементы управления калькулятором.

.table
{
border: 1px solid black;
padding: 10px;
background: grey;
}

.input_answer
{
width: 210px;
height: 50px;
border: 1px solid black;
font-size: 30px;
color: black;
font-family: Tahoma;
background: #cdcdcd;
}

.input_button
{
width: 50px;
height: 50px;
font-size: 25px;
font-family: Tahoma;
}

Спасибо большое за внимание к данному материалу!