Този калкулатор ще ви помогне да извършвате основни аритметични операции събиране, изваждане, умножение и деление. Демо на живо
Изходен код: Github
предпоставка:
Основното разбиране на HTML, CSS и javascript улеснява разбирането на логиката на този калкулатор.
Използвани технологии:
- HTML (изграждане на структура)
- CSS (Дизайн/Представяне)
- JavaScript (Реализация на логиката)
Трябва да имате редактор, за да пишете код. Силно ще ви препоръчам да използвате Visual Studio Code за кодиране. VS Code е моят най-използван и любим редактор.
Да започваме:
- index.html
- Style.css
- Script.js
Да разбием структурата
Ето графично представяне на структурата. Този калкулатор основно е проектиран с помощта на концепцията за flex и Grid оформления. Чрез използването на тези оформления става много лесно да реагирате много лесно на вашето уеб приложение.
Стъпка 1: Позволете да проектирате калкулатора с помощта на HTML и CSS
- HTML (хипертекстов език за маркиране) е стандартният език за маркиране, използван за създаване на основната структура на уебсайта.
- CSS (Cascading Style Sheets) описва как HTML елементите трябва да се показват на екрана. Може да контролира оформлението на множество уеб страници наведнъж.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Calculator</title>
</head>
- Външен CSS с име
style.css, свързан с HTML чрез използване на маркер<link>за проектиране на приложение за калкулатор. - Съдържанието в маркера
<title>ще бъде показано в заглавната лента на браузъра или в раздела на страницата
<div class="container"> <!-- Heading --> <!-- Display Screen--> <!-- Buttons--> </div>
.Контейнер
Outer container conatins All elements of calculator like calculator headind, display screen and buttons.
.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #4f9b9440;
box-shadow: rgba(214, 238, 236, 0.25) 0px 30px 60px -12px inset, rgba(15, 161, 130, 0.3) 0px 18px 36px -18px inset;
}
Display:flex;
flex-direction: column;
justify-content: center;
align-items: center;Свойствата на дисплея се използват за задаване на посоката на елементите от вътрешната страна на контейнера и подравняването им в центъра на контейнера.
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
свойствата на позицията се използват за поставяне на контейнера в центъра на медийния екран.
#дисплей
Екранът на дисплея представлява представяне на въведени числа, оператори и техните резултати
<input type="text" name="number" id="display" readonly>
#display{
position: relative;
width: 98%;
border: none;
outline: none;
text-align: right;
font-size: 1.5rem;
font-weight: bold;
background-color:white;
}
Свойството readonly ограничава използването на въвеждане на текст. Той ще показва стойности, вместо да приема директно въвеждане от потребителя. text-align:right свойството, използвано за подравняване на числа към дясната страна на екрана на дисплея.
.решетка-контейнер
Този контейнер се състои от всички бутони за въвеждане с числа и оператори
<div class="grid-container">
<!-- grid Items -->
</div>
.grid-container {
display: grid;
width: 100%;
grid-template-columns: auto auto auto auto;
justify-content: center;
padding: 3px;
}
.grid-item {
padding: 5px 10px;
width:59px ;
outline: none;
margin: 0.5px;
font-size: 1.5rem;
text-align: center;
border: none;
box-shadow: rgba(182, 182, 211, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
Контейнерът за мрежа се използва за фиксиране на бутони в редове и колони. За използване на мрежово оформление се използва свойството display: grid. grid-template-columns:auto auto auto auto ще реши, че ще има четири колони в един ред. Всеки бутон в контейнера на мрежата е проектиран и поддържан с помощта на клас grid-item.
Ред 1:
<!-- row 1 -->
<button class="grid-item plus">+</button>
<button class="grid-item minus">-</button>
<button class="grid-item multiply">*</button>
<button class="grid-item divide">/</button>
- В ред 1 има четири бутона със стойности съответно +, -, *, /.
- Това са основни аритметични оператори, използвани при изчислението.
.plus{
background-color:#F79F1F;
}
.minus{
background-color: #A3CB38;
}
.multiply{
background-color: #D980FA;
}
.divide{
background-color: #FFC312;
}
.plus, .minus, .multiply и .divide класове, прилагащи различни цветове към бутоните. Различните цветови схеми правят този калкулатор по-привлекателен.
Ред 2:
<!-- row 2 -->
<button class="grid-item">7</button>
<button class="grid-item">8</button>
<button class="grid-item">9</button>
<button class="grid-item equal">=</button>
В ред 2 има четири бутона със стойности 7, 8, 9 и = оператор. .equal клас, използван за проектиране на равен бутон.
.equal{
background-color: #29696b;
color: white;
grid-row: span 4;
}
Свойството grid-row:span 4 разширява бутона за равенство до 4-те реда.
Ред 3:
<!-- row 3 -->
<button class="grid-item">4</button>
<button class="grid-item">5</button>
<button class="grid-item">6</button>
Ред 4:
<!-- row 4 -->
<button class="grid-item">1</button>
<button class="grid-item">2</button>
<button class="grid-item">3</button>
Ред 5:
<!-- row 5 -->
<button class="grid-item">0</button>
<button class="grid-item">.</button>
<button class="grid-item">C</button>
Ред 3, 4 и 5 се състои съответно от стойността 4,5,6 , 1,2,3 , 0,.,C.
активен селектор:
.grid-item:active{
background-color: #757474;
}
:active селекторът се използва за избиране и стилизиране на активния елемент. Елементът става активен, когато щракнете върху него. при щракване върху елементи от мрежата цветът на фона им става сив.
Стъпка 2: Нека внедрим javascript логика:
Методология:
Когато щракнете върху бутон
- Ако е число (0–9) или оператор (+,-,*,/), то ще бъде свързано към екрана на дисплея.
- Ако е равен (=), тогава изразът на екрана на дисплея ще бъде оценен и ще покаже резултата на екрана на дисплея.
- Ако е ( C ), ще нулира калкулатора и ще зададе стойността на екрана на 0.
- Ако е (.), той ще се свърже към екрана на дисплея веднъж в един операнд.
На първо място, трябва да поемете контрола над HTML елемента. Ще използвате селектори, за да извикате тези входове и да ги съхраните в променлива. querySelector() връща елемента в документа, който съответства на посочения селектор.
const screenValue = document.querySelector("#display")
Чрез използване на селектор на id екранът на дисплея ще бъде достъпен и ще бъде присвоен на променливата screenValue.
const buttonValue = document.querySelectorAll("button")
За достъп до всички бутони се използва document.querySelectorAll("button") и това се присвоява на променливата buttonValue. Както ние правим console.log(buttonValue), той показва NodeList на всички бутони
buttonValue.forEach(element => {
element.addEventListener('click', e => {
let buttonText = e.target.innerText;
});
});
- Методът за обратно извикване forEach() се използва за достъп до всички възлови елементи и добавяне на слушател на събития при кликване.
let buttonText = e.target.innerText;достъп до стойността на кликнатия бутон и я съхранява в променливата buttonText.
ЗАБЕЛЕЖКА:
- Изразът е комбинация от оператори и операнди.
- Между два операнда има само един оператор.
- Само операторите
+и-могат да бъдат префикс на число. - Само едно
.е разрешено в един операнд
function refreshCalculator() {
isOperator = true;
isdot = false;
isNumber = true;
screenValue.value = "0"
}
if (buttonText === "C") {
refreshCalculator();
}
ако потребителят щракне върху бутона C, това ще опресни настройката на калкулатора и ще нулира стойността на екрана до 0. isOperator=true и isNumber=true означава, че потребителят може да въведе число или оператор.isDot=false означава, че няма точност в операнд.
else if (buttonText === '.' && !isdot) {
screenValue.value += buttonText;
isdot = true;
}
Ако потребителят щракне върху бутона ., isdot ще бъде отметнато. ако няма точност в стойността . ще се свърже и ще направи isdot=true. гарантира дублиране на точността в операнда, защото само едно . е разрешено в една стойност.
else if (buttonText === '+' && isOperator) {
// checking if display screen vaule is not equal to zero operator will b concatenate like 23+
if (screenValue.value != '0') {
screenValue.value += buttonText;
}
//if display value is 0 then + will be add as prefix of the operand
else {
screenValue.value = buttonText;
}
isOperator = false;
isNumber = true;
isdot = false;
}
- ако потребителят щракне върху бутона
+,isOperatorще бъде отметнато, ако вече има оператор, няма да бъде добавен повече оператор, в противен случай ще бъде добавен оператор. - ако стойността на екрана на дисплея е 0 и потребителят въвежда + оператор. Операторът ще бъде добавен като префикс от лявата страна на операнда, в противен случай ще бъде конкатениран от дясната страна на операнда.
- Сега е време да зададете стойностите на boolean
isOperator=false, което означава, че повече оператори няма да бъдат свързани, докато не бъде добавен друг операнд. isNumber=trueозначава, че потребителят може да въведе друг операнд.isdot=falseозначава, че потребителят може да добави.в друг операнд.
else if (buttonText === '-' && isOperator) {
if (screenValue.value != '0') {
screenValue.value += buttonText;
}
else {
screenValue.value = buttonText;
}
isOperator = false;
isNumber = true;
isdot = false;
}
- ако потребителят щракне върху бутона
-isOperatorще бъде отметнато, ако вече има оператор, няма да бъде добавен повече оператор, в противен случай ще бъде добавен оператор. - ако стойността на екрана на дисплея е 0 и потребителят въведе — оператор. Операторът ще бъде добавен като префикс от лявата страна на операнда, в противен случай ще бъде конкатениран от дясната страна на операнда.
- Сега е време да зададете стойностите на boolean
isOperator=false, което означава, че повече оператори няма да бъдат свързани, докато не бъде добавен друг операнд. isNumber=trueозначава, че потребителят може да въведе друг операнд.isdot=falseозначава, че потребителят може да добави.в друг операнд.
else if (buttonText === '*' && isOperator) {
if (screenValue.value != '0') {
screenValue.value += buttonText;
isOperator = false;
isNumber = true;
isdot = false;
}
- ако потребителят щракне върху бутона
*,isOperatorще бъде отметнато, ако вече има оператор, няма да бъде добавен повече оператор, в противен случай ще бъде добавен оператор. *никога не може да се използва като префиксен оператор, така че ще бъде свързан само ако екранът на дисплея има стойност › 0- Сега е време да зададете стойностите на boolean
isOperator=false, което означава, че повече оператори няма да бъдат свързани, докато не бъде добавен друг операнд. isNumber=trueозначава, че потребителят може да въведе друг операнд.isdot=falseозначава, че потребителят може да добави.в друг операнд.
else if (buttonText === '/' && isOperator) {
if (screenValue.value != '0') {
screenValue.value += buttonText;
isOperator = false;
isNumber = true;
isdot = false;
}
}
- Ако потребителят щракне върху бутона
/,isOperatorще бъде отметнато, ако вече има оператор, няма да бъде добавен повече оператор, в противен случай ще бъде добавен оператор. /никога не може да се използва като префиксен оператор, така че ще бъде свързан само ако екранът на дисплея има стойност › 0- Сега е време да зададете стойностите на boolean
isOperator=false, което означава, че повече оператори няма да бъдат свързани, докато не бъде добавен друг операнд. isNumber=trueозначава, че потребителят може да въведе друг операнд.isdot=falseозначава, че потребителят може да добави.в друг операнд.
else if (buttonText >= '0' && buttonText <= 9 && isNumber) {
if (buttonText === '0' && screenValue.value === '0') {
//do nothing.
}
else if (screenValue.value === '0') {
//conver the 0 to the button value
screenValue.value = buttonText;
}
else {
//append 0 into the value
screenValue.value += buttonText;
}
// allow user to add operator after operand
isOperator = true;
}
- Стойностите от (0–9) ще бъдат вмъкнати и свързани.
- Ако
buttonText === '0' && screenValue.value === '0'it няма да направи нищо, това означава, че стойността на екрана на дисплея ще остане 0. - Ако
screenValue.value === '0', ноbuttonText > 0, тогава стойността на дисплея на екрана ще бъде равна на стойността на бутонния текст. - В противен случай
0ще бъде добавена стойност на екрана на дисплея.
else if (buttonText === '=') {
screenValue.value = eval(screenValue.value)
isNumber = false;
}
Ако потребителят щракне върху бутона =, изразът на екрана на дисплея ще бъде оценен и резултатът ще бъде показан на екрана на дисплея.
Когато всички отделни компоненти се сглобят заедно, имаме напълно функционален калкулатор. Сега можете да играете с него. Ако сте готови да направите повече, тогава:
опитайте да добавите още бутони като backspace, който изчиства последния знак. или добавете още няколко оператора като оператора за остатък (%). Просто си поиграйте с него... Надявам се този урок да ви е харесал.
Ако имате някакви съмнения, моля, коментирайте ги по-долу. И ако ви е харесал този урок, моля, натиснете бутона за харесване по-долу. Благодаря ти ;)
Препоръка:
Независимо дали изграждате калкулатор в JavaScript или работите върху по-сложен проект, идеята е да разбиете съдържанието по логичен и изтълкуван начин. Това ще ви помогне да извлечете точния синтаксис и ще доведе до гладко уеб приложение. Вместо да започнете директно с кодиране, опитайте се да разберете каква е истинската цел на проекта, който ще изградите, как работи, какъв ще бъде входът и желаният изход, ще ви отведе до кода.
