Skip to content

Commit 29c05f4

Browse files
GdoubleAGdoubleA
committed
new adds
1 parent 00c4b55 commit 29c05f4

File tree

6 files changed

+274
-15
lines changed

6 files changed

+274
-15
lines changed

‎bjs/07_Number_and_string/img/1654676079_3-celes-club-p-formuli-oboi-krasivie-3.jpg

329 KB
Loading

‎bjs/07_Number_and_string/index.html

Lines changed: 79 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,96 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>Калькулятор</title>
67
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
7-
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
8+
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
89
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
9-
<link rel="stylesheet" href="style.css" type="text/css"/>
10+
<link rel="stylesheet" href="style.css" type="text/css" />
1011
</head>
12+
1113
<body>
12-
<div class="container">
13-
<div class="row calc-row align-items-center">
14-
<div class="col col-md-4 offset-md-4">
15-
<div class="form-group">
16-
<div class="card" id="calc">
17-
<div class="card-body">
18-
<input class="form-control input-window" id="inputWindow" value="">
19-
<div class="row no-gutters">
20-
<div class="col">
21-
<button class="btn btn-outline-danger form-control" id="btn_clr">C</button>
14+
<div class="container">
15+
<div class="row calc-row align-items-center">
16+
<div class="col col-md-4 offset-md-4">
17+
<div class="form-group">
18+
<div class="card" id="calc">
19+
<div class="card-body">
20+
<input class="form-control input-window" id="inputWindow" value="">
21+
<div class="row no-gutters">
22+
<div class="col">
23+
<button class="btn btn-outline-danger form-control" id="btn_clr">C</button>
24+
</div>
25+
</div>
26+
27+
<div class="row no-gutters">
28+
<div class="col">
29+
<button class="btn btn-outline-primary form-control" id="btn_1">1</button>
30+
</div>
31+
<div class="col">
32+
<button class="btn btn-outline-primary form-control" id="btn_2">2</button>
33+
</div>
34+
<div class="col">
35+
<button class="btn btn-outline-primary form-control" id="btn_3">3</button>
36+
</div>
37+
<div class="col">
38+
<button class="btn btn-outline-primary form-control" id="btn_sum">+</button>
39+
</div>
40+
</div>
41+
42+
<div class="row no-gutters">
43+
<div class="col">
44+
<button class="btn btn-outline-primary form-control" id="btn_4">4</button>
45+
</div>
46+
<div class="col">
47+
<button class="btn btn-outline-primary form-control" id="btn_5">5</button>
48+
</div>
49+
<div class="col">
50+
<button class="btn btn-outline-primary form-control" id="btn_6">6</button>
51+
</div>
52+
<div class="col">
53+
<button class="btn btn-outline-primary form-control" id="btn_def">-</button>
54+
</div>
55+
</div>
56+
57+
<div class="row no-gutters">
58+
<div class="col">
59+
<button class="btn btn-outline-primary form-control" id="btn_7">7</button>
60+
</div>
61+
<div class="col">
62+
<button class="btn btn-outline-primary form-control" id="btn_8">8</button>
63+
</div>
64+
<div class="col">
65+
<button class="btn btn-outline-primary form-control" id="btn_9">9</button>
66+
</div>
67+
<div class="col">
68+
<button class="btn btn-outline-primary form-control" id="btn_mult">*</button>
69+
</div>
70+
</div>
71+
72+
<div class="row no-gutters">
73+
<div class="col">
74+
<button class="btn btn-outline-primary form-control" id="btn_calc">=</button>
75+
</div>
76+
<div class="col">
77+
<button class="btn btn-outline-primary form-control" id="btn_0">0</button>
78+
</div>
79+
<div class="col">
80+
<button class="btn btn-outline-primary form-control" id="btn_root">✓</button>
81+
</div>
82+
<div class="col">
83+
<button class="btn btn-outline-primary form-control" id="btn_div">/</button>
84+
</div>
85+
2286
</div>
2387
</div>
2488
</div>
2589
</div>
2690
</div>
2791
</div>
2892
</div>
29-
</div>
30-
<script src="script.js"></script>
93+
<script src="script.js"></script>
3194
</body>
32-
</html>
95+
96+
</html>

‎bjs/07_Number_and_string/script.js

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

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

6+
// ЧИСЛА
7+
document.getElementById('btn_1').addEventListener('click', function () {
8+
inputWindow.value += '1';
9+
})
10+
11+
document.getElementById('btn_2').addEventListener('click', function () {
12+
inputWindow.value += '2';
13+
})
14+
15+
document.getElementById('btn_3').addEventListener('click', function () {
16+
inputWindow.value += '3';
17+
})
18+
19+
document.getElementById('btn_4').addEventListener('click', function () {
20+
inputWindow.value += '4';
21+
})
22+
23+
document.getElementById('btn_5').addEventListener('click', function () {
24+
inputWindow.value += '5';
25+
})
26+
27+
document.getElementById('btn_6').addEventListener('click', function () {
28+
inputWindow.value += '6';
29+
})
30+
31+
document.getElementById('btn_7').addEventListener('click', function () {
32+
inputWindow.value += '7';
33+
})
34+
35+
document.getElementById('btn_8').addEventListener('click', function () {
36+
inputWindow.value += '8';
37+
})
638

