Skip to content

Commit 9a62d4d

Browse files
SergPro86SergPro86
committed
add numbers and operations
1 parent 00c4b55 commit 9a62d4d

File tree

4 files changed

+254
-5
lines changed

4 files changed

+254
-5
lines changed

‎bjs/07_Number_and_string/index.html

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,77 @@
1515
<div class="form-group">
1616
<div class="card" id="calc">
1717
<div class="card-body">
18-
<input class="form-control input-window" id="inputWindow" value="">
18+
<input class="form-control input-window" id="inputWindow" value="" readonly>
1919
<div class="row no-gutters">
2020
<div class="col">
21-
<button class="btn btn-outline-danger form-control" id="btn_clr">C</button>
21+
<button class="btn btn-danger form-control" id="btn_clr">C</button>
22+
</div>
23+
</div>
24+
<div class="row no-gutters">
25+
<div class="col">
26+
<button class="btn btn-primary form-control" id="btn_1">1</button>
27+
</div>
28+
<div class="col">
29+
<button class="btn btn-primary form-control" id="btn_2">2</button>
30+
</div>
31+
<div class="col">
32+
<button class="btn btn-primary form-control" id="btn_3">3</button>
33+
</div>
34+
<div class="col">
35+
<button class="btn btn-primary form-control" id="btn_sum">+</button>
36+
</div>
37+
38+
39+
40+
</div>
41+
<div class="row no-gutters">
42+
<div class="col">
43+
<button class="btn btn-primary form-control" id="btn_4">4</button>
44+
</div>
45+
<div class="col">
46+
<button class="btn btn-primary form-control" id="btn_5">5</button>
47+
</div>
48+
<div class="col">
49+
<button class="btn btn-primary form-control" id="btn_6">6</button>
50+
</div>
51+
<div class="col">
52+
<button class="btn btn-primary form-control" id="btn_def">-</button>
53+
</div>
54+
</div>
55+
<div class="row no-gutters">
56+
<div class="col">
57+
<button class="btn btn-primary form-control" id="btn_7">7</button>
58+
</div>
59+
<div class="col">
60+
<button class="btn btn-primary form-control" id="btn_8">8</button>
61+
</div>
62+
<div class="col">
63+
<button class="btn btn-primary form-control" id="btn_9">9</button>
64+
</div>
65+
<div class="col">
66+
<button class="btn btn-primary form-control" id="btn_mult">*</button>
67+
</div>
68+
</div>
69+
<div class="row no-gutters">
70+
<div class="col">
71+
<button class="btn btn-primary form-control" id="btn_calc">=</button>
72+
</div>
73+
<div class="col">
74+
<button class="btn btn-primary form-control" id="btn_0">0</button>
75+
</div>
76+
<div class="col">
77+
<button class="btn btn-primary form-control" id="btn_sqrt">&sup2;&radic;</button>
78+
</div>
79+
<div class="col">
80+
<button class="btn btn-primary form-control" id="btn_dev">&divide;</button>
81+
</div>
82+
</div>
83+
<div class="row no-gutters">
84+
<div class="col">
85+
<button class="btn btn-primary form-control" id="btn_unar">&plusmn;</button>
86+
</div>
87+
<div class="col">
88+
<button class="btn btn-primary form-control" type="number" step="any" id="btn_point">.</button>
2289
</div>
2390
</div>
2491
</div>

‎bjs/07_Number_and_string/readme.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Создание простого калькулятора: сумма, разность, произведение, деление.
2+
3+
## Используемые технологии
4+
* HTML
5+
* CSS
6+
* JavaScript
7+
8+
## Как открыть/Запустить
9+
Зайти в папку Number and string в файловом менеджере, кликнуть 2 раза по файлу index.html

‎bjs/07_Number_and_string/script.js

Lines changed: 166 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,173 @@ let operation = null;
33

44
const inputWindow = document.getElementById('inputWindow');
55

6+
inputWindow.value = '0';
67

