feat(curriculum): add string transformer workshop to FSD cert (#62557)

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2025-10-15 23:35:56 -07:00
parent bf40889920
commit c91ff309f0
15 changed files with 765 additions and 0 deletions
@@ -3092,6 +3092,12 @@
          "In this lesson you will learn how to modify strings by replacing parts of them using the <code>replace()</code> method and how to repeat strings multiple times using the <code>repeat()</code> method."
        ]
      },
+      "workshop-string-transformer": {
+        "title": "Build a String Transformer",
+        "intro": [
+          "In this workshop, you will practice working with the <code>replace()</code>, <code>replaceAll()</code> and <code>repeat()</code> methods."
+        ]
+      },
      "review-javascript-strings": {
        "title": "JavaScript Strings Review",
        "intro": [
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Build a String Transformer
+block: workshop-string-transformer
+superBlock: full-stack-developer
+---
+
+## Introduction to the Build a String Transformer
+
+In this workshop, you will practice working with the `replace()`, `replaceAll()` and `repeat()` methods.
@@ -0,0 +1,42 @@
+---
+id: 68e41084bb275539f72de9fe
+title: Step 1
+challengeType: 1
+dashedName: step-1
+---
+
+# --description--
+
+In this workshop, you will practice working with the `replace()`, `replaceAll()` and `repeat()` methods by building a string transformer app. 
+
+To start, create a variable called `originalString` and assign it the value of `"I love cats."`.
+
+# --hints--
+
+You should have a variable called `originalString`.
+
+```js
+assert.exists(originalString);
+```
+
+Your `originalString` variable should be a string.
+
+```js
+assert.isString(originalString);
+```
+
+You should assign the string `"I love cats."` to the `originalString` variable.
+
+```js
+assert.equal(originalString, "I love cats.");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,47 @@
+---
+id: 68e42b62d7093345c6975f22
+title: Step 2
+challengeType: 1
+dashedName: step-2
+---
+
+# --description--
+
+Below your `originalString` variable, add a `console.log()` with the string `"Original string:"`. 
+
+Then below that `console.log()`, add another `console.log()` with the `originalString` variable. 
+
+# --before-each--
+
+```js
+const spy = __helpers.spyOn(console, 'log');
+const getLogs = () => spy.calls.map(call => call?.[0]);
+```
+
+# --hints--
+
+You should log the string `"Original string:"` to the console.
+
+```js
+assert.equal(getLogs()[0], "Original string:");
+```
+
+You should log the `originalString` variable to the console. 
+
+```js
+const codeWithoutComments = __helpers.removeJSComments(code);
+const loggingOriginalStr = codeWithoutComments.match(/console\.log\(\s*originalString\s*\)/g)
+
+assert.isAtLeast(loggingOriginalStr.length, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const originalString = "I love cats.";
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,56 @@
+---
+id: 68e42de6396f5c49d90d1951
+title: Step 3
+challengeType: 1
+dashedName: step-3
+---
+
+# --description--
+
+In a prior lesson, you learned about the `replace()` method which is used locate a substring in a string and replace it with another value.
+
+Here is an example:
+
+```js
+const text = "I love JavaScript!";
+const newText = text.replace("JavaScript", "coding");
+// Result: "I love coding!"
+```
+
+Remember that strings are immutable which means the original `text` is not modified in that example. A new string is created instead. 
+
+Create a new variable called `replacedString` and assign it `originalString.replace("cats", "dogs")`. 
+
+# --hints--
+
+You should have a variable called `replacedString`.
+
+```js
+assert.exists(replacedString);
+```
+
+Your `replacedString` variable should be a string.
+
+```js
+assert.isString(replacedString);
+```
+
+You should assign `originalString.replace("cats", "dogs")` to the `replacedString` variable.
+
+```js
+assert.equal(replacedString, "I love dogs.");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const originalString = "I love cats.";
+console.log("Original string:");
+console.log(originalString);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,55 @@
+---
+id: 68e43e884ef09d4d2ab05631
+title: Step 4
+challengeType: 1
+dashedName: step-4
+---
+
+# --description--
+
+Now it is time to see the result from using the `replace()` method.
+
+Start by adding a `console.log()` with the value `"After using the replace() method:"`.
+
+Then below that `console.log()`, add another `console.log()` with the `replacedString` variable.
+
+Take a look at the console and you should see that the new sentence says `"I love dogs."` instead of the original `"I love cats."`.
+
+# --before-each--
+
+```js
+const spy = __helpers.spyOn(console, 'log');
+const getLogs = () => spy.calls.map(call => call?.[0]);
+```
+
+# --hints--
+
+You should log `"After using the replace() method:"` to the console.
+
+```js
+assert.equal(getLogs()[2], "After using the replace() method:");
+```
+
+You should log the `replacedString` variable to the console. 
+
+```js
+const codeWithoutComments = __helpers.removeJSComments(code);
+const loggingReplacedStr = codeWithoutComments.match(/console\.log\(\s*replacedString\s*\)/g)
+
+assert.isAtLeast(loggingReplacedStr.length, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const originalString = "I love cats.";
+console.log("Original string:");
+console.log(originalString);
+
+--fcc-editable-region--
+const replacedString = originalString.replace("cats", "dogs");
+
+--fcc-editable-region--
+```
@@ -0,0 +1,74 @@
+---
+id: 68e43f94365a964f26c88f78
+title: Step 5
+challengeType: 1
+dashedName: step-5
+---
+
+# --description--
+
+Now it is time to work with a new string method. 
+
+Start by creating a new variable called `exampleSentence` and assign it the string `"I love cats and cats are so much fun!"`.
+
+Then below that variable, log to the console `"Original sentence:"`. Then below that `console.log()`, add another `console.log()` with the `exampleSentence` variable. 
+
+# --before-each--
+
+```js
+const spy = __helpers.spyOn(console, 'log');
+const getLogs = () => spy.calls.map(call => call?.[0]);
+```
+
+# --hints--
+
+You should have an `exampleSentence` variable.
+
+```js
+assert.exists(exampleSentence);
+```
+
+Your `exampleSentence` variable should be a string.
+
+```js
+assert.isString(exampleSentence);
+```
+
+You should assign the string `"I love cats and cats are so much fun!"` to the `exampleSentence` variable.
+
+```js
+assert.equal(exampleSentence, "I love cats and cats are so much fun!");
+```
+
+You should log `"Original sentence:"` to the console.
+
+```js
+assert.equal(getLogs()[4], "Original sentence:");
+```
+
+You should log the `exampleSentence` variable to the console.
+
+```js
+const codeWithoutComments = __helpers.removeJSComments(code);
+const loggingExSentence = codeWithoutComments.match(/console\.log\(\s*exampleSentence\s*\)/g)
+
+assert.isAtLeast(loggingExSentence.length, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const originalString = "I love cats.";
+console.log("Original string:");
+console.log(originalString);
+
+const replacedString = originalString.replace("cats", "dogs");
+console.log("After using the replace() method:");
+console.log(replacedString);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,78 @@
+---
+id: 68e4417b7317835208145323
+title: Step 6
+challengeType: 1
+dashedName: step-6
+---
+
+# --description--
+
+Next, create a new variable called `dogsOnlySentence` and assign it `exampleSentence.replace("cats", "dogs")`.
+
+Then below that variable, log to the console `"Replacing all occurrences of cats with dogs:"`. Below that `console.log()`, add another `console.log()` for the `dogsOnlySentence` variable. 
+
+You should now see the text `"I love dogs and cats are so much fun!"` logged to the console. But that isn't the desired result. In the next step, you will learn how to fix it so the text reads `"I love dogs and dogs are so much fun!"`.
+
+# --before-each--
+
+```js
+const spy = __helpers.spyOn(console, 'log');
+const getLogs = () => spy.calls.map(call => call?.[0]);
+```
+
+# --hints--
+
+You should have a `dogsOnlySentence` variable.
+
+```js
+assert.exists(dogsOnlySentence);
+```
+
+Your `dogsOnlySentence` variable should be a string.
+
+```js
+assert.isString(dogsOnlySentence);
+```
+
+You should assign `exampleSentence.replace("cats", "dogs")` to your `dogsOnlySentence` variable.
+
+```js
+assert.equal(dogsOnlySentence, "I love dogs and cats are so much fun!");
+```
+
+You should log `"Replacing all occurrences of cats with dogs:"` to the console.
+
+```js
+assert.equal(getLogs()[6], "Replacing all occurrences of cats with dogs:");
+```
+
+You should log the `dogsOnlySentence` variable to the console.
+
+```js
+const codeWithoutComments = __helpers.removeJSComments(code);
+const loggingDogsOnlySentence = codeWithoutComments.match(/console\.log\(\s*dogsOnlySentence\s*\)/g)
+
+assert.isAtLeast(loggingDogsOnlySentence.length, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const originalString = "I love cats.";
+console.log("Original string:");
+console.log(originalString);
+
+const replacedString = originalString.replace("cats", "dogs");
+console.log("After using the replace() method:");
+console.log(replacedString);
+
+const exampleSentence = "I love cats and cats are so much fun!";
+console.log("Original sentence:");
+console.log(exampleSentence);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,44 @@
+---
+id: 68e44519c769bf545bb3f22a
+title: Step 7
+challengeType: 1
+dashedName: step-7
+---
+
+# --description--
+
+To get the desired output of `"I love dogs and dogs are so much fun!"`, you will need to use the `replaceAll()` method instead of the `replace()` method. This methods returns a new string for all matches to the substring. 
+
+Update the `exampleSentence.replace("cats", "dogs")` to use the `replaceAll()` method instead. Now you should see the correct text in the console.
+
+# --hints--
+
+You should update the `exampleSentence.replace("cats", "dogs")` line of code to use the `replaceAll()` method.
+
+```js
+assert.equal(dogsOnlySentence, "I love dogs and dogs are so much fun!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const originalString = "I love cats.";
+console.log("Original string:");
+console.log(originalString);
+
+const replacedString = originalString.replace("cats", "dogs");
+console.log("After using the replace() method:");
+console.log(replacedString);
+
+const exampleSentence = "I love cats and cats are so much fun!";
+console.log("Original sentence:");
+console.log(exampleSentence);
+
+--fcc-editable-region--
+const dogsOnlySentence = exampleSentence.replace("cats", "dogs");
+--fcc-editable-region--
+console.log("Replacing all occurrences of cats with dogs:");
+console.log(dogsOnlySentence);
+```
@@ -0,0 +1,79 @@
+---
+id: 68e4465fba0bd256868b7deb
+title: Step 8
+challengeType: 1
+dashedName: step-8
+---
+
+# --description--
+
+Now it is time to work with a new string method.
+
+Begin by creating a variable called `learningSentence` and assign the string `"I love learning!"`. 
+
+Then below that variable, log to the console `"Original learning sentence:"`. Below that `console.log()`, add another `console.log()` for the `learningSentence` variable. 
+
+# --before-each--
+
+```js
+const spy = __helpers.spyOn(console, 'log');
+const getLogs = () => spy.calls.map(call => call?.[0]);
+```
+
+# --hints--
+
+You should have a `learningSentence` variable.
+
+```js
+assert.exists(learningSentence);
+```
+
+Your `learningSentence` variable should be a string.
+
+```js
+assert.isString(learningSentence);
+```
+
+You should assign the string `"I love learning!"` to the `learningSentence` variable.
+
+```js
+assert.equal(learningSentence, "I love learning!");
+```
+
+You should log `"Original learning sentence:"` to the console.
+
+```js
+assert.equal(getLogs()[8], "Original learning sentence:");
+```
+
+You should log the `learningSentence` variable to the console.
+
+```js
+assert.equal(getLogs()[9], learningSentence);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const originalString = "I love cats.";
+console.log("Original string:");
+console.log(originalString);
+
+const replacedString = originalString.replace("cats", "dogs");
+console.log("After using the replace() method:");
+console.log(replacedString);
+
+const exampleSentence = "I love cats and cats are so much fun!";
+console.log("Original sentence:");
+console.log(exampleSentence);
+
+const dogsOnlySentence = exampleSentence.replaceAll("cats", "dogs");
+console.log("Replacing all occurrences of cats with dogs:");
+console.log(dogsOnlySentence);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,86 @@
+---
+id: 68e448ec4ac4205968c0a805
+title: Step 9
+challengeType: 1
+dashedName: step-9
+---
+
+# --description--
+
+It would be nice if the word `"love"` were repeated three times in the sentence `"I love learning!"`. 
+
+As you recall in a prior lesson, you can repeat a string a specific number of times using the `repeat()` method. Here is an example:
+
+```js
+const word = "Hello!";
+const repeatedWord = word.repeat(3);
+
+console.log(repeatedWord);  // "Hello!Hello!Hello!"
+```
+
+Since strings are immutable, this method will not modify the original string. It will return a new string with the repeated content. 
+
+Create a variable called `repeatedLove` and assign it `"love ".repeat(3)`. Then log to the console the `repeatedLove` variable so you can see the result. 
+
+# --before-each--
+
+```js
+const spy = __helpers.spyOn(console, 'log');
+const getLogs = () => spy.calls.map(call => call?.[0]);
+```
+
+# --hints--
+
+You should have a variable called `repeatedLove`.
+
+```js
+assert.exists(repeatedLove);
+```
+
+Your `repeatedLove` variable should be a string.
+
+```js
+assert.isString(repeatedLove);
+```
+
+You should assign `"love ".repeat(3)` to the `repeatedLove` variable.
+
+```js
+assert.equal(repeatedLove, "love ".repeat(3));
+```
+
+You should log the `repeatedLove` variable to the console.
+
+```js
+assert.equal(getLogs()[10], repeatedLove);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const originalString = "I love cats.";
+console.log("Original string:");
+console.log(originalString);
+
+const replacedString = originalString.replace("cats", "dogs");
+console.log("After using the replace() method:");
+console.log(replacedString);
+
+const exampleSentence = "I love cats and cats are so much fun!";
+console.log("Original sentence:");
+console.log(exampleSentence);
+
+const dogsOnlySentence = exampleSentence.replaceAll("cats", "dogs");
+console.log("Replacing all occurrences of cats with dogs:");
+console.log(dogsOnlySentence);
+
+const learningSentence = "I love learning!";
+console.log("Original learning sentence:");
+console.log(learningSentence);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,73 @@
+---
+id: 68e44abea678a65b877864dc
+title: Step 10
+challengeType: 1
+dashedName: step-10
+---
+
+# --description--
+
+It would be nice to see that repeated word in a sentence. Create a new variable called `newSentence` and assign it the result of concatenating the word `"I "` with the `repeatedLove` variable followed by concatenating the string `" learning."`. Then log the `newSentence` variable to the console. You can choose to use either the `+` operator or template literals for the string concatenation. 
+
+Now you should see the text `"I love love love  learning."`. 
+
+*NOTE*: There is an extra space after the last `"love"` which is correct. In the last step, you will trim that extra space. 
+
+# --hints--
+
+You should have a variable called `newSentence`.
+
+```js
+assert.exists(newSentence);
+```
+
+Your `newSentence` variable should be a string.
+
+```js
+assert.isString(newSentence);
+```
+
+You should concatenate the word `"I "` with the `repeatedLove` variable followed by concatenating the string `" learning."`. This result should be assigned to the `newSentence` variable. Be careful about spacing. 
+
+```js
+assert.equal(newSentence, `I ${repeatedLove} learning.`);
+```
+
+You should NOT assign the literal string `"I love love love  learning."` to the `newSentence` variable. Please re read through the instructions for the correct approach.
+
+```js
+assert.notMatch(code, /(["'])I\s+love\s+love\s+love\s+\s+learning.(["'])/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const originalString = "I love cats.";
+console.log("Original string:");
+console.log(originalString);
+
+const replacedString = originalString.replace("cats", "dogs");
+console.log("After using the replace() method:");
+console.log(replacedString);
+
+const exampleSentence = "I love cats and cats are so much fun!";
+console.log("Original sentence:");
+console.log(exampleSentence);
+
+const dogsOnlySentence = exampleSentence.replaceAll("cats", "dogs");
+console.log("Replacing all occurrences of cats with dogs:");
+console.log(dogsOnlySentence);
+
+const learningSentence = "I love learning!";
+console.log("Original learning sentence:");
+console.log(learningSentence);
+
+const repeatedLove = "love ".repeat(3);
+console.log(repeatedLove);
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
@@ -0,0 +1,92 @@
+---
+id: 68e44c305f1f935d949d76bb
+title: Step 11
+challengeType: 1
+dashedName: step-11
+---
+
+# --description--
+
+As mentioned in the prior step, there is an extra space after the last `"love"` in the sentence `"I love love love  learning."`. To remove that extra space, you can use the `trimEnd()` method. 
+
+At the end of the `"love ".repeat(3)` method, chain the `trimEnd()` method. You can chain methods like this:
+
+```js
+.firstMethod().secondMethod()
+```
+
+Now when you check the console, you should see that the extra space was removed.
+
+And with that last change, your workshop is complete! 
+
+# --hints--
+
+You should chain the `trimEnd()` method to the `"love ".repeat(3)` method.
+
+```js
+assert.equal(repeatedLove, "love ".repeat(3).trimEnd());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const originalString = "I love cats.";
+console.log("Original string:");
+console.log(originalString);
+
+const replacedString = originalString.replace("cats", "dogs");
+console.log("After using the replace() method:");
+console.log(replacedString);
+
+const exampleSentence = "I love cats and cats are so much fun!";
+console.log("Original sentence:");
+console.log(exampleSentence);
+
+const dogsOnlySentence = exampleSentence.replaceAll("cats", "dogs");
+console.log("Replacing all occurrences of cats with dogs:");
+console.log(dogsOnlySentence);
+
+const learningSentence = "I love learning!";
+console.log("Original learning sentence:");
+console.log(learningSentence);
+
+--fcc-editable-region--
+const repeatedLove = "love ".repeat(3)
+--fcc-editable-region--
+console.log(repeatedLove);
+
+const newSentence = `I ${repeatedLove} learning.`;
+console.log(newSentence);
+```
+
+# --solutions--
+
+```js
+const originalString = "I love cats.";
+console.log("Original string:");
+console.log(originalString);
+
+const replacedString = originalString.replace("cats", "dogs");
+console.log("After using the replace() method:");
+console.log(replacedString);
+
+const exampleSentence = "I love cats and cats are so much fun!";
+console.log("Original sentence:");
+console.log(exampleSentence);
+
+const dogsOnlySentence = exampleSentence.replaceAll("cats", "dogs");
+console.log("Replacing all occurrences of cats with dogs:");
+console.log(dogsOnlySentence);
+
+const learningSentence = "I love learning!";
+console.log("Original learning sentence:");
+console.log(learningSentence);
+
+const repeatedLove = "love ".repeat(3).trimEnd();
+console.log(repeatedLove);
+
+const newSentence = `I ${repeatedLove} learning.`;
+console.log(newSentence);
+```
@@ -0,0 +1,23 @@
+{
+  "name": "Build a String Transformer",
+  "isUpcomingChange": false,
+  "dashedName": "workshop-string-transformer",
+  "helpCategory": "JavaScript",
+  "blockLayout": "challenge-grid",
+  "challengeOrder": [
+    { "id": "68e41084bb275539f72de9fe", "title": "Step 1" },
+    { "id": "68e42b62d7093345c6975f22", "title": "Step 2" },
+    { "id": "68e42de6396f5c49d90d1951", "title": "Step 3" },
+    { "id": "68e43e884ef09d4d2ab05631", "title": "Step 4" },
+    { "id": "68e43f94365a964f26c88f78", "title": "Step 5" },
+    { "id": "68e4417b7317835208145323", "title": "Step 6" },
+    { "id": "68e44519c769bf545bb3f22a", "title": "Step 7" },
+    { "id": "68e4465fba0bd256868b7deb", "title": "Step 8" },
+    { "id": "68e448ec4ac4205968c0a805", "title": "Step 9" },
+    { "id": "68e44abea678a65b877864dc", "title": "Step 10" },
+    { "id": "68e44c305f1f935d949d76bb", "title": "Step 11" }
+  ],
+  "blockType": "workshop",
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": true
+}
@@ -294,6 +294,7 @@
            "lecture-working-with-string-search-and-slice-methods",
            "lecture-working-with-string-formatting-methods",
            "lecture-working-with-string-modification-methods",
+            "workshop-string-transformer",
            "review-javascript-strings",
            "quiz-javascript-strings"
          ]