Merge pull request #710 from freeCodeCamp/main

GulajavaMinistudio · web-flow · commit e62db505abd1 · 2024-08-26T16:28:28.000+07:00
Create a new pull request by comparing changes across two branches
diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json
@@ -1772,7 +1772,12 @@
       "hqia": { "title": "35", "intro": [] },
       "dxpc": { "title": "36", "intro": [] },
       "liti": { "title": "37", "intro": [] },
-      "xjin": { "title": "38", "intro": [] },
+      "lab-business-card": {
+        "title": "Design a Business Card",
+        "intro": [
+          "In this lab, you'll create a business card and style it using CSS."
+        ]
+      },
       "gnuk": { "title": "39", "intro": [] },
       "zlfj": { "title": "40", "intro": [] },
       "ioqd": { "title": "41", "intro": [] },
@@ -1814,7 +1819,12 @@
       "rfiq": { "title": "77", "intro": [] },
       "tcwi": { "title": "78", "intro": [] },
       "uptf": { "title": "79", "intro": [] },
-      "nbwu": { "title": "80", "intro": [] },
+      "lab-page-of-playing-cards": {
+        "title": "Build a Page of Playing Cards",
+        "intro": [
+          "For this lab, you will use flexbox to create a webpage of playing cards."
+        ]
+      },
       "kqao": { "title": "81", "intro": [] },
       "habq": { "title": "82", "intro": [] },
       "vqut": { "title": "83", "intro": [] },
@@ -1859,7 +1869,12 @@
       "yqma": { "title": "119", "intro": [] },
       "dorc": { "title": "120", "intro": [] },
       "adzu": { "title": "121", "intro": [] },
-      "cdzo": { "title": "122", "intro": [] },
+      "lab-moon-orbit": {
+        "title": "Build a Moon Orbit",
+        "intro": [
+          "For this lab, you will create an animation of the moon orbiting the earth."
+        ]
+      },
       "lugl": { "title": "123", "intro": [] },
       "mtcg": { "title": "124", "intro": [] },
       "lvqc": { "title": "125", "intro": [] },
diff --git a/client/src/pages/learn/front-end-development/lab-business-card/index.md b/client/src/pages/learn/front-end-development/lab-business-card/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to Designing a Business Card
+block: lab-business-card
+superBlock: front-end-development
+---
+
+## Learn CSS by Designing a Business Card
+
+In this lab, you'll create a business card and style it using CSS.
diff --git a/client/src/pages/learn/front-end-development/lab-moon-orbit/index.md b/client/src/pages/learn/front-end-development/lab-moon-orbit/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to the Learn CSS Animation by Creating a Moon Orbit
+block: lab-moon-orbit
+superBlock: front-end-development
+---
+
+## Introduction to the Learn CSS Animation by Creating a Moon Orbit
+
+This is a test for the new project-based curriculum.
diff --git a/client/src/pages/learn/front-end-development/lab-playing-card-page/index.md b/client/src/pages/learn/front-end-development/lab-playing-card-page/index.md
@@ -0,0 +1,9 @@
+---
+title: Introduction to Build a Page of Playing Cards
+block: lab-page-of-playing-cards
+superBlock: front-end-development
+---
+
+## Introduction to Build a Page of Playing Cards
+
+For this lab, you will use flexbox to create a webpage of a playing cards.
diff --git a/curriculum/challenges/_meta/lab-business-card/meta.json b/curriculum/challenges/_meta/lab-business-card/meta.json
@@ -0,0 +1,12 @@
+{
+  "name": "Design a Business Card",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "dashedName": "lab-business-card",
+  "order": 38,
+  "superBlock": "front-end-development",
+  "challengeOrder": [{ "id": "6690e10ebe2181212abc9652", "title": "Design a Business Card" }],
+  "helpCategory": "HTML-CSS",
+  "blockType": "lab"
+}
+
diff --git a/curriculum/challenges/_meta/lab-moon-orbit/meta.json b/curriculum/challenges/_meta/lab-moon-orbit/meta.json
@@ -0,0 +1,12 @@
+{
+  "name": "Build a Moon Orbit",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "hasEditableBoundaries": false,
+  "dashedName": "lab-moon-orbit",
+  "order": 122,
+  "superBlock": "front-end-development",
+  "challengeOrder": [{ "id": "66a37f37ef5823a313de8c26", "title": "Build a Moon Orbit" }],
+  "helpCategory": "HTML-CSS",
+  "blockType": "lab"
+}
diff --git a/curriculum/challenges/_meta/lab-page-of-playing-cards/meta.json b/curriculum/challenges/_meta/lab-page-of-playing-cards/meta.json
@@ -0,0 +1,16 @@
+{
+  "name": "Build a Page of Playing Cards",
+  "blockType": "lab",
+  "isUpcomingChange": true,
+  "usesMultifileEditor": true,
+  "dashedName": "lab-page-of-playing-cards",
+  "order": 80,
+  "superBlock": "front-end-development",
+  "challengeOrder": [
+    {
+      "id": "66be24cb4144f955b6bcc550",
+      "title": "Build a Page of Playing Cards"
+    }
+  ],
+  "helpCategory": "HTML-CSS"
+}
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md
@@ -22,7 +22,7 @@ assert.strictEqual(document.querySelectorAll('link')?.length, 3);
 Your `link` elements should be inside your `head` element.
 
 ```js
-const headContentRegex = /(?<=<head\s*>)(?:.|\s*)*?(?=<\/head\s*>)/;
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
 const headElementContent = code.match(headContentRegex);
 
 const headElement = document.createElement("head");
@@ -76,7 +76,7 @@ assert.strictEqual(title?.length, 1);
 Your `title` element should be inside your `head` element.
 
 ```js
-const headContentRegex = /(?<=<head\s*>)(?:.|\s*)*?(?=<\/head\s*>)/;
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
 const headElementContent = code.match(headContentRegex);
 
 const headElement = document.createElement("head");
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md
@@ -14,13 +14,20 @@ Within the `head`, nest a `meta` element with a `charset` of `UTF-8`, a `title`
 You should create a `meta` element within the `head` element.
 
 ```js
-assert.exists(document.querySelector('head > meta'));
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('meta'));
 ```
 
 You should give the `meta` tag a `charset` of `UTF-8`.
 
 ```js
-assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8');
+const linkElement = document.querySelector('meta');
+const charset = linkElement?.getAttribute("charset").toLowerCase();
+assert.strictEqual(charset, 'utf-8');
 ```
 
 Your code should have a `title` element.
@@ -33,7 +40,12 @@ assert.exists(title);
 The `title` element should be within the `head` element.
 
 ```js
-assert.exists(document.querySelector('head > title'));
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('title'));
 ```
 
 Your project should have a title of `City Skyline`.
@@ -53,41 +65,46 @@ assert.equal(title.text, 'City Skyline');
 Your code should have a `link` element.
 
 ```js
-assert.match(code, /<link/)
+assert.isNotNull(document.querySelector('link'));
 ```
 
 You should not change your existing `head` tags. Make sure you did not delete the closing tag.
 
 ```js
-const heads = document.querySelectorAll('head');
-assert.equal(heads?.length, 1);
+const headElements = document.querySelectorAll('head');
+assert.strictEqual(headElements?.length, 1);
 ```
 
 You should have one void `link` element.
 
 ```js
-assert(document.querySelectorAll('link').length === 1);
+assert.strictEqual(document.querySelectorAll('link')?.length, 1);
 ```
 
 Your `link` element should be within your `head` element.
 
 ```js
-assert.exists(document.querySelector('head > link'));
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
+const headElementContent = code.match(headContentRegex);
+
+const headElement = document.createElement("head");
+headElement.innerHTML = headElementContent;
+assert.isNotNull(headElement.querySelector('link'));
 ```
 
 Your `link` element should have a `rel` attribute with the value `stylesheet`.
 
 ```js
-const link_element = document.querySelector('link');
-const rel = link_element.getAttribute("rel");
-assert.equal(rel, "stylesheet");
+const linkElement = document.querySelector('link');
+const rel = linkElement?.getAttribute("rel");
+assert.strictEqual(rel, "stylesheet");
 ```
 
 Your `link` element should have an `href` attribute with the value `styles.css`.
 
 ```js
-const link = document.querySelector('link');
-assert.equal(link.dataset.href, "styles.css");
+const linkElement = document.querySelector('link');
+assert.strictEqual(linkElement?.dataset.href, "styles.css");
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62cc5b1779e4d313466f73c5.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62cc5b1779e4d313466f73c5.md
@@ -39,7 +39,7 @@ assert.notMatch(code, /<\/link>/);
 Your `link` element should be inside your `head` element.
 
 ```js
