[HTML] How to Create a Simple Calculator

Здравейте, целта на тази статия е да покаже как можем да направим прост и функционален калкулатор чрез HTML и CSS. За пресмятане съм използвал прост javascript, който ще разясня подробно. Ето каква е крайната ни цел:

Както виждаме калкулаторът се състои от бутони и форма, в която пишем числата. Изграден е чрез таблица. Нека първо погледнем HTML-a. Както виждаме няма нищо особено – проста таблица с 5 реда. На самата таблица, за четимост (на CSS-a най-вече), съм дал id=“calc“. В заглавния ред, който се простира на четири колони (colspan=„4“) се намира нашата форма. В нея може да въвеждаме числа от клавиатурата, а както ще видим по-късно, и от бутоните на калкулатора. Нека първо да разясня атрибутите към тага input: 

• id=“display“ : Така даваме „име“ на формата, което по-късно ще използваме, за да я манипулираме.
• type=„text“ : Стандартно. Означава, че можем да пишем всякакъв текст вътре.
• placeholder=„0“ : Това е съдържанието, което ще виждаме, когато формата е празна. В случая е нула, както на повечето калкулатори.
• autofocus : При зараждане на страницата автоматично фокусира формата, за да можем директно да пишем.
• onkeypress=„searchKeyPress(event)“ : При натискане на бутон извиква фунцията searchKeyPress. Ще го разясня по-долу.

След първия ред на нашата таблица имаме още четири реда, с по черири колони, всяка от които съдържа по един бутон, като към всеки такъв присъства атрибутът onclick=„calculate()“, който извиква написаната от мен функция със съответният параметър (съвпадащ с изписаното върху бутона) при натискане.

Всичкият javascript, който съм използвал е това. Някакви си 15 реда код с две функции в него. Ето първата (calculate):

function calculate(input) {
var display = document.getElementById(‘display’).value;
switch(input) {
case „clear“: display = „“; break;
case „=“: display = eval(display); break;
default: display += input; break;
}
document.getElementById(‘display’).value = display;
}

Първият и последният ред са далеч от необходими, просто според мен така кодът се чете по-лесно, а и спестяват малко писане. В наталото на променлива display присвояваме стойността на нашата форма със същото име (където се съдържа всичко изписано). Използвам document.getElementById(‘display’).value, което общо взето означава „стойността на елемента с id=“display““ Като накрая обратно присвоявам стойността от променливата на елемента.

Същината на функцията е, че приема стойност и извършва действие с нея. Използвам съм проста switch-case конструкция. Каквото и да получим, освен „C“ или „=“ го добавяме към края на нашата форма (дисплей). В случай на „C“ (clear) просто нулираме формата (даваме й стойност празен стринг), а ако получим равно, използваме функцията eval(), която пресмята стойността на израза, след което я записваме на дисплеят. Тук е моментът да спомена, че използването на eval() по принцип се счита за лоша практика, но за нашият прост калкулатор върши работа. 🙂

Втората (и последна) функция е searchKeyPress(event), като единственото, което прави, е да проверява дали не сме натиснали клавиша „ENTER“ (неговит код е 13), и при натискането му, вместо да извършва действието по подразбиране, което в html е да събмитне и презереди формата (което води до нулиране нашият калкулатор), тя извиква calculate с параметър „=“, или с други думи връща нашият резултат. Това се прави единствено с цел калкулаторът ни да може да се използва пълноценно и само с клавиатура. Ако ще се ползват само бутоните по екрана, тази функция изобщо не е нужна.

И така, нашият калкулатор вече е готов и функционален. Трябва само да го направим красив. 🙂 Това принципно не ми е силната страна, но все пак ето и CSS-a, който използвам. Не е нещо особено, виждаме основно гласене на размерите и лейаута на таблицата. Вкарал съм и различен цвят, когато курсора е върху бутона с #calc button:hover. По-специфичен е последният блок – ::-webkit-input-placeholder {color: black;} чиято функция е да променя на черен цвета на плейсхолдъра (нуличката, която виждаме, когато дисплеят всъщност е празен), тъй като по подразбиране е светло сив. Възможно е да не работи на всички браузъри.

Така завършвам този пост, и както винаги, надявам се да съм помогнал на някого с нещо.