Skip to content

Commit 1d39ff6

Browse files
committed
Live coding for objects and loops
1 parent c8fb288 commit 1d39ff6

8 files changed

Lines changed: 145 additions & 184 deletions

File tree

lectures/objects-loops-files-live-coding.md

Lines changed: 0 additions & 23 deletions
This file was deleted.

lectures/objects-loops-files.md

Lines changed: 0 additions & 48 deletions
This file was deleted.
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# Objects and loops: Live coding
2+
3+
## The fox and the grapes once again
4+
5+
[View in browser](/web-development/sandbox/js-objects/index.html){target="_blank"}
6+
7+
<<< @/public/sandbox/js-objects/index.js{js}
8+

outline.js

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -213,25 +213,25 @@ export const outline = [
213213
// },
214214
// ]
215215
// },
216-
// {
217-
// text: 'Objects, loops, and files',
218-
// collapsed: true,
219-
// lecturer: 'Joseph Muller',
220-
// items: [
221-
// {
222-
// text: 'Prep',
223-
// link: '/lectures/objects-loops-files.html',
224-
// },
225-
// {
226-
// text: 'Live coding',
227-
// link: '/lectures/objects-loops-files-live-coding.html',
228-
// },
229-
// {
230-
// text: 'Workshop',
231-
// link: '/workshops/objects/index.html',
232-
// },
233-
// ]
234-
// },
216+
{
217+
text: 'Objects and loops',
218+
collapsed: false,
219+
lecturer: 'Joseph Muller',
220+
items: [
221+
{
222+
text: 'Prep',
223+
link: '/lectures/objects-loops.html',
224+
},
225+
{
226+
text: 'Live coding',
227+
link: '/lectures/objects-loops-live-coding.html',
228+
},
229+
// {
230+
// text: 'Workshop',
231+
// link: '/workshops/objects/index.html',
232+
// },
233+
]
234+
},
235235
// {
236236
// text: 'JavaScript in the browser',
237237
// collapsed: true,
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
body {
2+
font-family: sans-serif;
3+
font-size: 1.2rem;
4+
color: #fdf3e3;
5+
background-color: #36565f;
6+
}
7+
8+
h1,
9+
h2 {
10+
font-family: monospace;
11+
}
12+
13+
.container {
14+
max-width: 48rem;
15+
margin: 10vh auto;
16+
}
Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,27 @@
11
<!DOCTYPE html>
22
<html lang="en-GB">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>The Seasons</title>
6-
<link rel="stylesheet" href="styles.css">
7-
<script type="module" src="./scripts.js" defer></script>
8-
</head>
9-
<body>
10-
<h1>The seasons</h1>
11-
<section>
12-
<h2>Autumn</h2>
13-
<p>Leaves are falling.</p>
14-
<p>Leaves are falling.</p>
15-
<img src="images/autumn-leaf.svg" width="40" height="40">
16-
<p>Leaves are falling.</p>
17-
<p>Leaves are falling.</p>
18-
<img src="images/leaf-small.jpg">
19-
<p>Leaves are falling.</p>
20-
<p>Leaves are falling.</p>
21-
</section>
22-
</body>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>JS Objects and Loops: The Fox and the Grapes</title>
6+
<link rel="stylesheet" href="index.css">
7+
<script defer src="index.js"></script>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<p><em>Open the browser console to see the JS program output!</em></p>
12+
<h1>The Fox and the Grapes</h1>
13+
<p>A Fox one day spied a beautiful bunch of ripe grapes hanging from a
14+
vine trained along the branches of a tree. The grapes seemed ready to
15+
burst with juice, and the Fox's mouth watered as he gazed longingly at
16+
them.</p>
17+
<p>The bunch hung from a high branch, and the Fox had to jump for it.
18+
The first time he jumped he missed it by a long way. So he walked off a
19+
short distance and took a running leap at it, only to fall short once
20+
more. Again and again he tried, but in vain.</p>
21+
<p>Now he sat down and looked at the grapes in disgust.</p>
22+
<p>"What a fool I am," he said. "Here I am wearing myself out to get a
23+
bunch of sour grapes that are not worth gaping for".</p>
24+
<p>And off he walked very, very scornfully.</p>
25+
</div>
26+
</body>
2327
</html>

public/sandbox/js-objects/index.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
const actions = [
2+
'jumped',
3+
'took a running leap',
4+
'tried again and again',
5+
// 'miraculously flew', // try uncommenting this to change the result
6+
]
7+
8+
const grapes = {
9+
qualities: ['beautiful', 'ripe', 'ready to burst with juice'],
10+
status: 'hanging from a vine',
11+
respond: function(foxAction) {
12+
if (foxAction === 'miraculously flew') {
13+
return 'eaten'
14+
} else {
15+
return null
16+
}
17+
}
18+
}
19+
20+
const fox = {
21+
attemptsMade: 0,
22+
feelings: ['hungry', 'a sense of longing'],
23+
hasTriedtoReachGrapes: false,
24+
hasReachedGrapes: false,
25+
26+
tryToEatGrapes: function() {
27+
for (let action of actions) {
28+
result = grapes.respond(action);
29+
fox.attemptsMade += 1;
30+
if (result) {
31+
fox.hasReachedGrapes = true;
32+
fox.feelings = ['elation', 'pride'];
33+
grapes.qualities = ['delicious'];
34+
grapes.status = 'eaten';
35+
break;
36+
}
37+
}
38+
if (!fox.hasReachedGrapes) {
39+
fox.feelings = ['disgust'];
40+
grapes.qualities = ['sour'];
41+
}
42+
fox.hasTriedtoReachGrapes = true;
43+
},
44+
45+
getTriedText: function() {
46+
if (fox.hasTriedtoReachGrapes) {
47+
return `
48+
The fox has ${fox.hasReachedGrapes ? '' : 'not '} reached
49+
the grapes after ${ fox.attemptsMade }
50+
attempt${ fox.attemptsMade === 1 ? '' : 's' }.
51+
`;
52+
} else {
53+
return `The fox has not tried to reach the grapes yet.`;
54+
}
55+
},
56+
57+
displayResult: function() {
58+
let result = `
59+
${ this.getTriedText() }
60+
He feels ${ fox.feelings.join(' and ') }
61+
and thinks the grapes are ${ grapes.qualities.join(' and ') }.
62+
`
63+
// Trim whitespace so it shows up more nicely in console
64+
result = result.replace(/(\s+)/g, ' ').trim();
65+
return result
66+
}
67+
}
68+
69+
// Pretty output
70+
console.log('Before')
71+
console.log(fox.displayResult())
72+
fox.tryToEatGrapes();
73+
console.log('After')
74+
console.log(fox.displayResult())
75+
76+
// Raw object output
77+
console.log('fox', fox);
78+
console.log('grapes', grapes);

public/sandbox/js-objects/objects.js

Lines changed: 0 additions & 74 deletions
This file was deleted.

0 commit comments

Comments
 (0)