Skip to content

Commit 60a5d0e

Browse files
paulmcfepaulmcfe
committed
Final edits to book 4, chapter 3
1 parent bb69a8e commit 60a5d0e

32 files changed

+375
-51
lines changed

‎bk03ch07/example05.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</head>
99
<body>
1010
<p>
11-
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency. It’s other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time. <br>—Robert Bringhurst, <i>The Elements of Typography</i>
11+
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency. Its other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time. <br>—Robert Bringhurst, <i>The Elements of Typography</i>
1212
</p>
1313
</body>
1414
</html>

‎bk03ch07/example05a.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</head>
1212
<body>
1313
<p>
14-
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency. It’s other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time. <br>—Robert Bringhurst, <i>The Elements of Typography</i>
14+
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency. Its other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time. <br>—Robert Bringhurst, <i>The Elements of Typography</i>
1515
</p>
1616
</body>
1717
</html>

‎bk03ch07/example06.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
</head>
1313
<body>
1414
<p>
15-
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency. It’s other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time. <br>—Robert Bringhurst, <i>The Elements of Typography</i>
15+
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency. Its other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time. <br>—Robert Bringhurst, <i>The Elements of Typography</i>
1616
</p>
1717
</body>
1818
</html>

‎bk03ch07/example09.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</head>
1414
<body>
1515
<p>
16-
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency. It’s other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time. <br>—Robert Bringhurst, <i>The Elements of Typography</i>
16+
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency. Its other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time. <br>—Robert Bringhurst, <i>The Elements of Typography</i>
1717
</p>
1818
</body>
1919
</html>

‎bk03ch07/example11.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</head>
1515
<body>
1616
<p>
17-
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency. It’s other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time. <br>—Robert Bringhurst, <i>The Elements of Typography</i>
17+
In a world rife with unsolicited messages, typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with anything to say therefore aspires to a kind of statuesque transparency. Its other traditional goal is durability: not immunity to change, but a clear superiority to fashion. Typography at its best is a visual form of language linking timelessness and time. <br>—Robert Bringhurst, <i>The Elements of Typography</i>
1818
</p>
1919
</body>
2020
</html>

‎bk03ch08/example06.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
border: 1px solid hsl(0, 0%, 30%);
2020
font-size: 1.25rem;
2121
line-height: 1.25;
22-
overflow-wrap: break-word;
22+
/* overflow-wrap: break-word; */
2323
padding: 3px;
2424
width: 175px;
2525
}

‎bk03ch08/example17.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
}
2525
@supports (initial-letter: 2) {
2626
h2 + p::first-letter {
27-
initial-letter: 3 2;
27+
initial-letter: 5;
2828
}
2929
}
3030
</style>

‎bk04ch03/example01.html

+7-8
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,14 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Building String Expressions</title>
6-
<script>
7-
const preTipTotal = 10.00;
8-
const tipAmount = preTipTotal * 0.15;
9-
const message1 = "Your tip is ";
10-
const message2 = "<br>Your total bill is ";
11-
document.write(message1 + tipAmount + message2 + preTipTotal + tipAmount);
12-
</script>
5+
<title>Using the addition (+) operator</title>
136
</head>
147
<body>
8+
<script>
9+
const widthContent = 800;
10+
const widthSidebar = 200;
11+
const widthMax = widthContent + widthSidebar + 100;
12+
document.write("The maximum app width is " + widthMax + "px.");
13+
</script>
1514
</body>
1615
</html>

‎bk04ch03/example02.html

+6-9
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Building String Expressions</title>
6-
<script>
7-
const preTipTotal = 10.00;
8-
const tipAmount = preTipTotal * 0.15;
9-
const totalBill = preTipTotal + tipAmount;
10-
const message1 = "Your tip is ";
11-
const message2 = "<br>Your total bill is ";
12-
document.write(message1 + tipAmount + message2 + totalBill);
13-
</script>
5+
<title>Using the increment (++) operator</title>
146
</head>
157
<body>
8+
<script>
9+
let someVariable = 0;
10+
someVariable++;
11+
document.write("The value of <code>someVariable</code> is now " + someVariable);
12+
</script>
1613
</body>
1714
</html>

