Skip to content

Commit 96d759d

Browse files
matowdevmatowdev
committed
[HW-17.14/st-compl] creating-calculator-2-inputs
Creating " minimalist" calculator with/by two inputs. Worth noting: - alternative solutions. FS-dev: B-3 / JS basic
1 parent 927a47a commit 96d759d

File tree

3 files changed

+212
-0
lines changed

3 files changed

+212
-0
lines changed

‎full-stack-dev/3-js-basic/17-dom/17-14-hw-13-creating-calculator-2-inputs/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Calculator</title>
8+
<link rel="stylesheet" href="./style.css">
9+
<script src="./index.js" defer></script>
10+
</head>
11+
12+
<body class="page">
13+
<div class="calc-wrap">
14+
<div class="input-wrap">
15+
<input class="calc-input" id="first-input" type="number">
16+
<input class="calc-input" id="second-input" type="number">
17+
</div>
18+
<div class="btns-wrap">
19+
<button class="calc-btn" id="plus-btn" type="button">+</button>
20+
<button class="calc-btn" id="minus-btn" type="button">-</button>
21+
<button class="calc-btn" id="division-btn" type="button">/</button>
22+
<button class="calc-btn" id="multiply-btn" type="button">*</button>
23+
<button class="calc-btn" id="clear-btn" type="button">AC</button>
24+
</div>
25+
<div class="result-wrap">
26+
<p class="result-text" id="result-text">Result:<span class="result" id="result"></span></p>
27+
</div>
28+
</div>
29+
</body>
30+
31+
</html>

‎full-stack-dev/3-js-basic/17-dom/17-14-hw-13-creating-calculator-2-inputs/index.js‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
// Нужно написать калькулятор, который позволяет ввести 2-ва числа в 2-ва input, и нажать на кнопку операции (сложение, деление, вычитание, умножение)
2+
// - Вывести результат в отдельном окне/поле.
3+
// - После операций инпуты должны очищаться.
4+
5+
'use strict';
6+
7+
const inputWrap = document.querySelector('.input-wrap');
8+
const firstInput = document.getElementById('first-input');
9+
const secondInput = document.getElementById('second-input');
10+
const btnsWrap = document.querySelector('.btns-wrap');
11+
const resultSpan = document.getElementById('result');
12+
13+
let firstInputValue;
14+
let secondInputValue;
15+
16+
// DRY
17+
function clearValue() {
18+
firstInput.value = '';
19+
secondInput.value = '';
20+
firstInputValue = 0;
21+
secondInputValue = 0;
22+
}
23+
24+
function calc(event) {
25+
const targetId = event.target.id;
26+
27+
if (targetId === 'plus-btn') {
28+
resultSpan.textContent = String(firstInputValue + secondInputValue);
29+
clearValue();
30+
} else if (targetId === 'minus-btn') {
31+
resultSpan.textContent = String(firstInputValue - secondInputValue);
32+
clearValue();
33+
} else if (targetId === 'division-btn') {
34+
resultSpan.textContent = String(firstInputValue / secondInputValue);
35+
clearValue();
36+
} else if (targetId === 'multiply-btn') {
37+
resultSpan.textContent = String(firstInputValue * secondInputValue);
38+
clearValue();
39+
} else if (targetId === 'clear-btn') {
40+
resultSpan.textContent = '';
41+
clearValue();
42+
}
43+
}
44+
45+
firstInput.addEventListener('input', () => {
46+
const value = firstInput.value;
47+
firstInputValue = Number(value);
48+
});
49+
50+
secondInput.addEventListener('input', () => {
51+
const value = secondInput.value;
52+
secondInputValue = Number(value);
53+
});
54+
55+
btnsWrap.addEventListener('click', calc);
56+
57+
// ?? альтернативное решение
58+
// function clearInputs() {
59+
// firstInput.value = '';
60+
// secondInput.value = '';
61+
// }
62+
//
63+
// function onCalcButtonClick(event) {
64+
// // Получаем ID кнопки, на которую кликнули
65+
// const targetId = event.target.id;
66+
//
67+
// // Если клик был не по кнопке, а по обертке, выходим из функции
68+
// if (event.target === btnsWrap) {
69+
// return;
70+
// }
71+
//
72+
// // Обрабатываем кнопку очистки отдельно
73+
// if (targetId === 'clear-btn') {
74+
// clearInputs();
75+
// resultSpan.textContent = '';
76+
// return; // Выходим из функции, чтобы не выполнять дальнейшие проверки
77+
// }
78+
//
79+
// // Считываем значения из инпутов и сразу преобразуем их в числа.
80+
// // Используем parseFloat, чтобы работать с дробными числами.
81+
// const firstValue = parseFloat(firstInput.value);
82+
// const secondValue = parseFloat(secondInput.value);
83+
//
84+
// // Проверяем, являются ли введенные значения числами.
85+
// // Если нет - выводим сообщение об ошибке и выходим.
86+
// if (isNaN(firstValue) || isNaN(secondValue)) {
87+
// resultSpan.textContent = 'Ошибка: введите числа!';
88+
// return;
89+
// }
90+
//
91+
// let result;
92+
//
93+
// // Используем switch для определения, какую операцию выполнить.
94+
// // Это чище, чем много if-else if.
95+
// switch (targetId) {
96+
// case 'plus-btn':
97+
// result = firstValue + secondValue;
98+
// break;
99+
// case 'minus-btn':
100+
// result = firstValue - secondValue;
101+
// break;
102+
// case 'multiply-btn':
103+
// result = firstValue * secondValue;
104+
// break;
105+
// case 'division-btn':
106+
// // Проверяем деление на ноль
107+
// if (secondValue === 0) {
108+
// resultSpan.textContent = 'Ошибка: на ноль делить нельзя!';
109+
// return; // Выходим, чтобы не очищать поля
110+
// }
111+
// result = firstValue / secondValue;
112+
// break;
113+
// }
114+
//
115+
// // Выводим результат и очищаем поля ввода
116+
// resultSpan.textContent = result;
117+
// clearInputs();
118+
// }
119+
//
120+
// // Вешаем один обработчик на родительский элемент
121+
// btnsWrap.addEventListener('click', onCalcButtonClick);

‎full-stack-dev/3-js-basic/17-dom/17-14-hw-13-creating-calculator-2-inputs/style.css‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
.page {
6+
padding: 20px;
7+
min-width: 320px;
8+
}
9+
10+
.calc-wrap {
11+
display: flex;
12+
flex-direction: column;
13+
row-gap: 10px;
14+
border-radius: 5px;
15+
padding: 15px;
16+
width: 100%;
17+
max-width: 190px;
18+
outline: 1px solid lightslategray;
19+
}
20+
21+
.input-wrap {
22+
display: flex;
23+
flex-direction: column;
24+
row-gap: 8px;
25+
}
26+
27+
.calc-input {
28+
width: 100%;
29+
min-height: 30px;
30+
}
31+
32+
.btns-wrap {
33+
display: flex;
34+
justify-content: space-between;
35+
}
36+
37+
.calc-btn {
38+
width: 25px;
39+
color: purple;
40+
cursor: pointer;
41+
}
42+
43+
#multiply-btn {
44+
padding-top: 5px;
45+
}
46+
47+
#clear-btn {
48+
width: 35px;
49+
font-size: 12px;
50+
}
51+
52+
.result-text {
53+
margin: 0;
54+
color: lightslategray;
55+
}
56+
57+
.result {
58+
padding-left: 5px;
59+
color: lightslategray;
60+
}

0 commit comments

Comments
 (0)