Пишем свой калькулятор на JS

Калькулятор - прекрасная задача для начинающего программиста. Она помогает понять основы работы с арифметическими и строковыми операциями. Если Вы ещё не сделали свой калькулятор, то советую закрыть этот пробел вместе с этим уроком. HTML:
1
2
3
4
5
<div id="calc-wrap">
    <div id="calc">
     <textarea id="inputVal"></textarea>
    </div>
</div>
Используется javascript-функции: eval() - преобразует строку в javascript и выполняет его. innerHTML - получает и присваивает внутренний HTML текст DOM-элементу (div, span, label и т.д.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
//набор кнопок
var signs=["1","2","3","+","4","5","6","-","7","8","9","/","0","=",".","c"];
var calc=document.getElementById("calc");
  
//Добавление кнопок к форме калькулятора
for(var i=0;i<signs.length;i++){
    calc.innerHTML += "<div class=btn>"+signs[i]+"</div>";
}
  
//Действие, выполняемое при клике на любую кнопку
$(".btn").click(function() {
    var textArea=$("#inputVal");
 
    if (this.innerHTML !== "=") {
        //Добавление значения кнопки в текстовое поле
        textArea.val(textArea.val()+this.innerHTML);
    } else {
        //Если нажата кнопка "=", то, приведя выражение
        // в текстовом поле к javascript, вычислить значение
        textArea.val(eval(textArea.val()));
    }
    //Если нажата кнопка "с", то стирает все из текстового поля
    if (this.innerHTML === "c") {
        textArea.val("");
    }
});
</script>
Используются CSS-свойства: line-height - устанавливает высоту строки для текста. Текст выравнивается по центру этой высоты. text-align - выравнивает текст по горизонтали (принимает значения: left,right,center) resize - устанавливает возможно изменение размеров текстового поля (принимает значения: vertical, horizontal,both,none)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
.btn{
    width:60px;
    height:60px;
    background:#fc0;   
    display:inline-block;
    text-align:center;
    line-height:60px;
}
 
.btn:hover{
    background:#f70;
    color:#fff;
}
 
#calc-wrap{
    padding: 10px;
    width: 100%;
    text-align: center;
    background: #eeeeee;
}
 
#calc {
    width:240px;
    display: inline-block;
}
 
#inputVal {
    width:100%;
    border:0px;
    font-size:16px;
    resize: vertical;
}
</style>
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru