Skip to content

Commit b1dd861

Browse files
wbambergwbamberg
authored
Add a new Functions task (mdn#425)
1 parent 4b193be commit b1dd861

12 files changed

+148
-39
lines changed

‎javascript/building-blocks/functions/first.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
let name = 'Chris';
1+
const name = 'Chris';
22
function greeting() {
3-
alert('Hello ' + name + ': welcome to our company.');
3+
alert(`Hello ${name}: welcome to our company.`);
44
}

‎javascript/building-blocks/functions/function-scope.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@
77
<body>
88

99
<script>
10-
let x = 1;
10+
const x = 1;
1111

1212
function a() {
13-
let y = 2;
13+
const y = 2;
1414
}
1515

1616
function b() {
17-
let z = 3;
17+
const z = 3;
1818
}
1919

2020
function output(value) {

‎javascript/building-blocks/functions/second.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
let name = 'Zaptec';
2-
1+
const name = 'Zaptec';
32
function greeting() {
4-
alert('Our company is called ' + name + '.');
3+
alert(`Our company is called ${name}.`);
54
}

‎javascript/building-blocks/tasks/functions/functions1-download.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626

2727
</body>
2828
<script>
29-
let names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
30-
let para = document.createElement('p');
29+
const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
30+
const para = document.createElement('p');
3131

3232
// Add your code here
3333

‎javascript/building-blocks/tasks/functions/functions1.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
</section>
2525

2626
<textarea class="playable playable-js" style="height: 220px;">
27-
let names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
28-
let para = document.createElement('p');
27+
const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
28+
const para = document.createElement('p');
2929

3030
// Add your code here
3131

‎javascript/building-blocks/tasks/functions/functions2-download.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,14 +32,14 @@
3232

3333
</body>
3434
<script>
35-
let canvas = document.querySelector('canvas');
36-
let ctx = canvas.getContext('2d');
37-
38-
let x = 50;
39-
let y = 60;
40-
let width = 100;
41-
let height = 75;
42-
let color = 'blue';
35+
const canvas = document.querySelector('canvas');
36+
const ctx = canvas.getContext('2d');
37+
38+
const x = 50;
39+
const y = 60;
40+
const width = 100;
41+
const height = 75;
42+
const color = 'blue';
4343

4444
// Add your code here
4545

‎javascript/building-blocks/tasks/functions/functions2.html

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,14 @@
3030
</canvas>
3131

3232
<textarea class="playable playable-js" style="height: 220px;">
33-
let canvas = document.querySelector('canvas');
34-
let ctx = canvas.getContext('2d');
35-
36-
let x = 50;
37-
let y = 60;
38-
let width = 100;
39-
let height = 75;
40-
let color = 'blue';
33+
const canvas = document.querySelector('canvas');
34+
const ctx = canvas.getContext('2d');
35+
36+
const x = 50;
37+
const y = 60;
38+
const width = 100;
39+
const height = 75;
40+
const color = 'blue';
4141

4242
// Add your code here
4343

‎javascript/building-blocks/tasks/functions/functions3-download.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626

2727
</body>
2828
<script>
29-
let names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
30-
let para = document.createElement('p');
29+
const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
30+
const para = document.createElement('p');
3131

3232
// Add your code here
3333

‎javascript/building-blocks/tasks/functions/functions3.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424
</section>
2525

2626
<textarea class="playable playable-js" style="height: 220px;">
27-
let names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
28-
let para = document.createElement('p');
27+
const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
28+
const para = document.createElement('p');
2929

3030
// Add your code here
3131

‎javascript/building-blocks/tasks/functions/functions4-download.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Functions: Task 3</title>
6+
<style>
7+
p {
8+
color: purple;
9+
margin: 0.5em 0;
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
</style>
16+
<link rel="stylesheet" href="../styles.css" />
17+
</head>
18+
19+
<body>
20+
21+
<section class="preview">
22+
23+
24+
25+
</section>
26+
27+
</body>
28+
<script>
29+
const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada'];
30+
const para = document.createElement('p');
31+
32+
function isShort(name) {
33+
return name.length < 5;
34+
}
35+
36+
const shortNames = names.filter(name => name.length < 5);
37+
para.textContent = shortNames;
38+
39+
// Don't edit the code below here!
40+
41+
const section = document.querySelector('section');
42+
43+
section.appendChild(para);
44+
</script>
45+
46+
</html>

‎javascript/building-blocks/tasks/functions/functions4.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Functions: Task 3</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
p {
13+
color: purple;
14+
margin: 0.5em 0;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<section class="preview">
21+
22+
23+
24+
</section>
25+
26+
<textarea class="playable playable-js" style="height: 220px;">
27+
const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada'];
28+
const para = document.createElement('p');
29+
30+
function isShort(name) {
31+
return name.length < 5;
32+
}
33+
34+
const shortNames = names.filter(isShort);
35+
para.textContent = shortNames;
36+
37+
// Don't edit the code below here!
38+
39+
section.innerHTML = ' ';
40+
41+
section.appendChild(para);
42+
</textarea>
43+
44+
<div class="playable-buttons">
45+
<input id="reset" type="button" value="Reset" />
46+
</div>
47+
</body>
48+
<script class="editable"></script>
49+
<script src="../playable.js"></script>
50+
</html>

‎javascript/building-blocks/tasks/functions/marking.md

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,14 +34,14 @@ You'll want to clear the canvas before drawing, so that when the code is updated
3434
The finished code should look something like this:
3535

3636
```
37-
let canvas = document.querySelector('canvas');
38-
let ctx = canvas.getContext('2d');
37+
const canvas = document.querySelector('canvas');
38+
const ctx = canvas.getContext('2d');
3939
40-
let x = 50;
41-
let y = 60;
42-
let width = 100;
43-
let height = 75;
44-
let color = 'blue';
40+
const x = 50;
41+
const y = 60;
42+
const width = 100;
43+
const height = 75;
44+
const color = 'blue';
4545
4646
function drawSquare(x, y, width, height, color) {
4747
ctx.fillStyle = 'white';
@@ -78,3 +78,17 @@ function chooseItem(array) {
7878
7979
para.textContent = chooseItem(names);
8080
```
81+
82+
## Task 4
83+
84+
In this task, you are asked to change the named `isShort()` function into an arrow function expression.
85+
86+
The finished code should look something like this:
87+
88+
```
89+
const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
90+
const para = document.createElement('p');
91+
92+
const shortNames = names.filter(name => name.length < 5);
93+
para.textContent = shortNames;
94+
```

0 commit comments

Comments
 (0)