feat(curriculum): add functions calculator workshop (freeCodeCamp#55949)

Co-authored-by: Sem Bauke <[email protected]>

Author: jdwilkin4

client/i18n/locales/english/intro.json

@@ -1929,7 +1929,12 @@
       "wjzt": { "title": "149", "intro": [] },
       "tsdq": { "title": "150", "intro": [] },
       "kkix": { "title": "151", "intro": [] },
-      "icxa": { "title": "152", "intro": [] },
+      "workshop-calculator": {
+        "title": "Build a Calculator",
+        "intro": [
+          "In this workshop, you will review working with functions by building a calculator."
+        ]
+      },
       "hqba": { "title": "153", "intro": [] },
       "nnqa": { "title": "154", "intro": [] },
       "cktz": { "title": "155", "intro": [] },

client/src/pages/learn/front-end-development/workshop-calculator/index.md

@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a Calculator
+block: workshop-calculator
+superBlock: front-end-development
+---
+
+## Introduction to the Build a Calculator
+
+This is a test for the new project-based curriculum.

curriculum/challenges/_meta/workshop-calculator/meta.json

@@ -0,0 +1,89 @@
+{
+  "name": "Build a Calculator",
+  "blockType": "workshop",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": true,
+  "dashedName": "workshop-calculator",
+  "order": 152,
+  "superBlock": "front-end-development",
+  "challengeOrder": [
+    {
+      "id": "66cc06012e46aa6bc9b8c001",
+      "title": "Step 1"
+    },
+    {
+      "id": "66cc095dfe1682753d2ab030",
+      "title": "Step 2"
+    },
+    {
+      "id": "66cc0a9e06e00b75d6782be9",
+      "title": "Step 3"
+    },
+    {
+      "id": "66cc0ba5881acb7692cfc4de",
+      "title": "Step 4"
+    },
+    {
+      "id": "66cc0de2920bec775f610424",
+      "title": "Step 5"
+    },
+    {
+      "id": "66cc0f1ae40802781b2ea972",
+      "title": "Step 6"
+    },
+    {
+      "id": "66cc10958d72e57907f898b2",
+      "title": "Step 7"
+    },
+    {
+      "id": "66cc12fa504b0479dac479a0",
+      "title": "Step 8"
+    },
+    {
+      "id": "66cdf76685e4cb5a8726e27b",
+      "title": "Step 9"
+    },
+    {
+      "id": "66cc14ca14e65e7a9ebecb80",
+      "title": "Step 10"
+    },
+    {
+      "id": "66cc16abc30b367ba1d1f9ef",
+      "title": "Step 11"
+    },
+    {
+      "id": "66cc172af7159a7c67804544",
+      "title": "Step 12"
+    },
+    {
+      "id": "66cc1a3a39aef47d6473cb2f",
+      "title": "Step 13"
+    },
+    {
+      "id": "66cc1ccfefdd727e18c2ab20",
+      "title": "Step 14"
+    },
+    {
+      "id": "66cc1deb1f04647f2aabee2b",
+      "title": "Step 15"
+    },
+    {
+      "id": "66cc21d23238dc8240a8a182",
+      "title": "Step 16"
+    },
+    {
+      "id": "66cc26907ff6908402af0149",
+      "title": "Step 17"
+    },
+    {
+      "id": "66cc2739f687e484d50bb6f1",
+      "title": "Step 18"
+    },
+    {
+      "id": "66cc281d687975858049fd8d",
+      "title": "Step 19"
+    }
+  ],
+  "helpCategory": "JavaScript"
+}

curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc06012e46aa6bc9b8c001.md

@@ -0,0 +1,47 @@
+---
+id: 66cc06012e46aa6bc9b8c001
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you will review how to work with functions by building a calculator app. 
+
+In the previous lecture videos, you learned how to declare functions like this:
+
+```js
+// regular function
+function myFunction(){
+
+}
+
+// arrow function
+const myArrowFunction = () => {
+
+}
+```
+
+Start by creating a function called `addTwoAndSeven`.
+
+You can choose to use the regular function syntax or the arrow function syntax.
+
+
+# --hints--
+
+You should declare a function called `addTwoAndSeven`.
+
+```js
+assert.isFunction(addTwoAndSeven);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc095dfe1682753d2ab030.md

@@ -0,0 +1,40 @@
+---
+id: 66cc095dfe1682753d2ab030
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+One of concepts you learned in the previous lecture videos was how to return values from a function.
+
+Here is a reminder of how to return a value from a function:
+
+```js
+function myFunction(){
+  return 'Hello World';
+}
+```
+
+Inside your `addTwoAndSeven` function, return the sum of `2` and `7`.
+
+# --hints--
+
+Your `addTwoAndSeven` function should return the sum of `2` and `7`
+
+```js
+assert.strictEqual(addTwoAndSeven(), 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+function addTwoAndSeven() {
+  
+}
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0a9e06e00b75d6782be9.md

@@ -0,0 +1,52 @@
+---
+id: 66cc0a9e06e00b75d6782be9
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+In the previous lecture videos, you learned how to call(invoke) a function. Calling a function means to execute the code inside the function.
+
+Here is a reminder of how to call a function:
+
+```js
+function myFunction(){
+  return 'Hello World';
+}
+
+// function call
+myFunction();
+```
+
+Add a `console.log` statement, and inside it, call the `addTwoAndSeven` function.
+
+You should now see the sum of `2` and `7` logged to the console.
+
+# --hints--
+
+You should have a `console.log` in your code.
+
+```js
+assert.match(code, /console\.log(.*)/);
+```
+
+You should call the `addTwoAndSeven` function inside the `console.log`.
+
+```js
+assert.match(code, /console\.log\(\s*addTwoAndSeven\(\s*\)\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function addTwoAndSeven() {
+  return 2 + 7;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0ba5881acb7692cfc4de.md

@@ -0,0 +1,49 @@
+---
+id: 66cc0ba5881acb7692cfc4de
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+Now, it is time to add another function.
+
+Declare a function called `addThreeAndFour` that returns the sum of `3` and `4`.
+
+Then call the `addThreeAndFour` function inside a `console.log` to see the result.
+
+# --hints--
+
+You should declare a function called `addThreeAndFour`.
+
+```js
+assert.isFunction(addThreeAndFour);
+```
+
+Your `addThreeAndFour` function should return the sum of `3` and `4`.
+
+```js
+assert.equal(addThreeAndFour(), 7);
+```
+
+You should call the `addThreeAndFour` function inside a `console.log`.
+
+```js
+assert.match(code, /console\.log\(\s*addThreeAndFour\(\s*\)\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function addTwoAndSeven() {
+  return 2 + 7;
+}
+
+console.log(addTwoAndSeven());
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-calculator/66cc0de2920bec775f610424.md

@@ -0,0 +1,64 @@
+---
+id: 66cc0de2920bec775f610424
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+Even though the functions work as expected, there is a lot of repetition in your code. 
+
+Since you are building a calculator, you don't want to have to create a function for every possible combination of numbers you want to add together.
+
+It would be better to create a single reusable function that can add any two numbers together.
+
+Remove all of the code you have written so far.
+
+In the next step, you will review how to work with parameters and arguments in functions.
+
+# --hints--
+
+You should not have a function called `addTwoAndSeven`.
+
+```js
+assert.notMatch(code, /function\s+addTwoAndSeven\s*\(\s*\)\s*{/);
+```
+
+You should not have a function call to `addTwoAndSeven`.
+
+```js
+assert.notMatch(code, /console\.log\(\s*addTwoAndSeven\(\s*\)\s*\)/);
+```
+
+You should not have a function called `addThreeAndFour`.
+
+```js
+assert.notMatch(code, /function\s+addThreeAndFour\s*\(\s*\)\s*{/);
+```
+
+You should not have a function call to `addThreeAndFour`.
+
+```js
+assert.notMatch(code, /console\.log\(\s*addThreeAndFour\(\s*\)\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+function addTwoAndSeven() {
+  return 2 + 7;
+}
+
+console.log(addTwoAndSeven());
+
+function addThreeAndFour() {
+  return 3 + 4;
+}
+
+console.log(addThreeAndFour());
+--fcc-editable-region--
+```