feat(curriculum): add first debugging project to JS curriculum

client/i18n/locales/english/intro.json

@@ -472,6 +472,13 @@
           "In this mini project, you will get to review JavaScript fundamentals like functions, variables, conditionals and more by building a gradebook app.",
           "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."
+        ]
       }
     }
   },

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.

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": 19,
+  "order": 20,
   "time": "30 hours",
   "template": "",
   "required": [],

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": 6,
+  "order": 7,
   "time": "30 hours",
   "template": "",
   "required": [],

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": 22,
+  "order": 23,
   "time": "30 hours",
   "template": "",
   "required": [],

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": 10,
+  "order": 11,
   "time": "30 hours",
   "template": "",
   "required": [],

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": 15,
+  "order": 16,
   "time": "30 hours",
   "template": "",
   "required": [],

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": 13,
+  "order": 14,
   "time": "5 hours",
   "template": "",
   "required": [],

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": 21,
+  "order": 22,
   "time": "5 hours",
   "template": "",
   "required": [],

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": 12,
+  "order": 13,
   "time": "5 hours",
   "template": "",
   "required": [],

curriculum/challenges/_meta/learn-basic-debugging-by-building-a-random-background-color-changer/meta.json

@@ -0,0 +1,44 @@
+{
+  "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": "66323433f931ca32305a11f5",
+      "title": "Step 1"
+    },
+    {
+      "id": "663250b42513ef5975599c49",
+      "title": "Step 2"
+    },
+    {
+      "id": "663255f28c59315db74d137b",
+      "title": "Step 3"
+    },
+    {
+      "id": "66325a250690a3612c1db0f6",
+      "title": "Step 4"
+    },
+    {
+      "id": "663260de72634166b0800fe9",
+      "title": "Step 5"
+    },
+    {
+      "id": "66326637df347d6ae9928853",
+      "title": "Step 6"
+    },
+    {
+      "id": "66326913b729e16dd0127a36",
+      "title": "Step 7"
+    }
+  ],
+  "helpCategory": "JavaScript"
+}

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": 16,
+  "order": 17,
   "time": "5 hours",
   "template": "",
   "required": [],

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": 4,
+  "order": 5,
   "time": "5 hours",
   "template": "",
   "required": [],

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": 20,
+  "order": 21,
   "time": "5 hours",
   "template": "",
   "required": [],

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

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": 14,
+  "order": 15,
   "time": "2 hours",
   "template": "",
   "required": [],

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": 18,
+  "order": 19,
   "time": "5 hours",
   "template": "",
   "required": [],

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": 17,
+  "order": 18,
   "time": "5 hours",
   "template": "",
   "required": [],

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": 8,
+  "order": 9,
   "time": "5 hours",
   "template": "",
   "required": [],

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": 7,
+  "order": 8,
   "time": "5 hours",
   "template": "",
   "required": [],

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": 9,
+  "order": 10,
   "superOrder": 6,
   "time": "5 hours",
   "template": "",

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": 11,
+  "order": 12,
   "time": "5 hours",
   "template": "",
   "required": [],

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": 5,
+  "order": 6,
   "time": "5 hours",
   "template": "",
   "required": [],

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,121 @@
+---
+id: 66323433f931ca32305a11f5
+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 created an array of dark colors and is trying to create a function that will return a random index from the array. 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. Then open up the console to see the error message disappear.
+
+# --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();
+```