39+
document.getElementById('btn_9').addEventListener('click', function () {
40+
inputWindow.value += '9';
41+
})
42+
43+
document.getElementById('btn_0').addEventListener('click', function () {
44+
inputWindow.value += '0';
45+
})
46+
47+
48+
// ОПЕРАЦИИ
49+
50+
// сложение
51+
document.getElementById('btn_sum').addEventListener('click', function () {
52+
lastOperand = parseInt(inputWindow.value);
53+
operation = 'sum';
54+
inputWindow.value = '';
55+
})
56+
// вычитание
57+
document.getElementById('btn_def').addEventListener('click', function () {
58+
lastOperand = parseInt(inputWindow.value);
59+
operation = 'def';
60+
inputWindow.value = '';
61+
})
62+
// умножение
63+
document.getElementById('btn_mult').addEventListener('click', function () {
64+
lastOperand = parseInt(inputWindow.value);
65+
operation = 'mult';
66+
inputWindow.value = '';
67+
})
68+
// деление
69+
document.getElementById('btn_div').addEventListener('click', function () {
70+
lastOperand = parseInt(inputWindow.value);
71+
operation = 'div';
72+
inputWindow.value = '';
73+
})
74+
// равно
75+
document.getElementById('btn_calc').addEventListener('click', function () {
76+
if (operation === 'sum'){
77+
const result = lastOperand + parseInt(inputWindow.value);
78+
operation = null;
79+
lastOperand = 0;
80+
inputWindow.value = result;
81+
}
82+
if (operation === 'def'){
83+
const result = lastOperand - parseInt(inputWindow.value);
84+
operation = null;
85+
lastOperand = 0;
86+
inputWindow.value = result;
87+
}
88+
if (operation === 'mult'){
89+
const result = lastOperand * parseInt(inputWindow.value);
90+
operation = null;
91+
lastOperand = 0;
92+
inputWindow.value = result;
93+
}
94+
if (operation === 'div'){
95+
const result = lastOperand / parseInt(inputWindow.value);
96+
operation = null;
97+
lastOperand = 0;
98+
inputWindow.value = result;
99+
}
100+
})
101+
// очистить
7102
document.getElementById('btn_clr').addEventListener('click', function () {
8103
lastOperand = 0;
9104
operation = null;
10105
inputWindow.value = '';
11106
})
12107

108+

‎bjs/07_Number_and_string/style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
body {
2+
background-image: url(img/1654676079_3-celes-club-p-formuli-oboi-krasivie-3.jpg);
3+
background-size: cover;
4+
}
5+
16
.calc-row {
27
height: 100vh;
38
font-family: 'Share Tech Mono', monospace;
@@ -6,4 +11,39 @@
611
.input-window {
712
text-align: end;
813
font-size: x-large;
14+
background-color: rgb(32, 32, 32);
15+
color: rgb(154, 227, 44);
16+
text-shadow: 0 0 5px rgb(119, 189, 15);
17+
}
18+
19+
.card-body {
20+
background-color: rgb(49, 48, 48);
21+
border:inset 5px rgb(255, 255, 255);
22+
border-radius: 10%;
23+
}
24+
25+
.card {
26+
border-style: none;
27+
background: none;
28+
}
29+
30+
.btn {
31+
border: outset;
32+
background-color: #353637;
33+
color: aliceblue;
34+
35+
}
36+
37+
#btn_clr {
38+
border-radius: 0;
39+
background-color: #A3A5AA;
40+
color: black;
41+
font-weight: bold;
942
}
43+
44+
#btn_sum, #btn_def, #btn_mult, #btn_div, #btn_calc, #btn_root {
45+
background-color: #F99003;
46+
47+
}
48+
49+

‎index.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
\<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<nav>
12+
<ul>
13+
<li><a href="bjs/07_Number_and_string/index.html">Calculator</a></li>
14+
<li><a href="bjs/08_if_else/index.html">if else</a></li>
15+
<li><a href="bjs/10_function_object/index.html">function</a></li>
16+
</ul>
17+
</nav>
18+
</body>
19+
</html>

‎style.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
text-decoration: none;
6+
list-style: none;
7+
}
8+
9+
body {
10+
background-color: rgb(89, 17, 17);
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
height: 75vh;
15+
}
16+
17+
ul {
18+
19+
font-size: 40px;
20+
21+
}
22+
23+
li {
24+
padding: 15px;
25+
margin-top: 15px;
26+
}
27+
28+
a {
29+
padding: 7px;
30+
color: beige;
31+
border: outset;
32+
}
33+
34+
a:hover {
35+
color: rgb(89, 17, 17);
36+
background-color: aliceblue;
37+
border-color: aliceblue;
38+
39+
}
40+

0 commit comments

Comments
 (0)