‎bk04ch03/example03.html

+7-13
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,14 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Advanced notes on the && and || operators</title>
6-
<script>
7-
const v1 = true;
8-
const v2 = 10;
9-
const v3 = "testing";
10-
const v4 = false;
11-
const v5 = 0;
12-
const v6 = "";
13-
const leftOperand = eval(prompt("Enter the left operand (a value or expression):", true));
14-
const rightOperand = eval(prompt("Enter the right operand (a value or expression):", true));
15-
const result = leftOperand && rightOperand;
16-
document.write(result);
17-
</script>
5+
<title>Using the increment (++) operator</title>
186
</head>
197
<body>
8+
<script>
9+
const targetYear = 2025;
10+
const birthYear = 1985;
11+
const yearsDifference = targetYear - birthYear;
12+
document.write("The number of years between " + birthYear + " and " + targetYear + " is " + yearsDifference);
13+
</script>
2014
</body>
2115
</html>

‎bk04ch03/example04.html

+6-7
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Controlling the order of precedence</title>
6-
<script>
7-
const totalPrice = 11.00;
8-
const taxRate = .1;
9-
const retailPrice = totalPrice / 1 + taxRate;
10-
document.write("The pre-tax price is " + retailPrice);
11-
</script>
5+
<title>Using the decrement (--) operator</title>
126
</head>
137
<body>
8+
<script>
9+
let thisVariable = 1;
10+
thisVariable--;
11+
document.write("The value of <code>thisVariable</code> is now " + thisVariable);
12+
</script>
1413
</body>
1514
</html>

‎bk04ch03/example05.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<title>Controlling the order of precedence</title>
6-
<script>
7-
const totalPrice = 11.00;
8-
const taxRate = .1;
9-
const retailPrice = totalPrice / (1 + taxRate);
10-
document.write("The pre-tax price is " + retailPrice);
11-
</script>
5+
<title>Using the multiplication (*) operator</title>
126
</head>
137
<body>
8+
<script>
9+
const columns = 8;
10+
const columnWidth = 100;
11+
const totalWidth = columns * columnWidth;
12+
document.write("The total layout width is " + totalWidth + "px.");
13+
</script>
1414
</body>
1515
</html>

‎bk04ch03/example06.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Using the division (/) operator</title>
6+
</head>
7+
<body>
8+
<script>
9+
const contentWidth = 600;
10+
const windowWidth = 1200;
11+
const contentRatio = contentWidth / windowWidth;
12+
document.write("The ratio of content width to window width is " + contentRatio);
13+
</script>
14+
</body>
15+
</html>

‎bk04ch03/example07.html

+19
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+
<title>Using the modulus (%) operator</title>
6+
</head>
7+
<body>
8+
<script>
9+
const myDividend = 16;
10+
const myDivisor = 5;
11+
const myRemainder = myDividend % myDivisor;
12+
document.write("The remainder when you divide " + myDividend + " by " + myDivisor + " is " + myRemainder);
13+
14+
const originalColor = 300;
15+
const complementaryColor = (originalColor + 180) % 360;
16+
document.write("<p>The complementary color of " + originalColor + " is " + complementaryColor);
17+
</script>
18+
</body>
19+
</html>

‎bk04ch03/example08.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Using the arithmetic assignment (+= and -=) operators</title>
6+
</head>
7+
<body>
8+
<script>
9+
let totalInterestPaid = 5000;
10+
const monthlyInterestPaid = 500;
11+
totalInterestPaid += monthlyInterestPaid
12+
document.write("The total interest paid is " + totalInterestPaid);
13+
14+
let principleOwing = 50000;
15+
const monthlyPrincipalPaid = 1500;
16+
principleOwing -= monthlyPrincipalPaid;
17+
document.write("<p>The house principle still owing is " + principleOwing);
18+
</script>
19+
</body>
20+
</html>