-const headContentRegex = /(?<=<head\s*>)(?:.|\s*)*?(?=<\/head\s*>)/;
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
 const headElementContent = code.match(headContentRegex);
 
 const headElement = document.createElement("head");
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md
@@ -33,7 +33,7 @@ assert.strictEqual(document.querySelectorAll('link')?.length, 1);
 Your `link` element should be inside your `head` element.
 
 ```js
-const headContentRegex = /(?<=<head\s*>)(?:.|\s*)*?(?=<\/head\s*>)/;
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
 const headElementContent = code.match(headContentRegex);
 
 const headElement = document.createElement("head");
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md
@@ -30,7 +30,7 @@ assert.notMatch(code, /<\/link>/);
 Your two `link` elements should be inside the `head` element.
 
 ```js
-const headContentRegex = /(?<=<head\s*>)(?:.|\s*)*?(?=<\/head\s*>)/;
+const headContentRegex = /(?<=<head\s*>)[\S|\s]*(?=<\/head\s*>)/;
 const headElementContent = code.match(headContentRegex);
 
 const headElement = document.createElement("head");
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/build-a-pokemon-search-app-project/build-a-pokemon-search-app.md
@@ -10,6 +10,8 @@ dashedName: build-a-pokemon-search-app
 
 In this project, you'll build an app that will search for Pokémon by name or ID and display the results to the user. To retrieve the Pokémon data and images, you'll use freeCodeCamp's <a href="https://pokeapi-proxy.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">PokéAPI Proxy</a>.
 
+ **Note:** The first 13 steps must be completed inside the `index.html` file. 
+
 **Objective:** Build an app that is functionally similar to <a href="https://pokemon-search-app.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://pokemon-search-app.freecodecamp.rocks</a>
 
 **User Stories:**
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b60cfaca25bb27edd40f62.md
@@ -14,13 +14,15 @@ Finally, you need to link your JavaScript file to your HTML. Create a `script` e
 You should have a `script` element.
 
 ```js
-assert.isAtLeast(document.querySelectorAll('script')?.length, 1);
+const bodyEnding = code.split(/<\/main>/)?.[1]?.split(/<\/body>/)?.[0];
+assert.match(bodyEnding, /<script[^>]*>\s*<\/script>/);
 ```
 
 Your `script` element should have the `src` set to `./script.js`.
 
 ```js
-assert.match(code, /script\s*?src\s*?=\s*?('|")(\.\/)?script\.js\1/);
+const bodyEnding = code.split(/<\/main>/)?.[1]?.split(/<\/body>/)?.[0];
+assert.match(bodyEnding, /<script\s*src\s*=\s*('|")(\.\/)?script\.js\1\s*>\s*<\/script>/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63b61490e633a22b4593e62f.md
@@ -26,7 +26,7 @@ assert.match(code, /document\.getElementById\(\s*('|")add-entry\1\s*\)/g);
 You should assign the `#add-entry` element to `addEntryButton`.
 
 ```js
-assert.equal(addEntryButton, document.getElementById('add-entry'));
+assert.deepEqual(addEntryButton, document.getElementById('add-entry'));
 ```
 
 You should declare a variable called `clearButton`.
