diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
index 64881d711f5..65296a17fec 100644
--- a/client/i18n/locales/english/intro.json
+++ b/client/i18n/locales/english/intro.json
@@ -473,6 +473,13 @@
"This will give you an opportunity to solve small problems and get a better understanding of the basics."
]
},
+ "learn-basic-debugging-by-building-a-random-background-color-changer": {
+ "title": "Learn Basic Debugging by Building a Random Background Color Changer",
+ "intro": [
+ "Debugging is the process of going through your code, finding any issues, and fixing them.",
+ "In this project, you will help CamperBot build a random background color changer and help them find and fix errors."
+ ]
+ },
"review-dom-manipulation-by-building-a-rock-paper-scissors-game": {
"title": "Review DOM Manipulation by Building a Rock, Paper, Scissors Game",
"intro": [
diff --git a/client/src/pages/learn/javascript-algorithms-and-data-structures-v8/learn-basic-debugging-by-building-a-random-background-color-changer/index.md b/client/src/pages/learn/javascript-algorithms-and-data-structures-v8/learn-basic-debugging-by-building-a-random-background-color-changer/index.md
new file mode 100644
index 00000000000..e9511a2b13c
--- /dev/null
+++ b/client/src/pages/learn/javascript-algorithms-and-data-structures-v8/learn-basic-debugging-by-building-a-random-background-color-changer/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Learn Basic Debugging by Building a Random Background Color Changer
+block: learn-basic-debugging-by-building-a-random-background-color-changer
+superBlock: javascript-algorithms-and-data-structures-v8
+---
+
+## Introduction to the Learn Basic Debugging by Building a Random Background Color Changer
+
+This is a test for the new project-based curriculum.
diff --git a/curriculum/challenges/_meta/build-a-cash-register-project/meta.json b/curriculum/challenges/_meta/build-a-cash-register-project/meta.json
index b5171d45018..2eecce03c51 100644
--- a/curriculum/challenges/_meta/build-a-cash-register-project/meta.json
+++ b/curriculum/challenges/_meta/build-a-cash-register-project/meta.json
@@ -4,7 +4,7 @@
"dashedName": "build-a-cash-register-project",
"usesMultifileEditor": true,
"helpCategory": "JavaScript",
- "order": 20,
+ "order": 21,
"time": "30 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/build-a-palindrome-checker-project/meta.json b/curriculum/challenges/_meta/build-a-palindrome-checker-project/meta.json
index ab367117a39..15d3b7b39e5 100644
--- a/curriculum/challenges/_meta/build-a-palindrome-checker-project/meta.json
+++ b/curriculum/challenges/_meta/build-a-palindrome-checker-project/meta.json
@@ -4,7 +4,7 @@
"dashedName": "build-a-palindrome-checker-project",
"usesMultifileEditor": true,
"helpCategory": "JavaScript",
- "order": 7,
+ "order": 8,
"time": "30 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/build-a-pokemon-search-app-project/meta.json b/curriculum/challenges/_meta/build-a-pokemon-search-app-project/meta.json
index 605e582716e..ad5bbc2933f 100644
--- a/curriculum/challenges/_meta/build-a-pokemon-search-app-project/meta.json
+++ b/curriculum/challenges/_meta/build-a-pokemon-search-app-project/meta.json
@@ -4,7 +4,7 @@
"dashedName": "build-a-pokemon-search-app-project",
"usesMultifileEditor": true,
"helpCategory": "JavaScript",
- "order": 23,
+ "order": 24,
"time": "30 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/build-a-roman-numeral-converter-project/meta.json b/curriculum/challenges/_meta/build-a-roman-numeral-converter-project/meta.json
index 350e84019fc..5b77d341b60 100644
--- a/curriculum/challenges/_meta/build-a-roman-numeral-converter-project/meta.json
+++ b/curriculum/challenges/_meta/build-a-roman-numeral-converter-project/meta.json
@@ -4,7 +4,7 @@
"dashedName": "build-a-roman-numeral-converter-project",
"usesMultifileEditor": true,
"helpCategory": "JavaScript",
- "order": 11,
+ "order": 12,
"time": "30 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/build-a-telephone-number-validator-project/meta.json b/curriculum/challenges/_meta/build-a-telephone-number-validator-project/meta.json
index 697ff058dfb..ca924613442 100644
--- a/curriculum/challenges/_meta/build-a-telephone-number-validator-project/meta.json
+++ b/curriculum/challenges/_meta/build-a-telephone-number-validator-project/meta.json
@@ -4,7 +4,7 @@
"dashedName": "build-a-telephone-number-validator-project",
"usesMultifileEditor": true,
"helpCategory": "JavaScript",
- "order": 16,
+ "order": 17,
"time": "30 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-advanced-array-methods-by-building-a-statistics-calculator/meta.json b/curriculum/challenges/_meta/learn-advanced-array-methods-by-building-a-statistics-calculator/meta.json
index 3cf7858e94f..c05631aaa4c 100644
--- a/curriculum/challenges/_meta/learn-advanced-array-methods-by-building-a-statistics-calculator/meta.json
+++ b/curriculum/challenges/_meta/learn-advanced-array-methods-by-building-a-statistics-calculator/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-advanced-array-methods-by-building-a-statistics-calculator",
"helpCategory": "JavaScript",
- "order": 14,
+ "order": 15,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/meta.json b/curriculum/challenges/_meta/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/meta.json
index 2df0a198d79..3fd7eb2c9d5 100644
--- a/curriculum/challenges/_meta/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/meta.json
+++ b/curriculum/challenges/_meta/learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-asynchronous-programming-by-building-an-fcc-forum-leaderboard",
"helpCategory": "JavaScript",
- "order": 22,
+ "order": 23,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-basic-algorithmic-thinking-by-building-a-number-sorter/meta.json b/curriculum/challenges/_meta/learn-basic-algorithmic-thinking-by-building-a-number-sorter/meta.json
index c1a8422d7cb..63a601d3ada 100644
--- a/curriculum/challenges/_meta/learn-basic-algorithmic-thinking-by-building-a-number-sorter/meta.json
+++ b/curriculum/challenges/_meta/learn-basic-algorithmic-thinking-by-building-a-number-sorter/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-basic-algorithmic-thinking-by-building-a-number-sorter",
"helpCategory": "JavaScript",
- "order": 13,
+ "order": 14,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-basic-debugging-by-building-a-random-background-color-changer/meta.json b/curriculum/challenges/_meta/learn-basic-debugging-by-building-a-random-background-color-changer/meta.json
new file mode 100644
index 00000000000..f06ad57c664
--- /dev/null
+++ b/curriculum/challenges/_meta/learn-basic-debugging-by-building-a-random-background-color-changer/meta.json
@@ -0,0 +1,48 @@
+{
+ "name": "Learn Basic Debugging by Building a Random Background Color Changer",
+ "isUpcomingChange": false,
+ "usesMultifileEditor": true,
+ "hasEditableBoundaries": true,
+ "dashedName": "learn-basic-debugging-by-building-a-random-background-color-changer",
+ "order": 3,
+ "time": "5 hours",
+ "template": "",
+ "required": [],
+ "superBlock": "javascript-algorithms-and-data-structures-v8",
+ "superOrder": 4,
+ "challengeOrder": [
+ {
+ "id": "6650c9a94d6e13d14a043a69",
+ "title": "Step 1"
+ },
+ {
+ "id": "66323433f931ca32305a11f5",
+ "title": "Step 2"
+ },
+ {
+ "id": "663250b42513ef5975599c49",
+ "title": "Step 3"
+ },
+ {
+ "id": "663255f28c59315db74d137b",
+ "title": "Step 4"
+ },
+ {
+ "id": "66325a250690a3612c1db0f6",
+ "title": "Step 5"
+ },
+ {
+ "id": "663260de72634166b0800fe9",
+ "title": "Step 6"
+ },
+ {
+ "id": "66326637df347d6ae9928853",
+ "title": "Step 7"
+ },
+ {
+ "id": "66326913b729e16dd0127a36",
+ "title": "Step 8"
+ }
+ ],
+ "helpCategory": "JavaScript"
+}
\ No newline at end of file
diff --git a/curriculum/challenges/_meta/learn-basic-oop-by-building-a-shopping-cart/meta.json b/curriculum/challenges/_meta/learn-basic-oop-by-building-a-shopping-cart/meta.json
index 624886b76a2..18272255a12 100644
--- a/curriculum/challenges/_meta/learn-basic-oop-by-building-a-shopping-cart/meta.json
+++ b/curriculum/challenges/_meta/learn-basic-oop-by-building-a-shopping-cart/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-basic-oop-by-building-a-shopping-cart",
"helpCategory": "JavaScript",
- "order": 17,
+ "order": 18,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json b/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json
index c7e6c9be190..0b7f7ccacd8 100644
--- a/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json
+++ b/curriculum/challenges/_meta/learn-basic-string-and-array-methods-by-building-a-music-player/meta.json
@@ -4,7 +4,7 @@
"usesMultifileEditor": true,
"hasEditableBoundaries": true,
"dashedName": "learn-basic-string-and-array-methods-by-building-a-music-player",
- "order": 5,
+ "order": 6,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-fetch-and-promises-by-building-an-fcc-authors-page/meta.json b/curriculum/challenges/_meta/learn-fetch-and-promises-by-building-an-fcc-authors-page/meta.json
index c2bc4cac1de..5f30bfc26ab 100644
--- a/curriculum/challenges/_meta/learn-fetch-and-promises-by-building-an-fcc-authors-page/meta.json
+++ b/curriculum/challenges/_meta/learn-fetch-and-promises-by-building-an-fcc-authors-page/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-fetch-and-promises-by-building-an-fcc-authors-page",
"helpCategory": "JavaScript",
- "order": 21,
+ "order": 22,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-form-validation-by-building-a-calorie-counter/meta.json b/curriculum/challenges/_meta/learn-form-validation-by-building-a-calorie-counter/meta.json
index f2ead9b484a..ed8da33c34a 100644
--- a/curriculum/challenges/_meta/learn-form-validation-by-building-a-calorie-counter/meta.json
+++ b/curriculum/challenges/_meta/learn-form-validation-by-building-a-calorie-counter/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-form-validation-by-building-a-calorie-counter",
"helpCategory": "JavaScript",
- "order": 3,
+ "order": 4,
"time": "2 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-functional-programming-by-building-a-spreadsheet/meta.json b/curriculum/challenges/_meta/learn-functional-programming-by-building-a-spreadsheet/meta.json
index aa753477b5a..f1dffa7ee4d 100644
--- a/curriculum/challenges/_meta/learn-functional-programming-by-building-a-spreadsheet/meta.json
+++ b/curriculum/challenges/_meta/learn-functional-programming-by-building-a-spreadsheet/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-functional-programming-by-building-a-spreadsheet",
"helpCategory": "JavaScript",
- "order": 15,
+ "order": 16,
"time": "2 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json b/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json
index de931807f6f..e638e682667 100644
--- a/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json
+++ b/curriculum/challenges/_meta/learn-intermediate-algorithmic-thinking-by-building-a-dice-game/meta.json
@@ -4,7 +4,7 @@
"usesMultifileEditor": true,
"hasEditableBoundaries": true,
"dashedName": "learn-intermediate-algorithmic-thinking-by-building-a-dice-game",
- "order": 19,
+ "order": 20,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-intermediate-oop-by-building-a-platformer-game/meta.json b/curriculum/challenges/_meta/learn-intermediate-oop-by-building-a-platformer-game/meta.json
index f5e4076eabd..52661c23af7 100644
--- a/curriculum/challenges/_meta/learn-intermediate-oop-by-building-a-platformer-game/meta.json
+++ b/curriculum/challenges/_meta/learn-intermediate-oop-by-building-a-platformer-game/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-intermediate-oop-by-building-a-platformer-game",
"helpCategory": "JavaScript",
- "order": 18,
+ "order": 19,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json b/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json
index a8a1977cf07..3fb8b08c2c7 100644
--- a/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json
+++ b/curriculum/challenges/_meta/learn-localstorage-by-building-a-todo-app/meta.json
@@ -4,7 +4,7 @@
"usesMultifileEditor": true,
"hasEditableBoundaries": true,
"dashedName": "learn-localstorage-by-building-a-todo-app",
- "order": 9,
+ "order": 10,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-modern-javascript-methods-by-building-football-team-cards/meta.json b/curriculum/challenges/_meta/learn-modern-javascript-methods-by-building-football-team-cards/meta.json
index 609affd2cfa..53eaf4cdde4 100644
--- a/curriculum/challenges/_meta/learn-modern-javascript-methods-by-building-football-team-cards/meta.json
+++ b/curriculum/challenges/_meta/learn-modern-javascript-methods-by-building-football-team-cards/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-modern-javascript-methods-by-building-football-team-cards",
"helpCategory": "JavaScript",
- "order": 8,
+ "order": 9,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-recursion-by-building-a-decimal-to-binary-converter/meta.json b/curriculum/challenges/_meta/learn-recursion-by-building-a-decimal-to-binary-converter/meta.json
index cf0a6eb1f80..dd8b1b64f81 100644
--- a/curriculum/challenges/_meta/learn-recursion-by-building-a-decimal-to-binary-converter/meta.json
+++ b/curriculum/challenges/_meta/learn-recursion-by-building-a-decimal-to-binary-converter/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-recursion-by-building-a-decimal-to-binary-converter",
"helpCategory": "JavaScript",
- "order": 10,
+ "order": 11,
"superOrder": 6,
"time": "5 hours",
"template": "",
diff --git a/curriculum/challenges/_meta/learn-regular-expressions-by-building-a-spam-filter/meta.json b/curriculum/challenges/_meta/learn-regular-expressions-by-building-a-spam-filter/meta.json
index 33d3a70a983..78c7a59091b 100644
--- a/curriculum/challenges/_meta/learn-regular-expressions-by-building-a-spam-filter/meta.json
+++ b/curriculum/challenges/_meta/learn-regular-expressions-by-building-a-spam-filter/meta.json
@@ -5,7 +5,7 @@
"hasEditableBoundaries": true,
"dashedName": "learn-regular-expressions-by-building-a-spam-filter",
"helpCategory": "JavaScript",
- "order": 12,
+ "order": 13,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json b/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json
index e67d9cd26ab..bbd33e61efd 100644
--- a/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json
+++ b/curriculum/challenges/_meta/learn-the-date-object-by-building-a-date-formatter/meta.json
@@ -4,7 +4,7 @@
"usesMultifileEditor": true,
"hasEditableBoundaries": true,
"dashedName": "learn-the-date-object-by-building-a-date-formatter",
- "order": 6,
+ "order": 7,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/_meta/review-dom-manipulation-by-building-a-rock-paper-scissors-game/meta.json b/curriculum/challenges/_meta/review-dom-manipulation-by-building-a-rock-paper-scissors-game/meta.json
index 31a3f72673f..2017d529cc0 100644
--- a/curriculum/challenges/_meta/review-dom-manipulation-by-building-a-rock-paper-scissors-game/meta.json
+++ b/curriculum/challenges/_meta/review-dom-manipulation-by-building-a-rock-paper-scissors-game/meta.json
@@ -4,7 +4,7 @@
"usesMultifileEditor": true,
"hasEditableBoundaries": true,
"dashedName": "review-dom-manipulation-by-building-a-rock-paper-scissors-game",
- "order": 4,
+ "order": 5,
"time": "5 hours",
"template": "",
"required": [],
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66323433f931ca32305a11f5.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66323433f931ca32305a11f5.md
new file mode 100644
index 00000000000..c66ddc80237
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66323433f931ca32305a11f5.md
@@ -0,0 +1,119 @@
+---
+id: 66323433f931ca32305a11f5
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Now, CamperBot is trying to create a function that will return a random index from the `darkColorsArr`. But they have run into the following error message:
+
+```js
+Uncaught ReferenceError: math is not defined
+```
+
+A `ReferenceError` is thrown when a non-existent variable is referenced. In this case, it looks like CamperBot is trying to use `math` but JavaScript doesn't have a `math` object.
+
+Fix CamperBot's error in the `math.random()` line and open up the console again.
+
+# --hints--
+
+You should fix the capitalization error in the `math.random()` line.
+
+```js
+assert.match(getRandomIndex.toString(), /console\.log\(\s*darkColorsArr\.length\s*\*\s*Math\.random\(\s*\)\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Build a random background color changer
+
+
+
+
Random Background Color changer
+
+
+
+
Hex Code: #110815
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+```
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+function getRandomIndex() {
+--fcc-editable-region--
+ console.log(darkColorsArr.length * math.random())
+--fcc-editable-region--
+}
+getRandomIndex();
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/663250b42513ef5975599c49.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/663250b42513ef5975599c49.md
new file mode 100644
index 00000000000..2f277409dab
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/663250b42513ef5975599c49.md
@@ -0,0 +1,121 @@
+---
+id: 663250b42513ef5975599c49
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Now that the `ReferenceError` is resolved, the console is displaying the correct results for a random number between `0` and `9`. But CamperBot was not expecting to see decimal numbers like these:
+
+```js
+0.015882899879771095
+2.114596286197641
+6.040964780197666
+```
+
+Update the `console` statement to print a whole number between `0` and `9`.
+
+Remember that you worked with a method in the Role Playing Game that rounds a number down to the nearest whole number.
+
+# --hints--
+
+You should round `darkColorsArr.length * Math.random()` down to the nearest whole number.
+
+```js
+assert.match(getRandomIndex.toString(), /console\.log\(\s*Math\.floor\(\s*darkColorsArr\.length\s*\*\s*Math\.random\(\s*\)\s*\)\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Build a random background color changer
+
+
+
+
Random Background Color changer
+
+
+
+
Hex Code: #110815
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+```
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+--fcc-editable-region--
+function getRandomIndex() {
+ console.log(darkColorsArr.length * Math.random())
+}
+getRandomIndex();
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/663255f28c59315db74d137b.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/663255f28c59315db74d137b.md
new file mode 100644
index 00000000000..66864cfa2b9
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/663255f28c59315db74d137b.md
@@ -0,0 +1,125 @@
+---
+id: 663255f28c59315db74d137b
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+CamperBot is finished with building out the `getRandomIndex` function and it is working as expected.
+
+But now they are running into this issue when trying to create a reference to the `body` element in the DOM:
+
+```js
+Uncaught TypeError: document.queryselector is not a function
+```
+
+A `TypeError` means that the code is trying to perform an operation on a value that is not of the expected type.
+
+Fix the `TypeError` by updating the `document.queryselector` method to the correct method name that selects an element from the DOM.
+
+# --hints--
+
+You should update `queryselector` to use camel case.
+
+```js
+assert.match(code, /querySelector/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Build a random background color changer
+
+
+
+
Random Background Color changer
+
+
+
+
Hex Code: #110815
+
+
+
+
+
+
+
+```
+
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+```
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+function getRandomIndex() {
+ console.log(Math.floor(darkColorsArr.length * Math.random()));
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+--fcc-editable-region--
+const body = document.queryselector("body");
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66325a250690a3612c1db0f6.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66325a250690a3612c1db0f6.md
new file mode 100644
index 00000000000..34c4abc6d0c
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66325a250690a3612c1db0f6.md
@@ -0,0 +1,122 @@
+---
+id: 66325a250690a3612c1db0f6
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+CamperBot has created a new variable called `bgHexCodeSpanElement` to store the reference to the `span` element with the `id` of `bg-hex-code`. However, when they try to log that variable to the console, they get `null`.
+
+`null` is a special value in JavaScript that represents the absence of a value. This can happen when you try to access a property of an object that doesn't exist.
+
+In this case, CamperBot is not passing in the correct selector to the `document.querySelector` method.
+
+Fix the `document.querySelector("bg-hex-code")` line so that it correctly selects the element with the `id` of `bg-hex-code`.
+
+# --hints--
+
+You should fix `"bg-hex-code"` so it correctly references the `id` of `bg-hex-code`. Remember that `id` selectors in CSS start with a hash symbol (`#`).
+
+```js
+assert.match(bgHexCodeSpanElement.id, /bg-hex-code/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Build a random background color changer
+
+
+
+
Random Background Color changer
+
+
+
+
Hex Code: #110815
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+```
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+--fcc-editable-region--
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("bg-hex-code");
+
+console.log(bgHexCodeSpanElement);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/663260de72634166b0800fe9.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/663260de72634166b0800fe9.md
new file mode 100644
index 00000000000..ddc652cb934
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/663260de72634166b0800fe9.md
@@ -0,0 +1,133 @@
+---
+id: 663260de72634166b0800fe9
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+CamperBot has now created a function called `changeBackgroundColor` that changes the background color of the page to a random color from the `darkColorsArr` array. The function also displays the hex code for that new color.
+
+When they try to test out this function, they notice that the background color is not changing and the text shows the following:
+
+```js
+Hex Code: undefined
+```
+
+`undefined` is showing up here because the `color` variable is not being set correctly.
+
+Fix the error in the `darkColorsArr[getRandomIndex]` line so that the `color` variable is set to a random color from the `darkColorsArr` array.
+
+# --hints--
+
+You should call the `getRandomIndex` function inside the `darkColorsArr[getRandomIndex]` line.
+
+```js
+assert.match(changeBackgroundColor.toString(), /darkColorsArr\[\s*getRandomIndex\(\s*\)\s*\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Build a random background color changer
+
+
+
+
Random Background Color changer
+
+
+
+
Hex Code: #110815
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+```
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+--fcc-editable-region--
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+changeBackgroundColor();
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66326637df347d6ae9928853.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66326637df347d6ae9928853.md
new file mode 100644
index 00000000000..beae8d80197
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66326637df347d6ae9928853.md
@@ -0,0 +1,130 @@
+---
+id: 66326637df347d6ae9928853
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+CamperBot is trying to create a new variable called `btn` to store the reference to the button element with the `id` of `click-btn`
+
+However, when they try to log the button element to the console, they see that the button element is `null`.
+
+Open up the `index.html` to see the correct `id` name for that button element.
+
+Then fix the error for the `document.querySelector("#click-btn");` line.
+
+# --hints--
+
+You should fix the `id` name of `"#click-btn"` line to match the correct `id` name in the `index.html` file.
+
+```js
+assert.match(btn.id, /btn/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Build a random background color changer
+
+
+
+
Random Background Color changer
+
+
+
+
Hex Code: #110815
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+```
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+--fcc-editable-region--
+const btn = document.querySelector("#click-btn");
+console.log(btn);
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66326913b729e16dd0127a36.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66326913b729e16dd0127a36.md
new file mode 100644
index 00000000000..eaa7ee92b70
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/66326913b729e16dd0127a36.md
@@ -0,0 +1,237 @@
+---
+id: 66326913b729e16dd0127a36
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+CamperBot has finished building out their random background color changer. However, when they click the button, the background color does not change.
+
+It looks like they are trying to use the `onclick` property but they are using it incorrectly. The `onclick` property should be assigned a function reference.
+
+Fix the error in the `btn.onclick = changeBackgroundColor();` line.
+
+Remember that you worked with the `onclick` property in the Role playing game project. Look back at the final solution to see how `onclick` was properly used.
+
+Once you fix that final bug, the random background color changer will be complete!
+
+# --hints--
+
+You should not call the `changeBackgroundColor` function. Instead, assign the function reference to the `onclick` property.
+
+```js
+assert.strictEqual(btn.onclick, changeBackgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Build a random background color changer
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+*,
+*::before,
+*::after {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --yellow: #f1be32;
+ --golden-yellow: #feac32;
+ --dark-purple: #110815;
+ --light-grey: #efefef;
+}
+
+body {
+ background-color: var(--dark-purple);
+ color: var(--light-grey);
+ text-align: center;
+}
+
+.bg-information-container {
+ margin: 15px 0 25px;
+ font-size: 1.2rem;
+}
+
+.btn {
+ cursor: pointer;
+ padding: 10px;
+ margin: 10px;
+ color: var(--dark-purple);
+ background-color: var(--golden-yellow);
+ background-image: linear-gradient(#fecc4c, #ffac33);
+ border-color: var(--golden-yellow);
+ border-width: 3px;
+}
+
+.btn:hover {
+ background-image: linear-gradient(#ffcc4c, #f89808);
+}
+
+```
+
+```js
+const darkColorsArr = [
+ "#2C3E50",
+ "#34495E",
+ "#2C2C2C",
+ "#616A6B",
+ "#4A235A",
+ "#2F4F4F",
+ "#0E4B5A",
+ "#36454F",
+ "#2C3E50",
+ "#800020",
+];
+
+function getRandomIndex() {
+ const randomIndex = Math.floor(darkColorsArr.length * Math.random());
+ return randomIndex;
+}
+
+const body = document.querySelector("body");
+const bgHexCodeSpanElement = document.querySelector("#bg-hex-code");
+
+function changeBackgroundColor() {
+ const color = darkColorsArr[getRandomIndex()];
+
+ bgHexCodeSpanElement.innerText = color;
+ body.style.backgroundColor = color;
+}
+const btn = document.querySelector("#btn");
+
+btn.onclick = changeBackgroundColor;
+
+```
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/6650c9a94d6e13d14a043a69.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/6650c9a94d6e13d14a043a69.md
new file mode 100644
index 00000000000..521acada08f
--- /dev/null
+++ b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-basic-debugging-by-building-a-random-background-color-changer/6650c9a94d6e13d14a043a69.md
@@ -0,0 +1,119 @@
+---
+id: 6650c9a94d6e13d14a043a69
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+CamperBot is trying to build out a random background color changer. But they keep running into issues and need your help to debug the code.
+
+CamperBot has already added the HTML and CSS for the project. But they are confused as to why none of the styles and content is showing up on the page.
+
+When they open up the console they see this message:
+
+```js
+SyntaxError: unknown: Unexpected token, expected "," (5:2)
+```
+
+Syntax errors are thrown when the JavaScript engine encounters something it can't interpret. In this case, it looks like CamperBot has syntax errors in the `darkColorsArr` array.
+
+Fix the syntax errors in the `darkColorsArr` array and you should see the content and styles show up on the page.
+
+# --hints--
+
+You should resolve the syntax errors in the `darkColorsArr` array. Remember that array elements should be separated by commas.
+
+```js
+assert.isArray(darkColorsArr);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Build a random background color changer
+
+
+
+