‎bk04ch03/example09.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Building String Expressions</title>
6+
</head>
7+
<body>
8+
<script>
9+
const preTipTotal = 10.00;
10+
const tipAmount = preTipTotal * 0.15;
11+
const message1 = "Your tip is ";
12+
const message2 = "<br>Your total bill is ";
13+
document.write(message1 + tipAmount +
14+
message2 + preTipTotal + tipAmount);
15+
</script>
16+
</body>
17+
</html>

‎bk04ch03/example10.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Building String Expressions</title>
6+
</head>
7+
<body>
8+
<script>
9+
const preTipTotal = 10.00;
10+
const tipAmount = preTipTotal * 0.15;
11+
const totalBill = preTipTotal + tipAmount;
12+
const message1 = "Your tip is ";
13+
const message2 = "<br>Your total bill is ";
14+
document.write(message1 + tipAmount + message2 + totalBill);
15+
</script>
16+
</body>
17+
</html>

‎bk04ch03/example11.html

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Using the equality (==) operator</title>
6+
</head>
7+
<body>
8+
<script>
9+
const booksRead = 48;
10+
const weeksPassed = 48;
11+
const bookAWeek = booksRead == weeksPassed;
12+
document.write("Me: I’m averaging a book a week, amirite?<br>");
13+
document.write("JavaScript: " + bookAWeek);
14+
</script>
15+
</body>
16+
</html>

‎bk04ch03/example12.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Using the inequality (!=) operator</title>
6+
</head>
7+
<body>
8+
<script>
9+
const currentFontSize = 19;
10+
const defaultFontSize = 16;
11+
const usingCustomFontSize = currentFontSize != defaultFontSize;
12+
document.write("Using a custom font size? " + usingCustomFontSize);
13+
</script>
14+
</body>
15+
</html>

‎bk04ch03/example13.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Using the greater than (>) operator</title>
6+
</head>
7+
<body>
8+
<script>
9+
const contentWidth = 1000;
10+
const windowWidth = 800;
11+
const tooBig = contentWidth > windowWidth;
12+
document.write("Is the content wider than the window? " + tooBig);
13+
</script>
14+
</body>
15+
</html>

‎bk04ch03/example14.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Using the less than (<) operator</title>
6+
</head>
7+
<body>
8+
<script>
9+
const kumquatsInStock = 3;
10+
const kumquatsSold = 3;
11+
const backordered = kumquatsInStock < kumquatsSold;
12+
document.write("Are kumquats on back order? " + backordered);
13+
</script>
14+
</body>
15+
</html>

‎bk04ch03/example15.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Using the greater than or equal (>=) operator</title>
6+
</head>
7+
<body>
8+
<script>
9+
const score = 90;
10+
const prize1Minimum = 80;
11+
const prize2Minimum = 90;
12+
const getsPrize1 = score >= prize1Minimum;
13+
const getsPrize2 = score >= prize2Minimum;
14+
document.write("Gets prize number 1? " + getsPrize1);
15+
document.write("<br>Gets prize number 2? " + getsPrize2);
16+
</script>
17+
</body>
18+
</html>

‎bk04ch03/example16.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Using the less than or equal (<=) operator</title>
6+
</head>
7+
<body>
8+
<script>
9+
const defects = 5;
10+
const defectsMaximumA = 10;
11+
const defectsMaximumB = 5;
12+
const getsBonus = defects <= defectsMaximumA;
13+
const getsRaise = defects <= defectsMaximumB;
14+
document.write("Gets a bonus? " + getsBonus);
15+
document.write("<br>Gets a raise? " + getsRaise);
16+
</script>
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)