7-
document.getElementById('btn_clr').addEventListener('click', function () {
8-
lastOperand = 0;
9-
operation = null;
8+
9+
document.getElementById('btn_1').addEventListener('click', function () {
10+
if (inputWindow.value === '0') {
11+
inputWindow.value = '';
12+
}
13+
inputWindow.value += '1';
14+
})
15+
16+
document.getElementById('btn_2').addEventListener('click', function () {
17+
if (inputWindow.value === '0') {
18+
inputWindow.value = '';
19+
}
20+
inputWindow.value += '2';
21+
})
22+
23+
document.getElementById('btn_3').addEventListener('click', function () {
24+
if (inputWindow.value === '0') {
25+
inputWindow.value = '';
26+
}
27+
inputWindow.value += '3';
28+
})
29+
30+
document.getElementById('btn_4').addEventListener('click', function () {
31+
if (inputWindow.value === '0') {
32+
inputWindow.value = '';
33+
}
34+
inputWindow.value += '4';
35+
})
36+
37+
document.getElementById('btn_5').addEventListener('click', function () {
38+
if (inputWindow.value === '0') {
39+
inputWindow.value = '';
40+
}
41+
inputWindow.value += '5';
42+
})
43+
44+
document.getElementById('btn_6').addEventListener('click', function () {
45+
if (inputWindow.value === '0') {
46+
inputWindow.value = '';
47+
}
48+
inputWindow.value += '6';
49+
})
50+
51+
document.getElementById('btn_7').addEventListener('click', function () {
52+
if (inputWindow.value === '0') {
53+
inputWindow.value = '';
54+
}
55+
inputWindow.value += '7';
56+
})
57+
58+
document.getElementById('btn_8').addEventListener('click', function () {
59+
if (inputWindow.value === '0') {
60+
inputWindow.value = '';
61+
}
62+
inputWindow.value += '8';
63+
})
64+
65+
document.getElementById('btn_9').addEventListener('click', function () {
66+
if (inputWindow.value === '0') {
67+
inputWindow.value = '';
68+
}
69+
inputWindow.value += '9';
70+
})
71+
72+
document.getElementById('btn_0').addEventListener('click', function () {
73+
if (inputWindow.value === '0') {
74+
inputWindow.value = '';
75+
}
76+
inputWindow.value += '0';
77+
})
78+
79+
document.getElementById('btn_sum').addEventListener('click', function () {
80+
lastOperand = parseInt(inputWindow.value);
81+
operation = 'sum';
82+
inputWindow.value = '';
83+
})
84+
85+
document.getElementById('btn_def').addEventListener('click', function () {
86+
lastOperand = parseInt(inputWindow.value);
87+
operation = 'def';
88+
inputWindow.value = '';
89+
})
90+
91+
document.getElementById('btn_mult').addEventListener('click', function () {
92+
lastOperand = parseInt(inputWindow.value);
93+
operation = 'mult';
94+
inputWindow.value = '';
95+
})
96+
97+
document.getElementById('btn_dev').addEventListener('click', function () {
98+
lastOperand = parseInt(inputWindow.value);
99+
operation = 'dev';
100+
inputWindow.value = '';
101+
})
102+
document.getElementById('btn_sqrt').addEventListener('click', function () {
103+
lastOperand = parseInt(inputWindow.value);
104+
operation = 'sqrt';
105+
inputWindow.value = '';
106+
if (operation === 'sqrt') {
107+
const result = Math.sqrt(lastOperand);
108+
operation = null;
109+
lastOperand = 0;
110+
inputWindow.value = result;
111+
}
112+
})
113+
114+
document.getElementById('btn_unar').addEventListener('click', function () {
115+
lastOperand = parseInt(inputWindow.value);
116+
operation = 'unar';
117+
inputWindow.value = '';
118+
119+
if (operation === 'unar') {
120+
const result = -lastOperand;
121+
operation = null;
122+
lastOperand = 0;
123+
inputWindow.value = result;
124+
}
125+
})
126+
127+
document.getElementById('btn_point').addEventListener('click', function () {
128+
lastOperand = parseFloat(inputWindow.value);
129+
operation = 'point';
10130
inputWindow.value = '';
131+
132+
if (operation === 'point') {
133+
const result = +inputWindow.value + '.';
134+
operation = null;
135+
lastOperand = 0;
136+
inputWindow.value = result;
137+
}
138+
11139
})
12140

141+
document.getElementById('btn_calc').addEventListener('click', function () {
142+
if (operation === 'sum') {
143+
const result = lastOperand + parseInt(inputWindow.value);
144+
operation = null;
145+
lastOperand = 0;
146+
inputWindow.value = result;
147+
}
148+
149+
if (operation === 'def') {
150+
const result = lastOperand - parseFloat(inputWindow.value);
151+
operation = null;
152+
lastOperand = 0;
153+
inputWindow.value = result;
154+
}
155+
156+
if (operation === 'mult') {
157+
const result = lastOperand * parseInt(inputWindow.value);
158+
operation = null;
159+
lastOperand = 0;
160+
inputWindow.value = result;
161+
}
162+
163+
if (operation === 'dev') {
164+
const result = lastOperand / parseInt(inputWindow.value);
165+
operation = null;
166+
lastOperand = 0;
167+
inputWindow.value = result;
168+
}
169+
})
170+
171+
document.getElementById('btn_clr').addEventListener('click', function () {
172+
lastOperand = 0;
173+
operation = null;
174+
inputWindow.value = '0';
175+
})

‎bjs/07_Number_and_string/style.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,14 @@
66
.input-window {
77
text-align: end;
88
font-size: x-large;
9+
background-color: #fff;
910
}
11+
12+
.card-body {
13+
background-color: #000;
14+
}
15+
16+
.col {
17+
margin-bottom: 1px;
18+
margin-right: 1px;
19+
}

0 commit comments

Comments
 (0)