Skip to content

Commit 89653ee

Browse files
elfgoddelfgodd
committed
Section 15: Events on Multiple Elements
1 parent faa586a commit 89653ee

4 files changed

Lines changed: 95 additions & 1 deletion

File tree

‎15-Communicating-with-Events/05/app.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
#boxes {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
}
6+
7+
.box {
8+
width: 200px;
9+
height: 200px;
10+
}
11+
12+
h2 {
13+
text-align: center;
14+
}

‎15-Communicating-with-Events/05/app.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
// ******************************
2+
// Events on Multiple Elements ******************************
3+
// Example 1
4+
console.log('Events on Multiple Elements')
5+
console.log('\n')
6+
7+
const colors = [
8+
'red',
9+
'orange',
10+
'yellow',
11+
'green',
12+
'blue',
13+
'purple',
14+
'indigo',
15+
'violet',
16+
]
17+
18+
// Using functions
19+
20+
// const printColor = function (box) {
21+
// console.log('CLICKED A BOX')
22+
// console.log(box.style.backgroundColor)
23+
// }
24+
25+
// const container = document.querySelector('#boxes')
26+
27+
// for (let color of colors) {
28+
// const box = document.createElement('div')
29+
// box.style.backgroundColor = color
30+
// box.classList.add('box')
31+
// container.appendChild(box)
32+
// box.addEventListener('click', function() {
33+
// printColor(box)
34+
// })
35+
// }
36+
37+
// Using THIS keywordq
38+
const changeColor = function () {
39+
const h1 = document.querySelector('h1')
40+
h1.style.color = this.style.backgroundColor
41+
console.log(this)
42+
console.log(this.style.backgroundColor)
43+
}
44+
45+
const container = document.querySelector('#boxes')
46+
47+
for (let color of colors) {
48+
const box = document.createElement('div')
49+
box.style.backgroundColor = color
50+
box.classList.add('box')
51+
container.appendChild(box)
52+
box.addEventListener('click', changeColor)
53+
}
54+
55+
const h2 = document.querySelector('h2')
56+
h2.addEventListener('mouseover', function() {
57+
console.log(h2.innerText);
58+
})

‎15-Communicating-with-Events/05/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+
<link rel="stylesheet" href="app.css" />
8+
<title>JavaScript</title>
9+
</head>
10+
<body>
11+
<h1>Events on Multiple Elements</h1>
12+
<hr />
13+
<h2>Pick a Color (mouseover me)</h2>
14+
<section id="boxes">
15+
16+
</section>
17+
<script src="app.js"></script>
18+
</body>
19+
</html>

‎15-Communicating-with-Events/README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,4 +87,7 @@ You can do also do arrow functions, but there are situations where you wouldn't
8787
## 4. The Impossible Button Demo
8888

8989
How do we get access to the size of the screen?
90-
`window.screen`
90+
`window.screen`
91+
92+
## 5. Events on Multiple Elements
93+

0 commit comments

Comments
 (0)