Skip to content

Commit b4c64a6

Browse files
erikwallaceerikwallace
committed
Changes for module 4 videos on working with HTML and CSS in the DOM.
1 parent f31289d commit b4c64a6

File tree

2 files changed

+136
-54
lines changed

2 files changed

+136
-54
lines changed

‎exercises/20 - The DOM/index.html‎

Lines changed: 60 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,63 @@
11
<!DOCTYPE html>
22
<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>The DOM</title>
8-
<link rel="stylesheet" href="../../base.css">
9-
10-
</head>
11-
12-
<body>
13-
<p class="wes">I am Wes, I <em>love</em> to bbq and <strong>Make websites!</strong></p>
14-
<img class="nice cool" src="https://picsum.photos/500" />
15-
16-
<div class="items">
17-
<div class="item">
18-
<img class="custom" data-last="bos" data-name="wes" src="https://picsum.photos/200" />
19-
<img data-name="kait" src="https://picsum.photos/200" />
20-
<img data-name="lux" src="https://picsum.photos/200" />
21-
22-
<p>Hi I'm a item</p>
23-
</div>
24-
<div class="item item2">
25-
<img src="https://picsum.photos/200" />
26-
<h2>
27-
I am a heading
28-
<span>I am hidden!</span>
29-
</h2>
30-
<p>Hi I'm a item</p>
31-
</div>
32-
<article class="item">
33-
<h2>Im an article</h2>
34-
<p class="pizza">This is how many pizzas I ate! 🍕</p>
35-
</article>
36-
</div>
37-
38-
<style>
39-
h2 span {
40-
display: none;
41-
}
42-
43-
img {
44-
transition: all 0.2s;
45-
}
46-
47-
.round {
48-
border-radius: 50%;
49-
transform: rotate(1turn) scale(2);
50-
box-shadow: 0 0 10px black;
51-
}
52-
</style>
53-
54-
<script src="./traversing.js"></script>
55-
</body>
56-
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
6+
<title>The DOM</title>
7+
<link rel="stylesheet" href="../../base.css" />
8+
</head>
9+
10+
<body>
11+
<p class="wes">I am Wes, I <em>love</em> to bbq and <strong>Make websites!</strong></p>
12+
<img class="nice cool" src="https://picsum.photos/500" />
13+
14+
<div class="items">
15+
<div class="item">
16+
<img
17+
class="custom"
18+
data-last="bos"
19+
data-name="wes"
20+
src="https://picsum.photos/200"
21+
/>
22+
<img data-name="kait" src="https://picsum.photos/200" />
23+
<img data-name="lux" src="https://picsum.photos/200" />
24+
25+
<p>Hi I'm a item</p>
26+
</div>
27+
<div class="item item2">
28+
<img src="https://picsum.photos/200" />
29+
<h2>
30+
I am a heading
31+
<span>I am hidden!</span>
32+
</h2>
33+
<p>Hi I'm a item</p>
34+
</div>
35+
<article class="item">
36+
<h2>Im an article</h2>
37+
<p class="pizza">This is how many pizzas I ate! 🍕</p>
38+
</article>
39+
</div>
40+
41+
<style>
42+
h2 span {
43+
display: none;
44+
}
45+
46+
img {
47+
transition: all 0.2s;
48+
}
49+
50+
img:hover {
51+
cursor: pointer;
52+
}
53+
54+
.round {
55+
border-radius: 50%;
56+
transform: rotate(1turn);
57+
box-shadow: 0 0 10px black;
58+
}
59+
</style>
60+
61+
<script src="./the-dom.js"></script>
62+
</body>
5763
</html>

‎exercises/20 - The DOM/the-dom.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/*
2+
* The DOM
3+
*
4+
* window - has browser information like viewport width
5+
*
6+
* document - has info about everything between html tags
7+
*
8+
* navigator - has info about the device: battery level, gps coordinates
9+
*
10+
* Use querySelector for classes and elements - it replaces getElementsByClassName...
11+
* Use getElementById for #
12+
*/
13+
14+
const p = document.querySelector('p');
15+
const imgs = document.querySelectorAll('.item img');
16+
const item2 = document.querySelector('.item2');
17+
const item2Image = item2.querySelector('img'); // look inside of .item2
18+
const heading = document.querySelector('h2');
19+
20+
console.log(heading.textContent);
21+
console.log(heading.innerText);
22+
23+
// set the textContent property of heading
24+
// heading.textContent = 'Josie is adorable';
25+
// console.log(heading.textContent);
26+
console.log(heading.innerHTML);
27+
console.log(heading.outerHTML);
28+
29+
// Append pizza emoji
30+
const pizzaList = document.querySelector('.pizza');
31+
// pizzaList.textContent = `${pizzaList.textContent} 🍕`;
32+
33+
// This is faster than textContent
34+
pizzaList.insertAdjacentText('beforeend', '🍕');
35+
36+
const pic = document.querySelector('.nice');
37+
pic.classList.add('open');
38+
pic.classList.remove('cool');
39+
pic.classList.add('round');
40+
console.log(pic.classList);
41+
42+
// Add the class .round on click
43+
// classList gives you some nice utilities over addClass
44+
function toggleRound() {
45+
pic.classList.toggle('round');
46+
}
47+
48+
// Listen for a click then fire the function
49+
pic.addEventListener('click', toggleRound);
50+
51+
/*
52+
* GET and SET attributes (don't do this)
53+
*/
54+
// SET image attributes
55+
// Add alt text to an image
56+
pic.setAttribute('alt', 'Adorable puppy');
57+
pic.setAttribute('width', 500);
58+
59+
// GET pic attribute values
60+
console.log(pic.getAttribute('alt'));
61+
62+
// Get the width of the image after it loads
63+
// get works with naturalWidth, you can't set it though
64+
pic.addEventListener('load', function() {
65+
console.log(pic.naturalWidth); // width of actual pixels - run after image downloads
66+
});
67+
68+
/*
69+
* GET and SET data-attributes (reccomended)
70+
*/
71+
const custom = document.querySelector('.custom');
72+
console.log(custom.dataset);
73+
74+
custom.addEventListener('click', function() {
75+
alert(`Welcome ${custom.dataset.name} ${custom.dataset.last}`);
76+
});

0 commit comments

Comments
 (0)