freeCodeCamp · naomi-lgbt · May 24, 2024 · May 1, 2024 · May 1, 2024 · May 1, 2024
@@ -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/...v8/learn-basic-debugging-by-building-a-random-background-color-changer/index.md b/...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.
@@ -4,7 +4,7 @@
   "dashedName": "build-a-cash-register-project",
   "usesMultifileEditor": true,
   "helpCategory": "JavaScript",
-  "order": 20,
+  "order": 21,
   "time": "30 hours",
   "template": "",
   "required": [],

@@ -4,7 +4,7 @@
   "dashedName": "build-a-palindrome-checker-project",
   "usesMultifileEditor": true,
   "helpCategory": "JavaScript",
-  "order": 7,
+  "order": 8,
   "time": "30 hours",
   "template": "",
   "required": [],

@@ -4,7 +4,7 @@
   "dashedName": "build-a-pokemon-search-app-project",
   "usesMultifileEditor": true,
   "helpCategory": "JavaScript",
-  "order": 23,
+  "order": 24,
   "time": "30 hours",
   "template": "",
   "required": [],

@@ -4,7 +4,7 @@
   "dashedName": "build-a-roman-numeral-converter-project",
   "usesMultifileEditor": true,
   "helpCategory": "JavaScript",
-  "order": 11,
+  "order": 12,
   "time": "30 hours",
   "template": "",
   "required": [],

@@ -4,7 +4,7 @@
   "dashedName": "build-a-telephone-number-validator-project",
   "usesMultifileEditor": true,
   "helpCategory": "JavaScript",
-  "order": 16,
+  "order": 17,
   "time": "30 hours",
   "template": "",
   "required": [],

@@ -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": [],

@@ -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": [],

@@ -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": [],

@@ -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"
+}
@@ -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": [],

@@ -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": [],

@@ -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": [],

@@ -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": [],

@@ -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": [],

@@ -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": [],

@@ -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": [],

@@ -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": [],

@@ -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": [],

@@ -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": "",

@@ -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": [],

@@ -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": [],

@@ -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/...gging-by-building-a-random-background-color-changer/66323433f931ca32305a11f5.md b/...gging-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
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Build a random background color changer</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <h1>Random Background Color changer</h1>
+
+    <main>
+      <section class="bg-information-container">
+        <p>Hex Code: <span id="bg-hex-code">#110815</span></p>
+      </section>
+
+      <button class="btn" id="btn">Change Background Color</button>
+    </main>
+    <script src="./script.js"></script>
+  </body>
+</html>
+```
+
+```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();
+```