feat(curriculum): add array shopping list workshop (#55939)

client/i18n/locales/english/intro.json

@@ -1924,7 +1924,13 @@
       "avln": { "title": "157", "intro": [] },
       "mexq": { "title": "158", "intro": [] },
       "ifgn": { "title": "159", "intro": [] },
-      "qmdt": { "title": "160", "intro": [] },
+      "workshop-shopping-list": {
+        "title": "Build a Shopping List",
+        "intro": [
+          "In this workshop, you will practice working with arrays by building a shopping list.",
+          "You will review how to add and remove elements from an array using methods like <code>push</code>, <code>pop</code>, <code>shift</code>, and <code>unshift</code>."
+        ]
+      },
       "mokm": { "title": "161", "intro": [] },
       "froz": { "title": "162", "intro": [] },
       "ozth": { "title": "163", "intro": [] },

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

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

curriculum/challenges/_meta/workshop-shopping-list/meta.json

@@ -0,0 +1,93 @@
+{
+  "name": "Build a Shopping List",
+  "blockType": "workshop",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": true,
+  "dashedName": "workshop-shopping-list",
+  "order": 155,
+  "superBlock": "front-end-development",
+  "challengeOrder": [
+    {
+      "id": "66c63bfa4685e4e3843fa0dc",
+      "title": "Step 1"
+    },
+    {
+      "id": "66c64095f61166ede6e39a84",
+      "title": "Step 2"
+    },
+    {
+      "id": "66c64210413532ee9d3bd342",
+      "title": "Step 3"
+    },
+    {
+      "id": "66c644c08ebcd2ef90c750bd",
+      "title": "Step 4"
+    },
+    {
+      "id": "66c645b345a39bf04864dc50",
+      "title": "Step 5"
+    },
+    {
+      "id": "66cbe2319d3845545a293a0b",
+      "title": "Step 6"
+    },
+    {
+      "id": "66c6491fe4c8e0f16845425f",
+      "title": "Step 7"
+    },
+    {
+      "id": "66c64ad16796c7f2419b45c5",
+      "title": "Step 8"
+    },
+    {
+      "id": "66c726c34ecf1e238aa9d7d5",
+      "title": "Step 9"
+    },
+    {
+      "id": "66c72a55418cc9247b710827",
+      "title": "Step 10"
+    },
+    {
+      "id": "66c72b0ffbc5522525768558",
+      "title": "Step 11"
+    },
+    {
+      "id": "66c72f4d0528bd268a82107b",
+      "title": "Step 12"
+    },
+    {
+      "id": "66c730183f4020275cbf0611",
+      "title": "Step 13"
+    },
+    {
+      "id": "66c730ee6ae076281721d0b9",
+      "title": "Step 14"
+    },
+    {
+      "id": "66c73a0c5b264f2a75164d94",
+      "title": "Step 15"
+    },
+    {
+      "id": "66c73a7798f6f62b2ae58f22",
+      "title": "Step 16"
+    },
+    {
+      "id": "66c73fa7433e082c4be096b1",
+      "title": "Step 17"
+    },
+    {
+      "id": "66c74079c30b1c2d166cb9a4",
+      "title": "Step 18"
+    },
+    {
+      "id": "66c742d045c9fc2e09fa64b1",
+      "title": "Step 19"
+    },
+    {
+      "id": "66c748ffdfbe4f2ede268be2",
+      "title": "Step 20"
+    }
+  ],
+  "helpCategory": "JavaScript"
+}

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c63bfa4685e4e3843fa0dc.md

@@ -0,0 +1,36 @@
+---
+id: 66c63bfa4685e4e3843fa0dc
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you will continue to learn about arrays by building a grocery shopping list.
+
+Start by adding a `console.log` that logs the string `"Grocery shopping list"` to the console.
+
+# --hints--
+
+You should have a `console.log` in your code.
+
+```js
+assert.match(code, /console\.log(.*)/);
+```
+
+Your `console.log` should output the message `"Grocery shopping list"`. Double check for spelling and capitalization errors.
+
+```js
+assert.match(code, /console\.log\((["'])(Grocery\s+shopping\s+list)\1\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c64095f61166ede6e39a84.md

@@ -0,0 +1,50 @@
+---
+id: 66c64095f61166ede6e39a84
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+For this shopping list, you will use an array to represent the items you need to buy.
+
+In the previous lecture videos, you learned how to create arrays like this:
+
+```js
+const fruits = ['apple', 'banana', 'orange'];
+```
+
+In this step, create a variable called `shoppingList` and assign it an empty array.
+
+# --hints--
+
+You should have a variable called `shoppingList`.
+
+```js
+assert.isNotNull(shoppingList);
+```
+
+You should assign an array to the `shoppingList` variable.
+
+```js
+assert.isArray(shoppingList);
+```
+
+Your array should be empty.
+
+```js
+assert.isEmpty(shoppingList);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c64210413532ee9d3bd342.md

@@ -0,0 +1,34 @@
+---
+id: 66c64210413532ee9d3bd342
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+For this next portion of the workshop, you will practice adding food items to the grocery list.
+
+Start by using `console.log` to log the message `"It will be nice to have some fruit to eat."`. 
+
+# --hints--
+
+You should log the message `"It will be nice to have some fruit to eat."` to the console.
+
+```js
+assert.match(code, /console\.log\s*\(\s*(['"])(It\s+will\s+be\s+nice\s+to\s+have\s+some\s+fruit\s+to\s+eat\.)\1\s*\)\s*;?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c644c08ebcd2ef90c750bd.md

@@ -0,0 +1,46 @@
+---
+id: 66c644c08ebcd2ef90c750bd
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+In the previous lecture videos, you learned how to add items to the end of an array using the `push` method like this:
+
+```js
+fruits.push('pear');
+```
+
+Using the `push` method, add the string `"Apples"` to the `shoppingList` array.
+
+# --hints--
+
+Your `shoppingList` array should have one item in it.
+
+```js
+assert.lengthOf(shoppingList, 1);
+```
+
+Your `shoppingList` array should have the string `"Apples"` in it. Double check for spelling and capitalization errors.
+
+```js
+assert.includeMembers(shoppingList, ['Apples']);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c645b345a39bf04864dc50.md

@@ -0,0 +1,54 @@
+---
+id: 66c645b345a39bf04864dc50
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+To see the updated shopping list, you will need to log the current shopping list and a short message to the console.
+
+Since this message will be used repeatedly throughout the workshop, it is best to create a reusable function.
+
+Create a function called `getShoppingListMsg` that returns the string `"Current Shopping List: "` followed by the `shoppingList` array. 
+
+You can use template literals or string concatenation with the `+` operator to combine the string and the `shoppingList` array.
+
+# --hints--
+
+You should have a function called `getShoppingListMsg` in your code.
+
+```js
+assert.isFunction(getShoppingListMsg);
+```
+
+Your `getShoppingListMsg` function should return a string.
+
+```js
+assert.isString(getShoppingListMsg());
+```
+
+Your `getShoppingListMsg` function should return the message of `"Current Shopping List: "` followed by the `shoppingList` array. Double check spacing and spelling errors.
+
+```js
+assert.strictEqual(getShoppingListMsg(), "Current Shopping List: Apples");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c6491fe4c8e0f16845425f.md

@@ -0,0 +1,58 @@
+---
+id: 66c6491fe4c8e0f16845425f
+title: Step 7
+challengeType: 1
+dashedName: step-7
+---
+
+# --description--
+
+Now it is time to add another fruit to the list.
+
+Using the same array method as earlier, add the string `"Grapes"` to the end of the `shoppingList` array.
+
+Then, add a `console.log` and call the `getShoppingListMsg` function inside of the `console.log` to see the updated list logged to the console.
+
+# --hints--
+
+Your `shoppingList` array should now contain two items.
+
+```js
+assert.lengthOf(shoppingList, 2);
+```
+
+Your `shoppingList` array should contain the string `"Grapes"`.
+
+```js
+assert.equal(shoppingList[1], "Grapes");
+```
+
+You should call the `getShoppingListMsg` function inside of the `console.log`.
+
+```js
+assert.lengthOf(code.match(/console\.log\(\s*getShoppingListMsg\(\)\s*\)/g), 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg() {
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c64ad16796c7f2419b45c5.md

@@ -0,0 +1,47 @@
+---
+id: 66c64ad16796c7f2419b45c5
+title: Step 8
+challengeType: 1
+dashedName: step-8
+---
+
+# --description--
+
+Now it is time to start adding items to the top of the grocery list.
+
+Start by adding a `console.log` that logs the message `"It looks like we need to get some cooking oil."` to the console.
+
+# --hints--
+
+You should log the message `"It looks like we need to get some cooking oil."` to the console.
+
+```js
+assert.match(code, /console\.log\((['"])(It\s+looks\s+like\s+we\s+need\s+to\s+get\s+some\s+cooking\s+oil\.)\1\);?/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg(){
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c726c34ecf1e238aa9d7d5.md

@@ -0,0 +1,60 @@
+---
+id: 66c726c34ecf1e238aa9d7d5
+title: Step 9
+challengeType: 1
+dashedName: step-9
+---
+
+# --description--
+
+In the lecture videos, you learned how to add elements to the beginning of an array using the `unshift()` method. 
+
+Here is a reminder of how to use the `unshift()` method:
+
+```js
+array.unshift(item1, item2, ..., itemX);
+```
+
+Use the `unshift()` method to add the string `"Vegetable Oil"` to the beginning of the `shoppingList` array.
+
+# --hints--
+
+You should have three items in your `shoppingList` array.
+
+```js
+assert.lengthOf(shoppingList, 3);
+```
+
+You should use the `unshift()` method to add `"Vegetable Oil"` to the beginning of the `shoppingList` array.
+
+```js
+assert.equal(shoppingList[0], "Vegetable Oil");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+function getShoppingListMsg(){
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c72a55418cc9247b710827.md

@@ -0,0 +1,49 @@
+---
+id: 66c72a55418cc9247b710827
+title: Step 10
+challengeType: 1
+dashedName: step-10
+---
+
+# --description--
+
+Next, add a `console.log` and call the `getShoppingListMsg` function inside of the `console.log` to see the updated list logged to the console.
+
+# --hints--
+
+You should call the `getShoppingListMsg` function inside of the `console.log`.
+
+```js
+assert.lengthOf(code.match(/console\.log\(\s*getShoppingListMsg\(\)\s*\)/g), 3);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg(){
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c72b0ffbc5522525768558.md

@@ -0,0 +1,78 @@
+---
+id: 66c72b0ffbc5522525768558
+title: Step 11
+challengeType: 1
+dashedName: step-11
+---
+
+# --description--
+
+In earlier steps, you reviewed how to add an item to the end of the array using the `push` method. 
+
+But the `push` method accepts multiple arguments, so you can add multiple items to the end of the array like this:
+
+```js
+array.push(item1, item2, item3);
+```
+
+In this step, use the `push` method to add the strings `"Popcorn", "Beef Jerky", "Potato Chips"` to the `shoppingList` array.
+
+The order is important, so make sure to add the items in the order they are listed.
+
+# --hints--
+
+Your `shoppingList` array should have a total of `6` strings.
+
+```js
+assert.lengthOf(shoppingList, 6);
+```
+
+Your `shoppingList` should have the string `"Popcorn"`.
+
+```js
+assert.strictEqual(shoppingList[3], "Popcorn");
+```
+
+Your `shoppingList` should have the string `"Beef Jerky"`.
+
+```js
+assert.strictEqual(shoppingList[4], "Beef Jerky");
+```
+
+Your `shoppingList` should have the string `"Potato Chips"`.
+
+```js
+assert.strictEqual(shoppingList[5], "Potato Chips");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg(){
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c72f4d0528bd268a82107b.md

@@ -0,0 +1,54 @@
+---
+id: 66c72f4d0528bd268a82107b
+title: Step 12
+challengeType: 1
+dashedName: step-12
+---
+
+# --description--
+
+Now it is time to log the updated `shoppingList` array to the console.
+
+Add another `console.log` and call the `getShoppingListMsg` function inside of the `console.log` to see the updated list logged to the console.
+
+# --hints--
+
+You should call the `getShoppingListMsg` function inside of the `console.log`.
+
+```js
+assert.lengthOf(code.match(/console\.log\(\s*getShoppingListMsg\(\)\s*\)/g), 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg(){
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+shoppingList.push("Popcorn", "Beef Jerky", "Potato Chips");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c730183f4020275cbf0611.md

@@ -0,0 +1,55 @@
+---
+id: 66c730183f4020275cbf0611
+title: Step 13
+challengeType: 1
+dashedName: step-13
+---
+
+# --description--
+
+For this next portion of the workshop, you will review how to remove items from the end of the array.
+
+Start by adding a `console.log` that logs the message `"This looks like too much junk food."`.
+
+# --hints--
+
+You should log the message `"This looks like too much junk food."`.
+
+```js
+assert.match(code, /console\.log\((['"])(This\s+looks\s+like\s+too\s+much\s+junk\s+food.)\1\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg(){
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+shoppingList.push("Popcorn", "Beef Jerky", "Potato Chips");
+console.log(getShoppingListMsg());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c730ee6ae076281721d0b9.md

@@ -0,0 +1,73 @@
+---
+id: 66c730ee6ae076281721d0b9
+title: Step 14
+challengeType: 1
+dashedName: step-14
+---
+
+# --description--
+
+In the previous lecture videos, you learned how to remove items from the end of an array using the `pop` method. 
+
+Here is reminder of how to use the `pop` method:
+
+```js
+let array = [1, 2, 3, 4, 5];
+array.pop();
+
+// [1, 2, 3, 4]
+console.log(array); 
+```
+
+Use the `pop` method to remove the last item from the `shoppingList` array.
+
+# --hints--
+
+Your `shoppingList` array should now have `5` items in it.
+
+```js
+assert.lengthOf(shoppingList, 5);
+```
+
+Your `shoppingList` array should no longer have the string `"Potato Chips"` in it.
+
+```js
+assert.notInclude(shoppingList, "Potato Chips");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg() {
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+shoppingList.push("Popcorn", "Beef Jerky", "Potato Chips");
+console.log(getShoppingListMsg());
+
+console.log("This looks like too much junk food.");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c73a0c5b264f2a75164d94.md

@@ -0,0 +1,59 @@
+---
+id: 66c73a0c5b264f2a75164d94
+title: Step 15
+challengeType: 1
+dashedName: step-15
+---
+
+# --description--
+
+Now it is time to log the updated `shoppingList` array to the console.
+
+Add a `console.log` and call the `getShoppingListMsg` function inside of the `console.log` to see the updated list logged to the console.
+
+# --hints--
+
+You should call the `getShoppingListMsg` function inside of the `console.log`.
+
+```js
+assert.lengthOf(code.match(/console\.log\(\s*getShoppingListMsg\(\)\s*\)/g), 5);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg() {
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+shoppingList.push("Popcorn", "Beef Jerky", "Potato Chips");
+console.log(getShoppingListMsg());
+
+console.log("This looks like too much junk food.");
+
+shoppingList.pop();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c73a7798f6f62b2ae58f22.md

@@ -0,0 +1,82 @@
+---
+id: 66c73a7798f6f62b2ae58f22
+title: Step 16
+challengeType: 1
+dashedName: step-16
+---
+
+# --description--
+
+Now it is time to add more items to the beginning of the grocery list.
+
+Start by adding a `console.log` statement that logs the message `"It might be nice to get a dessert."`
+
+Below that `console` statement, use the correct array method to add the string `"Chocolate Cake"` to the beginning of the `shoppingList` array.
+
+Finally, add a `console.log` and call the `getShoppingListMsg` function inside of the `console.log` to see the updated list logged to the console.
+
+# --hints--
+
+You should have a `console.log` that logs the message `"It might be nice to get a dessert."`.
+
+```js
+assert.match(code, /console\.log\((['"])(It\s+might\s+be\s+nice\s+to\s+get\s+a\s+dessert\.)\1\)/);
+```
+
+Your `shoppingList` array should have a total of `6` items.
+
+```js
+assert.lengthOf(shoppingList, 6);
+```
+
+You should use the `unshift` method to add the string `"Chocolate Cake"` to the beginning of the `shoppingList` array.
+
+```js
+assert.strictEqual(shoppingList[0], "Chocolate Cake");
+```
+
+You should call the `getShoppingListMsg` function inside of the `console.log`.
+
+```js
+assert.lengthOf(code.match(/console\.log\(\s*getShoppingListMsg\(\)\s*\)/g), 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg() {
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+shoppingList.push("Popcorn", "Beef Jerky", "Potato Chips");
+console.log(getShoppingListMsg());
+
+console.log("This looks like too much junk food.");
+
+shoppingList.pop();
+console.log(getShoppingListMsg());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c73fa7433e082c4be096b1.md

@@ -0,0 +1,65 @@
+---
+id: 66c73fa7433e082c4be096b1
+title: Step 17
+challengeType: 1
+dashedName: step-17
+---
+
+# --description--
+
+In this last part of the workshop, you will review how to remove an item from the beginning of an array.
+
+Start by adding a `console.log` that logs the message `"On second thought, maybe we should be more health conscious."`.
+
+# --hints--
+
+You should have a `console.log` that logs the message `"On second thought, maybe we should be more health conscious."`.
+
+```js
+assert.match(code, /console\.log\((["'])(On\s+second\s+thought,\s+maybe\s+we\s+should\s+be\s+more\s+health\s+conscious\.)\1\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg() {
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+shoppingList.push("Popcorn", "Beef Jerky", "Potato Chips");
+console.log(getShoppingListMsg());
+
+console.log("This looks like too much junk food.");
+
+shoppingList.pop();
+console.log(getShoppingListMsg());
+
+console.log("It might be nice to get a dessert.");
+
+shoppingList.unshift("Chocolate Cake");
+console.log(getShoppingListMsg());
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c74079c30b1c2d166cb9a4.md

@@ -0,0 +1,83 @@
+---
+id: 66c74079c30b1c2d166cb9a4
+title: Step 18
+challengeType: 1
+dashedName: step-18
+---
+
+# --description--
+
+In the lecture videos, you learned how to remove an item from the beginning of the array using the `shift` method. 
+
+Here is a reminder of how to use the `shift` method:
+
+```js
+const array = [1, 2, 3, 4, 5];
+array.shift();
+
+// Result: [2, 3, 4, 5]
+console.log(array); 
+```
+
+Use the `shift` method to remove the first item from the `shoppingList` array.
+
+# --hints--
+
+Your `shoppingList` array should have a total of `5` items.
+
+```js
+assert.lengthOf(shoppingList, 5);
+```
+
+You should use the `shift` method to remove the first item from the `shoppingList` array.
+
+```js
+assert.strictEqual(shoppingList[0], "Vegetable Oil");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg() {
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+shoppingList.push("Popcorn", "Beef Jerky", "Potato Chips");
+console.log(getShoppingListMsg());
+
+console.log("This looks like too much junk food.");
+
+shoppingList.pop();
+console.log(getShoppingListMsg());
+
+console.log("It might be nice to get a dessert.");
+
+shoppingList.unshift("Chocolate Cake");
+console.log(getShoppingListMsg());
+
+console.log("On second thought, maybe we should be more health conscious.");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c742d045c9fc2e09fa64b1.md

@@ -0,0 +1,81 @@
+---
+id: 66c742d045c9fc2e09fa64b1
+title: Step 19
+challengeType: 1
+dashedName: step-19
+---
+
+# --description--
+
+The last change to make to the grocery list is to update the first item in the list.
+
+In the previous lecture videos, you learned how to update an item using bracket notation and the index of the item you want to update.
+
+Here is a reminder of how to update an item in an array:
+
+```js
+const array = [1, 2, 3, 4, 5];
+
+array[0] = 10;
+// Result: [10, 2, 3, 4, 5]
+console.log(array); 
+```
+
+Update the first item in the `shoppingList` array to be `"Canola Oil"`.
+
+# --hints--
+
+You should update the first item in the `shoppingList` array to be `"Canola Oil"`.
+
+```js
+assert.equal(shoppingList[0], "Canola Oil");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg() {
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+shoppingList.push("Popcorn", "Beef Jerky", "Potato Chips");
+console.log(getShoppingListMsg());
+
+console.log("This looks like too much junk food.");
+
+shoppingList.pop();
+console.log(getShoppingListMsg());
+
+console.log("It might be nice to get a dessert.");
+
+shoppingList.unshift("Chocolate Cake");
+console.log(getShoppingListMsg());
+
+console.log("On second thought, maybe we should be more health conscious.");
+
+shoppingList.shift();
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66c748ffdfbe4f2ede268be2.md

@@ -0,0 +1,116 @@
+---
+id: 66c748ffdfbe4f2ede268be2
+title: Step 20
+challengeType: 1
+dashedName: step-20
+---
+
+# --description--
+
+In this final step of the workshop, log the final grocery list to the console.
+
+And with this last step your grocery list is complete!
+
+# --hints--
+
+You should log the `shoppingList` array to the console.
+
+```js
+assert.match(code, /console\.log\(\s*shoppingList\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg() {
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+shoppingList.push("Popcorn", "Beef Jerky", "Potato Chips");
+console.log(getShoppingListMsg());
+
+console.log("This looks like too much junk food.");
+
+shoppingList.pop();
+console.log(getShoppingListMsg());
+
+console.log("It might be nice to get a dessert.");
+
+shoppingList.unshift("Chocolate Cake");
+console.log(getShoppingListMsg());
+
+console.log("On second thought, maybe we should be more health conscious.");
+
+shoppingList.shift();
+shoppingList[0] = "Canola Oil";
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg() {
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+console.log(getShoppingListMsg());
+
+shoppingList.push("Grapes");
+console.log(getShoppingListMsg());
+
+console.log("It looks like we need to get some cooking oil.");
+
+shoppingList.unshift("Vegetable Oil");
+console.log(getShoppingListMsg());
+
+shoppingList.push("Popcorn", "Beef Jerky", "Potato Chips");
+console.log(getShoppingListMsg());
+
+console.log("This looks like too much junk food.");
+
+shoppingList.pop();
+console.log(getShoppingListMsg());
+
+console.log("It might be nice to get a dessert.");
+
+shoppingList.unshift("Chocolate Cake");
+console.log(getShoppingListMsg());
+
+console.log("On second thought, maybe we should be more health conscious.");
+
+shoppingList.shift();
+shoppingList[0] = "Canola Oil";
+
+console.log(shoppingList);
+```

curriculum/challenges/english/25-front-end-development/workshop-shopping-list/66cbe2319d3845545a293a0b.md

@@ -0,0 +1,42 @@
+---
+id: 66cbe2319d3845545a293a0b
+title: Step 6
+challengeType: 1
+dashedName: step-6
+---
+
+# --description--
+
+Now it is time to see the message logged to the console.
+
+Add a `console.log` and call the `getShoppingListMsg` function inside of the `console.log` to see the message logged to the console.
+
+# --hints--
+
+You should call the `getShoppingListMsg` function inside of the `console.log`.
+
+```js
+assert.match(code, /console\.log\(\s*getShoppingListMsg\(\)\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+console.log("Grocery shopping list");
+
+const shoppingList = [];
+
+console.log("It will be nice to have some fruit to eat.");
+
+shoppingList.push("Apples");
+
+function getShoppingListMsg() {
+  return `Current Shopping List: ${shoppingList}`;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```