@@ -44,13 +44,14 @@ assert.match(code, /document\.getElementById\(\s*('|")clear\1\s*\)/g);
 You should assign the `#clear` element to `clearButton`.
 
 ```js
-assert.equal(clearButton, document.getElementById('clear'));
+assert.deepEqual(clearButton, document.getElementById('clear'));
 ```
 
 You should declare a variable called `output`.
 
 ```js
-assert.isDefined(output);
+// .isDefined cannot be used for `output`, as browser defines such variable on it own.
+assert.match(code, /const\s+output/);
 ```
 
 You should use `document.getElementById()` to get the `#output` element.
@@ -62,7 +63,9 @@ assert.match(code, /document\.getElementById\(\s*('|")output\1\s*\)/g);
 You should assign the `#output` element to `output`.
 
 ```js
-assert.equal(output, document.getElementById("output"));
+// assert.deepEqual(output, document.getElementById('output')); cannot be used,
+// as browser defines `output` variable on it own for `#output`.
+assert.match(code, /const\s+output\s*=\s*document.getElementById\(('|")output\1\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf461011fca327d3b60fa8.md
@@ -19,24 +19,6 @@ Declare a `regex` variable and assign it the value from the example above. In fu
 
 # --hints--
 
-You should remove the `cleanStrArray` variable.
-
-```js
-assert.notMatch(cleanInputString.toString(), /cleanStrArray/);
-```
-
-You should remove the `strArray` variable.
-
-```js
-assert.notMatch(cleanInputString.toString(), /strArray/);
-```
-
-You should not have a `for` loop.
-
-```js
-assert.notMatch(cleanInputString.toString(), /for/);
-```
-
 You should declare a `regex` variable.
 
 ```js
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63bf47fd40599f29827f484d.md
@@ -9,7 +9,7 @@ dashedName: step-20
 
 The current pattern will match the exact text `"hello"`, which is not the desired behavior. Instead, you want to search for `+`, `-`, or spaces. Replace the pattern in your `regex` variable with `\+-` to match plus and minus characters.
 
-Note that you need to use the `backslash` `\` character to <dfn>escape</dfn> the `+` symbol because it has a special meaning in regular expressions.
+Note that you need to use the backslash `\` character to <dfn>escape</dfn> the `+` symbol because it has a special meaning in regular expressions.
 
 # --hints--
 
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c8c15fd337ad24b9b68049.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c8c15fd337ad24b9b68049.md
@@ -26,7 +26,8 @@ Add an `if` statement that checks if `invalidInputMatch` is truthy.
 You should add an `if` statement to your `getCaloriesFromInputs` function.
 
 ```js
-assert.match(getCaloriesFromInputs.toString(), /if\s*\(/);
+const functionCode = code.split(/getCaloriesFromInputs/)?.[1]?.split(/\}\s*\}/)?.[0];
+assert.match(functionCode, /if\s*\(/);
 ```
 
 You should check the truthiness of `invalidInputMatch` in your `if` condition.
@@ -38,7 +39,8 @@ assert.match(getCaloriesFromInputs.toString(), /if\s*\(\s*invalidInputMatch\s*\)
 Your `if` statement should be inside your `for` loop.
 
 ```js
-assert.isBelow(getCaloriesFromInputs.toString().indexOf("for"), getCaloriesFromInputs.toString().indexOf("if"));
+const forCode = code.split(/getCaloriesFromInputs/)?.[1]?.split(/for\s*\(/)?.[1]?.split(/\}/)?.[0];
+assert.match(forCode, /if\s*\(\s*invalidInputMatch\s*\)/);
 ```
 
 # --seed--
diff --git a/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md b/curriculum/challenges/english/15-javascript-algorithms-and-data-structures-22/learn-form-validation-by-building-a-calorie-counter/63c9e8fe3a6f022a05a04675.md
diff --git a/curriculum/challenges/english/25-front-end-development/lab-business-card/6690e10ebe2181212abc9652.md b/curriculum/challenges/english/25-front-end-development/lab-business-card/6690e10ebe2181212abc9652.md
diff --git a/curriculum/challenges/english/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/english/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md
diff --git a/curriculum/challenges/english/25-front-end-development/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md b/curriculum/challenges/english/25-front-end-development/lab-page-of-playing-cards/66be24cb4144f955b6bcc550.md
