Skip to content

Commit a92d4c8

Browse files
paulmcfepaulmcfe
committed
Edits and additions to book 4, chapter 6
1 parent 4df3bcc commit a92d4c8

18 files changed

+334
-100
lines changed

‎bk04ch06/example02.html

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
54
<title>So Many Kale Recipes</title>
65
</head>
76
<body>
@@ -13,11 +12,5 @@ <h1>Above and Beyond the Kale of Duty</h1>
1312
Do you love to cook with <a href="kale.html">kale</a>?
1413
</p>
1514
</main>
16-
<script>
17-
const bodyLinks = document.querySelectorAll('a');
18-
bodyLinks.forEach(kid => {
19-
console.log(kid);
20-
})
21-
</script>
2215
</body>
2316
</html>

‎bk04ch06/example02a.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>So Many Kale Recipes</title>
6+
</head>
7+
<body>
8+
<header id="page-banner">
9+
<h1>Above and Beyond the Kale of Duty</h1>
10+
</header>
11+
<main id="page-content">
12+
<p>
13+
Do you love to cook with <a href="kale.html">kale</a>?
14+
</p>
15+
</main>
16+
<script>
17+
const bodyLinks = document.querySelectorAll('a');
18+
bodyLinks.forEach(kid => {
19+
console.log(kid);
20+
})
21+
</script>
22+
</body>
23+
</html>

‎bk04ch06/example03.html

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,21 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Adding a class to an element</title>
4+
<title>So Many Kale Recipes</title>
65
</head>
7-
<style>
8-
.my-class {
9-
display: flex;
10-
justify-content: center;
11-
align-items: center;
12-
border: 6px dotted black;
13-
font-family: Verdana, serif;
14-
font-size: 2rem;
15-
background-color: lightgray;
16-
}
17-
</style>
186
<body>
19-
<div id="my-div">
20-
Hello World!
21-
</div>
7+
<header id="page-banner">
8+
<h1>Above and Beyond the Kale of Duty</h1>
9+
</header>
10+
<main id="page-content">
11+
<p>
12+
Do you love to cook with <a href="kale.html">kale</a>?
13+
</p>
14+
</main>
2215
<script>
23-
document.getElementById('my-div').classList.add('my-class');
16+
const content = document.getElementById("page-content");
17+
const firstContentChildNode = content.firstChild;
18+
console.log(firstContentChildNode);
2419
</script>
2520
</body>
2621
</html>

‎bk04ch06/example04.html

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Tweaking HTML Attributes with JavaScript</title>
4+
<title>So Many Kale Recipes</title>
65
</head>
76
<body>
8-
<header>
9-
<img id="header-image"
10-
src="mangosteen.png"
11-
alt="Drawing of a mangosteen">
7+
<header id="page-banner">
8+
<h1>Above and Beyond the Kale of Duty</h1>
129
</header>
10+
<main id="page-content">
11+
<p>
12+
Do you love to cook with <a href="kale.html">kale</a>?
13+
</p>
14+
</main>
1315
<script>
14-
const headerImage = document.getElementById('header-image');
15-
console.log(headerImage.id);
16-
console.log(headerImage.src);
17-
console.log(headerImage.alt);
16+
const content = document.getElementById("page-content");
17+
const firstContentChildElement = content.firstElementChild;
18+
console.log(firstContentChildElement);
1819
</script>
1920
</body>
2021
</html>

‎bk04ch06/example05.html

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Setting up an event handler</title>
4+
<title>So Many Kale Recipes</title>
65
</head>
76
<body>
8-
<div id="my-div"></div>
9-
<button id="my-button">Click to add some text, above</button>
7+
<header id="page-banner">
8+
<h1>Above and Beyond the Kale of Duty</h1>
9+
</header>
10+
<main id="page-content">
11+
<p>
12+
Do you love to cook with <a href="kale.html">kale</a>?
13+
</p>
14+
</main>
1015
<script>
11-
const myButton = document.getElementById('my-button');
12-
myButton.addEventListener('click', function() {
13-
const myDiv = document.getElementById('my-div');
14-
myDiv.innerHTML = '<h1>Hello Click World!</h1>';
15-
});
16+
const para = document.querySelector("main > p");
17+
const lastParaChildNode = para.lastChild;
18+
console.log(lastParaChildNode);
1619
</script>
1720
</body>
1821
</html>

