chore(curriculum): Wrap strings in quotes in Learn Recursion by Building a Decimal to Binary Converter (#55126)

Co-authored-by: Naomi <accounts+github@nhcarrigan.com>
2026-05-28 18:26:54 +00:00 · 2024-06-26 11:38:00 +07:00
parent 0b58071f29
commit f96e9da021
26 changed files with 53 additions and 53 deletions
@@ -11,7 +11,7 @@ In this project, you'll build a decimal and binary converter and learn about bot

 All of the HTML and CSS for this project has been provided for you.

-When you're ready to get started, use the `.getElementById()` method to get the `input` element with the id `number-input`, and store it in a variable called `numberInput`. Use the same method to get the `button` element with the id `convert-btn` and store it in a variable called `convertBtn`, and the `output` element with the id `result` and store it in a variable called `result`.
+When you're ready to get started, use the `.getElementById()` method to get the `input` element with the id `"number-input"`, and store it in a variable called `numberInput`. Use the same method to get the `button` element with the id `"convert-btn"` and store it in a variable called `convertBtn`, and the `output` element with the id `"result"` and store it in a variable called `result`.


 **NOTE**: This project will only convert positive numbers into binary.
@@ -11,9 +11,9 @@ If you open your browser's console and type in the number input, you'll see even

 Since you want to perform an action when the `Enter` key is pressed, the most helpful property is `key`, which tells you the string value of the key that was pressed.

-Remove the `console.log()` statement from the callback function and add an `if` statement that checks if `e.key` is equal to the string `Enter`. Leave the body of your `if` statement empty for now.
+Remove the `console.log()` statement from the callback function and add an `if` statement that checks if `e.key` is equal to the string `"Enter"`. Leave the body of your `if` statement empty for now.

-Note: Since the `Enter` and `Return` keys have similar functions, they both have the same string value of `Enter`.
+Note: Since the `Enter` and `Return` keys have similar functions, they both have the same string value of `"Enter"`.

 # --hints--

@@ -23,7 +23,7 @@ Your callback function should not contain a `console.log()` statement.
 assert.notMatch(code, /('|"|`)keydown\1\s*,\s*(\(\s*e\s*\)|e)\s*=>\s*{\s*.*console\.log\(/);
 ```

-Your `if` statement should check if `e.key` is equal to the string `Enter`.
+Your `if` statement should check if `e.key` is equal to the string `"Enter"`.

 ```js
 assert.match(code, /if\s*\(\s*(?:e\s*\.\s*key\s*===?\s*('|"|`)Enter\1|('|"|`)Enter\2\s*===?\s*e\s*\.key)\s*\)\s*\{/);
@@ -9,7 +9,7 @@ dashedName: step-13

 Now you can alert the user if they don't enter a number, or the number is invalid before you attempt to convert it into binary.

-In the body of the `if` statement, use the `alert()` method to display the text `Please provide a decimal number greater than or equal to 0`.
+In the body of the `if` statement, use the `alert()` method to display the text `"Please provide a decimal number greater than or equal to 0"`.

 Note that `alert()` is a method on the `window` object in the browser, so you can use either `window.alert()` or `alert()`.

@@ -21,7 +21,7 @@ You should call the `alert()` method within the body of your `if` statement with
 assert.match(String(checkUserInput), /if\s*\(\s*.+\s*\)\s*\{\s*(window\s*.)?\s*alert\(/);
 ```

-When there is a falsy value in the `#number-input` element and the `checkUserInput()` function is called, the `alert()` method should display the text `Please provide a decimal number greater than or equal to 0`.
+When there is a falsy value in the `#number-input` element and the `checkUserInput()` function is called, the `alert()` method should display the text `"Please provide a decimal number greater than or equal to 0"`.

 ```js
 const numberInput = document.getElementById("number-input");
@@ -44,7 +44,7 @@ Your `decimalToBinary` function should return a string with a length of `4`.
 assert.strictEqual(decimalToBinary().length, 4);
 ```

-Your `decimalToBinary` function should return `1010` as a string.
+Your `decimalToBinary` function should return `"1010"` as a string.

 ```js
 assert.strictEqual(decimalToBinary(), '1010');
@@ -36,7 +36,7 @@ Your `decimalToBinary` function should return a string with a length of `8`.
 assert.strictEqual(decimalToBinary().length, 8);
 ```

-Your `decimalToBinary` function should return `01110110` as a string.
+Your `decimalToBinary` function should return `"01110110"` as a string.

 ```js
 assert.strictEqual(decimalToBinary(), '01110110');
@@ -9,11 +9,11 @@ dashedName: step-31

 Now's a good time to check your work.

-Log the text `Inputs: `, followed by a comma, followed by the `inputs` array to the console.
+Log the text `"Inputs: "`, followed by a comma, followed by the `inputs` array to the console.

 # --hints--

-You should log the text `Inputs: ` and the `inputs` array to the console, separated by a comma.
+You should log the text `"Inputs: "` and the `inputs` array to the console, separated by a comma.

 ```js
 assert.match(String(decimalToBinary), /console\.log\(\s*('|"|`)Inputs:\s*\1\s*,\s*inputs\s*\)/i);
@@ -7,17 +7,17 @@ dashedName: step-32

 # --description--

-Next, log the text `Quotients: `, followed by a comma, followed by the `quotients` array to the console. Also, log the text `Remainders: `, followed by a comma, followed by the `remainders` array.
+Next, log the text `"Quotients: "`, followed by a comma, followed by the `quotients` array to the console. Also, log the text `"Remainders: "`, followed by a comma, followed by the `remainders` array.

 # --hints--

-You should log the text `Quotients: ` and the `quotients` array to the console, separated by a comma.
+You should log the text `"Quotients: "` and the `quotients` array to the console, separated by a comma.

 ```js
 assert.match(String(decimalToBinary), /console\.log\(\s*('|"|`)Quotients:\s*\1\s*,\s*quotients\s*\)/i);
 ```

-You should log the text `Remainders: ` and the `remainders` array to the console, separated by a comma.
+You should log the text `"Remainders: "` and the `remainders` array to the console, separated by a comma.

 ```js
 assert.match(String(decimalToBinary), /console\.log\(\s*('|"|`)Remainders:\s*\1\s*,\s*remainders\s*\)/i);
@@ -7,11 +7,11 @@ dashedName: step-35

 # --description--

-Within the body of the `if` statement, set the `innerText` property of `result` equal to the string `0`. Then, use an early `return` statement to break out of the function early.
+Within the body of the `if` statement, set the `innerText` property of `result` equal to the string `"0"`. Then, use an early `return` statement to break out of the function early.

 # --hints--

-You should set the `innerText` property of `result` equal to the string `0`.
+You should set the `innerText` property of `result` equal to the string `"0"`.

 ```js
 assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{\s*result\.innerText\s*=\s*('|"|`)\s*0\s*\1/);
@@ -19,7 +19,7 @@ You should add an `if` statement that checks if `input` is equal to `0`.
 assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{?/);
 ```

-In the body of your `if` statement, you should set `binary` equal to the string `0`.
+In the body of your `if` statement, you should set `binary` equal to the string `"0"`.

 ```js
 assert.match(String(decimalToBinary), /if\s*\(\s*input\s*===?\s*0\s*\)\s*\{?\s*binary\s*=\s*('|"|`)0\1\s*;?\s*\}?/);
@@ -7,11 +7,11 @@ dashedName: step-63

 # --description--

-In your base case, log `Reached base case` to the console.
+In your base case, log `"Reached base case"` to the console.

 # --hints--

-You should log `Reached base case` to the console in your base case.
+You should log `"Reached base case"` to the console in your base case.

 ```js
 assert.match(String(countDownAndUp), /if\s*\(\s*number\s*===?\s*0\s*\)\s*\{\s*console\.log\(\s*('|"|`)\s*Reached base case\s*\1\s*\)\s*;?\s*return\s*;?\s*\}/i);
@@ -9,7 +9,7 @@ dashedName: step-48

 When your code runs, the `a()` function is added to the call stack first.

-In your `callStack` array, add the following string: `a(): returns "freeCodeCamp " + b()`. This represents the function call and the code that will be executed.
+In your `callStack` array, add the following string: `"a(): returns 'freeCodeCamp ' + b()"`. This represents the function call and the code that will be executed.

 Note: Since the string you're adding includes double quotation marks, wrap it in single quotation marks (`'`) or backticks (`).

@@ -22,7 +22,7 @@ assert.lengthOf(callStack, 1);
 assert.isString(callStack[0]);
 ```

-The string in `callStack` should be the string `a(): returns "freeCodeCamp " + b()`.
+The string in `callStack` should be the string `"a(): returns 'freeCodeCamp ' + b()"`.

 ```js
 assert.match(callStack[0], /a\(\s*\):\s*returns\s*('|"|`)freeCodeCamp\s*\1\s*\+\s*b\s*\(\s*\)/);
@@ -9,7 +9,7 @@ dashedName: step-49

 Then, since `a()` calls `b()`, the function `b()` is added to the call stack.

-Next, add the following string to your `callStack` array: `b(): returns "is " + c()`.
+Next, add the following string to your `callStack` array: `"b(): returns 'is ' + c()"`.

 Remember that the call stack is a LIFO data structure, so the last function is added to the top or end of the stack, similar to pushing an element into an array.

@@ -22,7 +22,7 @@ assert.lengthOf(callStack, 2);
 assert.isTrue(callStack.every((element) => typeof element === "string"));
 ```

-The second element in `callStack` should be the string `b(): returns "is " + c()`.
+The second element in `callStack` should be the string `"b(): returns 'is ' + c()"`.

 ```js
 assert.match(
@@ -9,7 +9,7 @@ dashedName: step-50

 And since `b()` calls `c()`, the function `c()` is added to the call stack.

-Add the following string to your `callStack` array: `c(): returns "awesome!"`.
+Add the following string to your `callStack` array: `"c(): returns 'awesome!'"`.

 # --hints--

@@ -20,7 +20,7 @@ assert.lengthOf(callStack, 3);
 assert.isTrue(callStack.every((element) => typeof element === "string"));
 ```

-The third element in `callStack` should be the string `c(): returns "awesome!"`.
+The third element in `callStack` should be the string `"c(): returns 'awesome!'"`.

 ```js
 assert.match(
@@ -11,7 +11,7 @@ Your call stack is complete. As you can see, `a()` is at the bottom or beginning

 `c()` executes, returns the string `"awesome!"`, and is popped off or removed from the top of the stack.

-Remove your `c(): returns "awesome!"` string from the top of the `callStack` array.
+Remove your `"c(): returns 'awesome!'"` string from the top of the `callStack` array.

 # --hints--

@@ -22,7 +22,7 @@ assert.lengthOf(callStack, 2);
 assert.isTrue(callStack.every((element) => typeof element === "string"));
 ```

-The final element in `callStack` should be the string `b(): returns "is " + c()`.
+The final element in `callStack` should be the string `"b(): returns 'is ' + c()"`.

 ```js
 assert.match(
@@ -9,7 +9,7 @@ dashedName: step-52

 Then the function `b()` executes and evaluates to `"is " + "awesome!"`.

-Update your mock call to `b()` so it looks like this: `b(): returns "is " + "awesome!"`.
+Update your mock call to `b()` so it looks like this: `"b(): returns 'is ' + 'awesome!'"`.

 # --hints--

@@ -20,7 +20,7 @@ assert.lengthOf(callStack, 2);
 assert.isTrue(callStack.every((element) => typeof element === "string"));
 ```

-The final element in `callStack` should be the string `b(): returns "is " + "awesome!"`.
+The final element in `callStack` should be the string `"b(): returns 'is ' + 'awesome!'"`.

 ```js
 assert.match(
@@ -7,7 +7,7 @@ dashedName: step-53

 # --description--

-Now that `b()` has executed, pop it off the call stack. Then, update your mock call to `a()` to the following: `a(): returns "freeCodeCamp " + "is awesome!"`.
+Now that `b()` has executed, pop it off the call stack. Then, update your mock call to `a()` to the following: `"a(): returns 'freeCodeCamp ' + 'is awesome!'"`.

 # --hints--

@@ -18,7 +18,7 @@ assert.lengthOf(callStack, 1);
 assert.isString(callStack[0]);
 ```

-The string in `callStack` should be the string `a(): returns "freeCodeCamp " + "is awesome!"`.
+The string in `callStack` should be the string `"a(): returns 'freeCodeCamp ' + 'is awesome!'"`.

 ```js
 assert.match(
@@ -9,23 +9,23 @@ dashedName: step-79

 Now that your `showAnimation()` function is set up, let's do some testing.

-Add three `console.log()` statements in the `showAnimation()` function to log the text `free`, `Code`, and `Camp` to the console. You should see that text in the console when you enter `5` into the number input and click the `Convert` button.
+Add three `console.log()` statements in the `showAnimation()` function to log the text `"free"`, `"Code"`, and `"Camp"` to the console. You should see that text in the console when you enter `5` into the number input and click the `Convert` button.

 # --hints--

-You should add a `console.log()` statement for the string `free`.
+You should add a `console.log()` statement for the string `"free"`.

 ```js
 assert.match(String(showAnimation), /console\.log\(\s*('|"|`)\s*free\s*\1\s*\)/i);
 ```

-You should add a `console.log()` statement for the string `Code`.
+You should add a `console.log()` statement for the string `"Code"`.

 ```js
 assert.match(String(showAnimation), /console\.log\(\s*('|"|`)\s*Code\s*\1\s*\)/i);
 ```

-You should add a `console.log()` statement for the string `Camp`.
+You should add a `console.log()` statement for the string `"Camp"`.

 ```js
 assert.match(String(showAnimation), /console\.log\(\s*('|"|`)\s*Camp\s*\1\s*\)/i);
@@ -11,7 +11,7 @@ Before you start writing code for the animation, let's take a look at the functi

 The `setTimeout` function takes two arguments: a callback function and a number representing the time in milliseconds to wait before executing the callback function.

-For example, if you wanted to log `Hello, world!` to the console after `3` seconds, you would write:
+For example, if you wanted to log `"Hello, world!"` to the console after `3` seconds, you would write:

 ```js
 setTimeout(() => {
@@ -19,7 +19,7 @@ setTimeout(() => {
 }, 3000);
 ```

-Use the `setTimeout` function to add a one second delay before the text `Code` is logged to the console. Then see what happens after you enter `5` into the number input and click the `Convert` button.
+Use the `setTimeout` function to add a one second delay before the text `"Code"` is logged to the console. Then see what happens after you enter `5` into the number input and click the `Convert` button.

 # --hints--

@@ -35,7 +35,7 @@ You should pass a callback function as the first argument to the `setTimeout` fu
 assert.match(code, /setTimeout\(\s*\(\s*\)\s*=>\s*\{?|setTimeout\(\s*function\s*\(\s*\)\s*\{/);
 ```

-Within the callback function, you should log the text `Code` to the console.
+Within the callback function, you should log the text `"Code"` to the console.

 ```js
 assert.match(code, /setTimeout\(\s*\(\s*\)\s*=>\s*\{?\s*console\.log\(\s*('|"|`)\s*Code\s*\1\s*\)|setTimeout\(\s*function\s*\(\s*\)\s*\{\s*console\.log\(\s*('|"|`)\s*Code\s*\2\s*\)/i);
@@ -7,7 +7,7 @@ dashedName: step-81

 # --description--

-If you test your code, you'll notice that your console logs are not in the expected order. Instead of logging `free`, pausing for a second before logging `Code`, and finally logging `Camp`, you'll see this:
+If you test your code, you'll notice that your console logs are not in the expected order. Instead of logging `"free"`, pausing for a second before logging `"Code"`, and finally logging `"Camp"`, you'll see this:

 ```md
 free
@@ -39,7 +39,7 @@ assert.lengthOf(
 );
 ```

-Within the new `setTimeout()` function's callback, you should log the text `free` to the console.
+Within the new `setTimeout()` function's callback, you should log the text `"free"` to the console.

 ```js
 assert.match(code, /setTimeout\(\s*\(\s*\)\s*=>\s*\{?\s*console\.log\(\s*('|"|`)\s*free\s*\1\s*\)|setTimeout\(\s*function\s*\(\s*\)\s*\{\s*console\.log\(\s*('|"|`)\s*free\s*\2\s*\)/i);
@@ -15,7 +15,7 @@ Async code works in a similar way. You can start an async operation and other pa

 You'll learn more about async code in future projects, but the `setTimeout()` function is a good introduction.

-Add a `1500` millisecond delay before the text `Camp` is logged to the console.
+Add a `1500` millisecond delay before the text `"Camp"` is logged to the console.

 # --hints--

@@ -9,17 +9,17 @@ dashedName: step-89

 Now you'll start building the animation itself.

-First, set the `innerText` property of `result` to `Call Stack Animation`.
+First, set the `innerText` property of `result` to `"Call Stack Animation"`.

 # --hints--

-You should set the `innerText` property of `result` to the string `Call Stack Animation`.
+You should set the `innerText` property of `result` to the string `"Call Stack Animation"`.

 ```js
 assert.match(String(showAnimation), /result\.innerText\s*=\s*('|"|`)Call Stack Animation\1/i);
 ```

-After calling the `showAnimation` function, the `innerText` property of `result` should be `Call Stack Animation`.
+After calling the `showAnimation` function, the `innerText` property of `result` should be `"Call Stack Animation"`.

 ```js
 const result = document.getElementById("result");
@@ -9,7 +9,7 @@ dashedName: step-95

 Now you'll add a top margin to the paragraph element.

-Add a `style` attribute to the paragraph element and use string interpolation to set the value to `margin-top: ${currMarginTop}px;`, where `currMarginTop` is the `marginTop` property of the current object.
+Add a `style` attribute to the paragraph element and use string interpolation to set the value to `"margin-top: ${currMarginTop}px;"`, where `currMarginTop` is the `marginTop` property of the current object.

 # --hints--

@@ -22,7 +22,7 @@ assert.match(
 );
 ```

-You should use string interpolation to set the value of the `style` attribute to `margin-top: ${obj.marginTop}px;`.
+You should use string interpolation to set the value of the `style` attribute to `"margin-top: ${obj.marginTop}px;"`.

 ```js
 assert.match(
@@ -7,7 +7,7 @@ dashedName: step-96

 # --description--

-Add a `class` attribute set to `animation-frame`.
+Add a `class` attribute set to `"animation-frame"`.

 # --hints--

@@ -20,7 +20,7 @@ assert.match(
 );
 ```

-You should set the value of the `class` attribute to `animation-frame`.
+You should set the value of the `class` attribute to `"animation-frame"`.

 ```js
 assert.match(
@@ -10,7 +10,7 @@ dashedName: step-99
 Set the value of the `msg` property to the following string:

 ```md
-decimalToBinary(1) returns "1" (base case) and gives that value to the stack below. Then it pops off the stack.
+"decimalToBinary(1) returns '1' (base case) and gives that value to the stack below. Then it pops off the stack."
 ```

 Note that, since the string itself contains double quotation marks, you'll need to escape them with a backslash, or use single quotation marks for your string value.
@@ -26,7 +26,7 @@ assert.property(
 )
 ```

-You should set the value of the `msg` property to `decimalToBinary(1) returns "1" (base case) and gives that value to the stack below. Then it pops off the stack.`
+You should set the value of the `msg` property to `"decimalToBinary(1) returns '1' (base case) and gives that value to the stack below. Then it pops off the stack."`

 ```js
 assert.match(
@@ -10,7 +10,7 @@ dashedName: step-101
 For the object in the middle of the stack, add the property `msg` set to the following string:

 ```md
-decimalToBinary(2) returns "1" + 0 (2 % 2) and gives that value to the stack below. Then it pops off the stack.
+"decimalToBinary(2) returns '1' + 0 (2 % 2) and gives that value to the stack below. Then it pops off the stack."
 ```

 Also, add the property `showMsgDelay` set to `10000` and the property `removeElDelay` set to `15000`.
@@ -26,7 +26,7 @@ assert.property(
 )
 ```

-You should set the value of the `msg` property to `decimalToBinary(2) returns "1" + 0 (2 % 2) and gives that value to the stack below. Then it pops off the stack.`
+You should set the value of the `msg` property to `"decimalToBinary(2) returns '1' + 0 (2 % 2) and gives that value to the stack below. Then it pops off the stack."`

 ```js
 assert.match(
@@ -10,7 +10,7 @@ dashedName: step-102
 For the last animation object, add the property `msg` set to the following string:

 ```md
-decimalToBinary(5) returns "10" + 1 (5 % 2). Then it pops off the stack.
+"decimalToBinary(5) returns '10' + 1 (5 % 2). Then it pops off the stack."
 ```

 Also, add the property `showMsgDelay` set to `15000` and the property `removeElDelay` set to `20000`.
@@ -26,7 +26,7 @@ assert.property(
 )
 ```

-You should set the value of the `msg` property to `decimalToBinary(5) returns "10" + 1 (5 % 2). Then it pops off the stack.`
+You should set the value of the `msg` property to `"decimalToBinary(5) returns '10' + 1 (5 % 2). Then it pops off the stack."`

 ```js
 assert.match(