Add a new Functions task (mdn#425)

Sidharth99 · Dec 2, 2021 · b1dd861 · b1dd861
1 parent 4b193be
commit b1dd861
Show file tree

Hide file tree

Showing 12 changed files with 148 additions and 39 deletions.
diff --git a/javascript/building-blocks/functions/first.js b/javascript/building-blocks/functions/first.js
@@ -1,4 +1,4 @@
-let name = 'Chris';
+const name = 'Chris';
 function greeting() {
-  alert('Hello ' + name + ': welcome to our company.');
+  alert(`Hello ${name}: welcome to our company.`);
 }
diff --git a/javascript/building-blocks/functions/function-scope.html b/javascript/building-blocks/functions/function-scope.html
@@ -7,14 +7,14 @@
 <body>
 
   <script>
-    let x = 1;
+    const x = 1;
 
     function a() {
-      let y = 2;
+      const y = 2;
     }
 
     function b() {
-      let z = 3;
+      const z = 3;
     }
 
     function output(value) {

diff --git a/javascript/building-blocks/functions/second.js b/javascript/building-blocks/functions/second.js
@@ -1,5 +1,4 @@
-let name = 'Zaptec';
-
+const name = 'Zaptec';
 function greeting() {
-  alert('Our company is called ' + name + '.');
+  alert(`Our company is called ${name}.`);
 }
diff --git a/javascript/building-blocks/tasks/functions/functions1-download.html b/javascript/building-blocks/tasks/functions/functions1-download.html
@@ -26,8 +26,8 @@
 
   </body>
   <script>
-    let names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
-    let para = document.createElement('p');
+    const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
+    const para = document.createElement('p');
 
     // Add your code here
 

diff --git a/javascript/building-blocks/tasks/functions/functions1.html b/javascript/building-blocks/tasks/functions/functions1.html
@@ -24,8 +24,8 @@
     </section>
 
     <textarea class="playable playable-js" style="height: 220px;">
-let names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
-let para = document.createElement('p');
+const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
+const para = document.createElement('p');
 
 // Add your code here
 

diff --git a/javascript/building-blocks/tasks/functions/functions2-download.html b/javascript/building-blocks/tasks/functions/functions2-download.html
@@ -32,14 +32,14 @@
 
   </body>
   <script>
-    let canvas = document.querySelector('canvas');
-    let ctx = canvas.getContext('2d');
-
-    let x = 50;
-    let y = 60;
-    let width = 100;
-    let height = 75;
-    let color = 'blue';
+    const canvas = document.querySelector('canvas');
+    const ctx = canvas.getContext('2d');
+
+    const x = 50;
+    const y = 60;
+    const width = 100;
+    const height = 75;
+    const color = 'blue';
 
     // Add your code here
 

diff --git a/javascript/building-blocks/tasks/functions/functions2.html b/javascript/building-blocks/tasks/functions/functions2.html
@@ -30,14 +30,14 @@
     </canvas>
 
     <textarea class="playable playable-js" style="height: 220px;">
-let canvas = document.querySelector('canvas');
-let ctx = canvas.getContext('2d');
-
-let x = 50;
-let y = 60;
-let width = 100;
-let height = 75;
-let color = 'blue';
+const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
+
+const x = 50;
+const y = 60;
+const width = 100;
+const height = 75;
+const color = 'blue';
 
 // Add your code here
 

diff --git a/javascript/building-blocks/tasks/functions/functions3-download.html b/javascript/building-blocks/tasks/functions/functions3-download.html
@@ -26,8 +26,8 @@
 
   </body>
   <script>
-    let names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
-    let para = document.createElement('p');
+    const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
+    const para = document.createElement('p');
 
     // Add your code here
 

diff --git a/javascript/building-blocks/tasks/functions/functions3.html b/javascript/building-blocks/tasks/functions/functions3.html
@@ -24,8 +24,8 @@
     </section>
 
     <textarea class="playable playable-js" style="height: 220px;">
-let names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
-let para = document.createElement('p');
+const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
+const para = document.createElement('p');
 
 // Add your code here
 

diff --git a/javascript/building-blocks/tasks/functions/functions4-download.html b/javascript/building-blocks/tasks/functions/functions4-download.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Functions: Task 3</title>
+    <style>
+      p {
+        color: purple;
+        margin: 0.5em 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+    </style>
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+
+  <body>
+
+    <section class="preview">
+
+
+
+    </section>
+
+  </body>
+  <script>
+    const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada'];
+    const para = document.createElement('p');
+
+    function isShort(name) {
+      return name.length < 5;
+    }
+
+    const shortNames = names.filter(name => name.length < 5);
+    para.textContent = shortNames;
+
+    // Don't edit the code below here!
+
+    const section = document.querySelector('section');
+
+    section.appendChild(para);
+  </script>
+
+</html>
diff --git a/javascript/building-blocks/tasks/functions/functions4.html b/javascript/building-blocks/tasks/functions/functions4.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Functions: Task 3</title>
+    <link rel="stylesheet" href="../styles.css" />
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      p {
+        color: purple;
+        margin: 0.5em 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <section class="preview">
+
+
+
+    </section>
+
+    <textarea class="playable playable-js" style="height: 220px;">
+const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada'];
+const para = document.createElement('p');
+
+function isShort(name) {
+  return name.length < 5;
+}
+
+const shortNames = names.filter(isShort);
+para.textContent = shortNames;
+
+// Don't edit the code below here!
+
+section.innerHTML = ' ';
+
+section.appendChild(para);
+    </textarea>
+
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+  <script class="editable"></script>
+  <script src="../playable.js"></script>
+</html>
diff --git a/javascript/building-blocks/tasks/functions/marking.md b/javascript/building-blocks/tasks/functions/marking.md
@@ -34,14 +34,14 @@ You'll want to clear the canvas before drawing, so that when the code is updated
 The finished code should look something like this:
 
 ```
-let canvas = document.querySelector('canvas');
-let ctx = canvas.getContext('2d');
+const canvas = document.querySelector('canvas');
+const ctx = canvas.getContext('2d');
 
-let x = 50;
-let y = 60;
-let width = 100;
-let height = 75;
-let color = 'blue';
+const x = 50;
+const y = 60;
+const width = 100;
+const height = 75;
+const color = 'blue';
 
 function drawSquare(x, y, width, height, color) {
   ctx.fillStyle = 'white';
@@ -78,3 +78,17 @@ function chooseItem(array) {
 
 para.textContent = chooseItem(names);
 ```
+
+## Task 4
+
+In this task, you are asked to change the named `isShort()` function into an arrow function expression.
+
+The finished code should look something like this:
+
+```
+const names = ['Chris', 'Li Kang', 'Anne', 'Francesca', 'Mustafa', 'Tina', 'Bert', 'Jada']
+const para = document.createElement('p');
+
+const shortNames = names.filter(name => name.length < 5);
+para.textContent = shortNames;
+```