‎bk04ch06/example06.html

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,21 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Running code after the web page document is fully loaded</title>
6-
<script>
7-
document.addEventListener('DOMContentLoaded', function() {
8-
console.log('We are loaded!');
9-
});
10-
</script>
4+
<title>So Many Kale Recipes</title>
115
</head>
126
<body>
7+
<header id="page-banner">
8+
<h1>Above and Beyond the Kale of Duty</h1>
9+
</header>
10+
<main id="page-content">
11+
<p>
12+
Do you love to cook with <a href="kale.html">kale</a>?
13+
</p>
14+
</main>
15+
<script>
16+
const para = document.querySelector("main > p");
17+
const lastParaChildElement = para.lastElementChild;
18+
console.log(lastParaChildElement);
19+
</script>
1320
</body>
1421
</html>

‎bk04ch06/example07.html

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,21 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Getting data about the event</title>
6-
<style>
7-
body {
8-
margin: 1em;
9-
font-size: 1.5em;
10-
}
11-
div {
12-
margin-top: .5em;
13-
}
14-
</style>
4+
<title>So Many Kale Recipes</title>
155
</head>
166
<body>
17-
<div>
18-
Type a key:
19-
</div>
20-
<input id="key-input" type="text">
21-
<div>
22-
Here's the code of the key you pressed:
23-
</div>
24-
<div id="key-output">
25-
</div>
7+
<header id="page-banner">
8+
<h1>Above and Beyond the Kale of Duty</h1>
9+
</header>
10+
<main id="page-content">
11+
<p>
12+
Do you love to cook with <a href="kale.html">kale</a>?
13+
</p>
14+
</main>
2615
<script>
27-
const keyInput = document.getElementById('key-input');
28-
keyInput.addEventListener('keypress', function(e) {
29-
const keyOutput = document.getElementById('key-output');
30-
keyOutput.innerHTML = e.which;
31-
});
16+
const childElement = document.querySelector("h1");
17+
const parentElement = childElement.parentNode;
18+
console.log(parentElement);
3219
</script>
3320
</body>
3421
</html>

‎bk04ch06/example08.html

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,21 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<title>Preventing the default event action</title>
6-
<style>
7-
body {
8-
margin: 1em;
9-
font-size: 1.5em;
10-
}
11-
div {
12-
margin-top: .5em;
13-
}
14-
</style>
4+
<title>So Many Kale Recipes</title>
155
</head>
166
<body>
17-
<a href="https://wiley.com/">Wiley</a><br>
18-
<a href="https://262.ecma-international.org/6.0/">ECMAScript 2015 Spec</a><br>
19-
<a href="https://webdev.mcfedries.com/tools/workbench/">WebDev Workbench</a>
20-
<div id="output">
21-
Link URL:
22-
<div>
7+
<header id="page-banner">
8+
<h1>Above and Beyond the Kale of Duty</h1>
9+
</header>
10+
<main id="page-content">
11+
<p>
12+
Do you love to cook with <a href="kale.html">kale</a>?
13+
</p>
14+
</main>
2315
<script>
24-
const links = document.getElementsByTagName('a')
25-
for (const link of links) {
26-
link.addEventListener('click', function(e) {
27-
e.preventDefault();
28-
strURL = e.target.href;
29-
document.getElementById('output').innerHTML = 'Link URL: ' + strURL;
30-
})
31-
}
16+
const currElement = document.querySelector("main");
17+
const prevSib = currElement.previousElementSibling;
18+
console.log(prevSib);
3219
</script>
3320
</body>
3421
</html>

‎bk04ch06/example09.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>So Many Kale Recipes</title>
5+
</head>
6+
<body>
7+
<header id="page-banner">
8+
<h1>Above and Beyond the Kale of Duty</h1>
9+
</header>
10+
<main id="page-content">
11+
<p>
12+
Do you love to cook with <a href="kale.html">kale</a>?
13+
</p>
14+
</main>
15+
<script>
16+
const currElement = document.querySelector("header");
17+
const nextSib = currElement.nextElementSibling;
18+
console.log(nextSib);
19+
</script>
20+
</body>
21+
</html>

‎bk04ch06/example10.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>So Many Kale Recipes</title>
5+
</head>
6+
<body>
7+
<header id="page-banner">
8+
<h1>Above and Beyond the Kale of Duty</h1>
9+
</header>
10+
<main id="page-content">
11+
<p>
12+
Do you love to cook with <a href="kale.html">kale</a>?
13+
</p>
14+
</main>
15+
<script>
16+
const newArticle = document.createElement("article");
17+
document.querySelector("main").append(newArticle);
18+
newArticle.innerHTML = "<h2>Article</h2>";
19+
20+
const newNav = document.createElement("nav");
21+
document.querySelector("main").prepend(newNav);
22+
newNav.innerHTML = "<h2>Navigation</h2>";
23+
</script>
24+
</body>
25+
</html>

0 commit comments

Comments
 (0)