Skip to content

Commit e896339

Browse files
Balashov NikitaOlegLustenko
Balashov Nikita
authored and
OlegLustenko
committed
classwork-18
1 parent 0244a6f commit e896339

File tree

2 files changed

+174
-0
lines changed

2 files changed

+174
-0
lines changed

‎js-core/classworks/classwork-18/index.html‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Class work 18</title>
7+
<style>
8+
body {
9+
10+
}
11+
td{
12+
border: 2px solid black;
13+
width: 50px;
14+
height: 50px;
15+
}
16+
.active{
17+
background-color: brown;
18+
}
19+
.block3{
20+
width: 300px;
21+
height: 300px;
22+
background-color:black;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
29+
<div class="block3"></div>
30+
31+
<table>
32+
<tr>
33+
<td></td>
34+
<td></td>
35+
<td></td>
36+
<td></td>
37+
<td></td>
38+
<td></td>
39+
<td></td>
40+
<td></td>
41+
<td></td>
42+
<td></td>
43+
</tr>
44+
<tr>
45+
<td></td>
46+
<td></td>
47+
<td></td>
48+
<td></td>
49+
<td></td>
50+
<td></td>
51+
<td></td>
52+
<td></td>
53+
<td></td>
54+
<td></td>
55+
</tr>
56+
<tr>
57+
<td></td>
58+
<td></td>
59+
<td></td>
60+
<td></td>
61+
<td></td>
62+
<td></td>
63+
<td></td>
64+
<td></td>
65+
<td></td>
66+
<td></td>
67+
</tr>
68+
<tr>
69+
<td></td>
70+
<td></td>
71+
<td></td>
72+
<td></td>
73+
<td></td>
74+
<td></td>
75+
<td></td>
76+
<td></td>
77+
<td></td>
78+
<td></td>
79+
</tr>
80+
<tr>
81+
<td></td>
82+
<td></td>
83+
<td></td>
84+
<td></td>
85+
<td></td>
86+
<td></td>
87+
<td></td>
88+
<td></td>
89+
<td></td>
90+
<td></td>
91+
</tr>
92+
<tr>
93+
<td></td>
94+
<td></td>
95+
<td></td>
96+
<td></td>
97+
<td></td>
98+
<td></td>
99+
<td></td>
100+
<td></td>
101+
<td></td>
102+
<td></td>
103+
</tr>
104+
<tr>
105+
<td></td>
106+
<td></td>
107+
<td></td>
108+
<td></td>
109+
<td></td>
110+
<td></td>
111+
<td></td>
112+
<td></td>
113+
<td></td>
114+
<td></td>
115+
</tr>
116+
</table>
117+
118+
<script src="src/main.js"></script>
119+
120+
</body>
121+
122+
</html>

‎js-core/classworks/classwork-18/src/main.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const query = (selector) => document.querySelector(selector);
2+
3+
// const block1 = query(`.block1`);
4+
// const block2 = query(`.block2`);
5+
// const block3 = query(`.block3`);
6+
7+
// block1.addEventListener('click', (e) => {
8+
// if(e.target.classList.contains('block1')) {
9+
// console.log(`I'M BLOCK 1`)
10+
// }
11+
// if(e.target.classList.contains('block2')) {
12+
// console.log(`I'M BLOCK 2`)
13+
// }
14+
// if(e.target.classList.contains('block3')) {
15+
// console.log(`I'M BLOCK 3`)
16+
// }
17+
// }, true)
18+
19+
// block1.addEventListener('click', (e) => {
20+
// console.log(`I'M Block 1`)
21+
// })
22+
23+
// block1.addEventListener('click', (e) => {
24+
// console.log(`I'M Block 2`)
25+
// })
26+
27+
// block1.addEventListener('click', (e) => {
28+
// console.log(`I'M Block 3`)
29+
// })
30+
31+
const table = query('table')
32+
33+
table.addEventListener('click', (e) => {
34+
if(e.target.tagName === 'TD') {
35+
e.stopPropagation()
36+
e.target.classList.toggle('active');
37+
}
38+
})
39+
40+
const block3 = query('.block3');
41+
42+
let counter = 0;
43+
44+
const clickHendler = e => {
45+
counter++;
46+
if(counter === 3) {
47+
block3.removeEventListener('click', clickHendler)
48+
}
49+
console.log(counter)
50+
}
51+
52+
block3.addEventListener('click', clickHendler);

0 commit comments

Comments
 (0)