diff --git a/curriculum/challenges/_meta/workshop-fcc-authors-page/meta.json b/curriculum/challenges/_meta/workshop-fcc-authors-page/meta.json
index 0f5109fa8af..252f4311fc0 100644
--- a/curriculum/challenges/_meta/workshop-fcc-authors-page/meta.json
+++ b/curriculum/challenges/_meta/workshop-fcc-authors-page/meta.json
@@ -41,88 +41,68 @@
"title": "Step 8"
},
{
- "id": "641da5dd6cd6db44f58b7787",
+ "id": "641da73b09e7f046c758e0ed",
"title": "Step 9"
},
{
- "id": "641da615af82bf454215a992",
+ "id": "641da791d0c34a472b8d15b6",
"title": "Step 10"
},
{
- "id": "641da6570acf7545931ce477",
+ "id": "641da7bfbc7f0f477438ad8a",
"title": "Step 11"
},
{
- "id": "641da6dcb6e4c9463d54c75b",
+ "id": "641da803d9892447d059804e",
"title": "Step 12"
},
{
- "id": "641da7071d0d45467cd59977",
+ "id": "641da836581c254815f785fe",
"title": "Step 13"
},
{
- "id": "641da73b09e7f046c758e0ed",
+ "id": "641da86294fd9f485d3c2bf0",
"title": "Step 14"
},
{
- "id": "641da791d0c34a472b8d15b6",
+ "id": "641da895fb7ec648a5bdf19c",
"title": "Step 15"
},
{
- "id": "641da7bfbc7f0f477438ad8a",
+ "id": "641da8db2a036048ebe6999e",
"title": "Step 16"
},
{
- "id": "641da803d9892447d059804e",
+ "id": "641da97c987a514959ada414",
"title": "Step 17"
},
{
- "id": "641da836581c254815f785fe",
+ "id": "641da9aceb788e49a73ebcc9",
"title": "Step 18"
},
{
- "id": "641da86294fd9f485d3c2bf0",
+ "id": "641da9ea9b847a49fe6ee9b6",
"title": "Step 19"
},
{
- "id": "641da895fb7ec648a5bdf19c",
+ "id": "641daa5ea050f24a7cade6e6",
"title": "Step 20"
},
- {
- "id": "641da8db2a036048ebe6999e",
- "title": "Step 21"
- },
- {
- "id": "641da97c987a514959ada414",
- "title": "Step 22"
- },
- {
- "id": "641da9aceb788e49a73ebcc9",
- "title": "Step 23"
- },
- {
- "id": "641da9ea9b847a49fe6ee9b6",
- "title": "Step 24"
- },
- {
- "id": "641daa5ea050f24a7cade6e6",
- "title": "Step 25"
- },
{
"id": "641daa8c2c3e364ac3650b37",
- "title": "Step 26"
+ "title": "Step 21`"
},
{
"id": "641daabed8d0584b1150c953",
- "title": "Step 27"
+ "title": "Step 22"
},
{
"id": "641daae5e18eae4b562633e4",
- "title": "Step 28"
+ "title": "Step 23"
},
{
"id": "641dab13c1b6f14b9828e6b1",
- "title": "Step 29"
+ "title": "Step 24"
}
],
"helpCategory": "JavaScript"
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da5abaac81844a54adb03.md b/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da5abaac81844a54adb03.md
index eb2683f23f8..44aa00a3b2a 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da5abaac81844a54adb03.md
+++ b/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da5abaac81844a54adb03.md
@@ -7,40 +7,70 @@ dashedName: step-8
# --description--
-Now you'll create a function to populate the UI with the author data. You will call this function inside the second `.then()` method.
+Now, it is time to create the function that will be responsible for displaying the authors on the page.
-Create an empty arrow function named `displayAuthors` that takes `authors` as a parameter.
+Start by creating a function called `displayAuthors` that takes an `authors` parameter. Your function should then loop through the `authors` array and add a card for each author to the `authorContainer` `div`.
+
+The card should have the following structure:
+
+```html
+
+
${author}
+
+```
+
+**Tips:**
+
+- You can use any type of loop to iterate over the `authors` array. Ex. `for`, `forEach`, `map`, etc.
+- You should use the `innerHTML` property to add the card to the `authorContainer` inside the loop. You will also need to use template literal syntax to add the markup.
# --hints--
-You should use `const` to create an empty function named `displayAuthors`.
-
-```js
-assert.match(code, /const\s+displayAuthors\s*=\s*/)
-```
-
`displayAuthors` should be a function.
```js
assert.isFunction(displayAuthors)
```
-Your `displayAuthors` function should use an arrow syntax.
-
-```js
-assert.match(code, /const\s+displayAuthors\s*=\s*(\(.*\)|[^\s()]+)\s*=>\s*/)
-```
-
Your `displayAuthors` function should take an `authors` parameter.
```js
-assert.match(code, /const\s+displayAuthors\s*=\s*\(?\s*authors/)
+const parameters = __helpers.getFunctionParams(displayAuthors.toString());
+assert.deepEqual(parameters[0].name,"authors");
```
-Your `displayAuthors` function should be empty.
+When the `displayAuthors` function is called with an author's array, it should add a card for each author to the `authorContainer` `div`.
```js
-assert.match(code, /const\s+displayAuthors\s*=\s*(\(\s*authors\s*\)|authors)\s*=>\s*\{\n?\s*?\}\s*;?/)
+const exampleAuthors = [
+ [{
+ "author": "Quincy Larson",
+ }, {
+ "author": "Jessica Wilkins",
+ }, ],
+ [{
+ "author": "Naomi Carrigan",
+ }, {
+ "author": "Beau Carnes",
+ }, {
+ "author": "David Clinton",
+ }],
+];
+
+for (const authorSet of exampleAuthors) {
+ displayAuthors(authorSet);
+
+ const authorCards = document.querySelectorAll("#author-container div");
+ const authorTitles = document.querySelectorAll("#author-container div h2");
+ assert.deepEqual(authorCards.length, authorTitles.length);
+ for (let i = 0; i < authorCards.length; i++) {
+ assert.deepEqual(authorCards[i].className, "user-card");
+ assert.deepEqual(authorCards[i].id, i.toString());
+ assert.deepEqual(authorTitles[i].className, "author-name");
+ assert.deepEqual(authorTitles[i].innerText, authorSet[i].author);
+ }
+ authorContainer.innerHTML = "";
+}
```
# --seed--
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da5dd6cd6db44f58b7787.md b/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da5dd6cd6db44f58b7787.md
deleted file mode 100644
index d2d4d64621c..00000000000
--- a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da5dd6cd6db44f58b7787.md
+++ /dev/null
@@ -1,144 +0,0 @@
----
-id: 641da5dd6cd6db44f58b7787
-title: Step 9
-challengeType: 0
-dashedName: step-9
----
-
-# --description--
-
-Inside your `displayAuthors` function, chain `.forEach()` to `authors`.
-
-# --hints--
-
-You should chain `.forEach()` to `authors`.
-
-```js
-assert.match(code, /authors\.forEach\(\s*\)/)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- freeCodeCamp News Author Page
-
-
-
-
freeCodeCamp News Author Page
-
-
-
-
-
-
-
-
-
-```
-
-```css
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-:root {
- --main-bg-color: #1b1b32;
- --light-grey: #f5f6f7;
- --dark-purple: #5a01a7;
- --golden-yellow: #feac32;
-}
-
-body {
- background-color: var(--main-bg-color);
- text-align: center;
-}
-
-.title {
- color: var(--light-grey);
- margin: 20px 0;
-}
-
-#author-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.user-card {
- border-radius: 15px;
- width: 300px;
- height: 350px;
- background-color: var(--light-grey);
- margin: 20px;
-}
-
-.user-img {
- width: 150px;
- height: 150px;
- object-fit: cover;
-}
-
-.purple-divider {
- background-color: var(--dark-purple);
- width: 100%;
- height: 15px;
-}
-
-.author-name {
- margin: 10px;
-}
-
-.bio {
- margin: 20px;
-}
-
-.error-msg {
- color: var(--light-grey);
-}
-
-.btn {
- cursor: pointer;
- width: 200px;
- margin: 10px;
- color: var(--main-bg-color);
- font-size: 14px;
- background-color: var(--golden-yellow);
- background-image: linear-gradient(#fecc4c, #ffac33);
- border-color: var(--golden-yellow);
- border-width: 3px;
-}
-```
-
-```js
-const authorContainer = document.getElementById('author-container');
-const loadMoreBtn = document.getElementById('load-more-btn');
-
-let startingIndex = 0;
-let endingIndex = 8;
-let authorDataArr = [];
-
-fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
- .then((res) => res.json())
- .then((data) => {
- console.log(data);
- })
- .catch((err) => {
- console.error(`There was an error: ${err}`);
- });
-
-const displayAuthors = (authors) => {
---fcc-editable-region--
-
---fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da615af82bf454215a992.md b/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da615af82bf454215a992.md
deleted file mode 100644
index 95fbbccb26d..00000000000
--- a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da615af82bf454215a992.md
+++ /dev/null
@@ -1,164 +0,0 @@
----
-id: 641da615af82bf454215a992
-title: Step 10
-challengeType: 0
-dashedName: step-10
----
-
-# --description--
-
-Pass an empty callback function to the `.forEach()` method. For the first parameter of the callback, destructure the `author`, `image`, `url`, and `bio` items.
-
-For the second parameter, pass in `index`. This will represent the position of each author, and will be useful for pagination later.
-
-# --hints--
-
-You should destructure `author`, `image`, `url`, and `bio` as the first parameter of your callback function. Don't forget to put them inside curly braces.
-
-```js
-assert.match(code, /authors\.forEach\(\s*\(\s*\{\s*(?:author\s*,\s*image\s*,\s*url\s*,\s*bio)|(?:image\s*,\s*author\s*,\s*url\s*,\s*bio)|(?:url\s*,\s*author\s*,\s*image\s*,\s*bio)|(?:author\s*,\s*url\s*,\s*image\s*,\s*bio)|(?:image\s*,\s*url\s*,\s*author\s*,\s*bio)|(?:url\s*,\s*image\s*,\s*author\s*,\s*bio)|(?:url\s*,\s*image\s*,\s*bio\s*,\s*author)|(?:image\s*,\s*url\s*,\s*bio\s*,\s*author)|(?:bio\s*,\s*url\s*,\s*image\s*,\s*author)|(?:url\s*,\s*bio\s*,\s*image\s*,\s*author)|(?:image\s*,\s*bio\s*,\s*url\s*,\s*author)|(?:bio\s*,\s*image\s*,\s*url\s*,\s*author)|(?:bio\s*,\s*author\s*,\s*url\s*,\s*image)|(?:author\s*,\s*bio\s*,\s*url\s*,\s*image)|(?:url\s*,\s*bio\s*,\s*author\s*,\s*image)|(?:bio\s*,\s*url\s*,\s*author\s*,\s*image)|(?:author\s*,\s*url\s*,\s*bio\s*,\s*image)|(?:url\s*,\s*author\s*,\s*bio\s*,\s*image)|(?:image\s*,\s*author\s*,\s*bio\s*,\s*url)|(?:author\s*,\s*image\s*,\s*bio\s*,\s*url)|(?:bio\s*,\s*image\s*,\s*author\s*,\s*url)|(?:image\s*,\s*bio\s*,\s*author\s*,\s*url)|(?:author\s*,\s*bio\s*,\s*image\s*,\s*url)|(?:bio\s*,\s*author\s*,\s*image\s*,\s*url)\s*\}/)
-```
-
-You should destructure `index` as the second parameter of your callback function. It has to be outside of the curly braces you put the others in.
-
-```js
-assert.match(code, /authors\.forEach\(\s*\(\s*\{.*\}\s*,\s*index\s*\)/)
-```
-
-Your callback function should use an arrow syntax.
-
-```js
-assert.match(code, /authors\.forEach\(\s*\(\s*\{.*\}\s*,\s*index\s*\)\s*=>\s*/)
-```
-
-Your callback function should be empty.
-
-```js
-assert.match(code, /authors\.forEach\(\s*\(\s*\{.*\}\s*,\s*index\s*\)\s*=>\s*\{\s*\}\s*\)\s*;?/)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- freeCodeCamp News Author Page
-
-
-
-
freeCodeCamp News Author Page
-
-
-
-
-
-
-
-
-
-```
-
-```css
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-:root {
- --main-bg-color: #1b1b32;
- --light-grey: #f5f6f7;
- --dark-purple: #5a01a7;
- --golden-yellow: #feac32;
-}
-
-body {
- background-color: var(--main-bg-color);
- text-align: center;
-}
-
-.title {
- color: var(--light-grey);
- margin: 20px 0;
-}
-
-#author-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.user-card {
- border-radius: 15px;
- width: 300px;
- height: 350px;
- background-color: var(--light-grey);
- margin: 20px;
-}
-
-.user-img {
- width: 150px;
- height: 150px;
- object-fit: cover;
-}
-
-.purple-divider {
- background-color: var(--dark-purple);
- width: 100%;
- height: 15px;
-}
-
-.author-name {
- margin: 10px;
-}
-
-.bio {
- margin: 20px;
-}
-
-.error-msg {
- color: var(--light-grey);
-}
-
-.btn {
- cursor: pointer;
- width: 200px;
- margin: 10px;
- color: var(--main-bg-color);
- font-size: 14px;
- background-color: var(--golden-yellow);
- background-image: linear-gradient(#fecc4c, #ffac33);
- border-color: var(--golden-yellow);
- border-width: 3px;
-}
-```
-
-```js
-const authorContainer = document.getElementById('author-container');
-const loadMoreBtn = document.getElementById('load-more-btn');
-
-let startingIndex = 0;
-let endingIndex = 8;
-let authorDataArr = [];
-
-fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
- .then((res) => res.json())
- .then((data) => {
- console.log(data);
- })
- .catch((err) => {
- console.error(`There was an error: ${err}`);
- });
-
-const displayAuthors = (authors) => {
- --fcc-editable-region--
- authors.forEach();
- --fcc-editable-region--
-};
-```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da6570acf7545931ce477.md b/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da6570acf7545931ce477.md
deleted file mode 100644
index 445ceb01f55..00000000000
--- a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da6570acf7545931ce477.md
+++ /dev/null
@@ -1,155 +0,0 @@
----
-id: 641da6570acf7545931ce477
-title: Step 11
-challengeType: 0
-dashedName: step-11
----
-
-# --description--
-
-Now it's time to start building the HTML for the page with your destructured data. You can do this with a combination of the compound assignment operator (`+=`) and the `innerHTML` property.
-
-Inside your callback function, use the compound assignment operator to append an empty template literal to the `innerHTML` of `authorContainer`.
-
-
-# --hints--
-
-You should access the `innerHTML` of `authorContainer`.
-
-```js
-assert.match(code, /authorContainer\.innerHTML\s*/)
-```
-
-You should use compound assignment to append an empty template literal to the `innerHTML` of `authorContainer`.
-
-```js
-assert.match(code, /authorContainer\.innerHTML\s*\+=\s*`\s*\n?\s*`\s*;?/)
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- freeCodeCamp News Author Page
-
-
-
-
freeCodeCamp News Author Page
-
-
-
-
-
-
-
-
-
-```
-
-```css
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-:root {
- --main-bg-color: #1b1b32;
- --light-grey: #f5f6f7;
- --dark-purple: #5a01a7;
- --golden-yellow: #feac32;
-}
-
-body {
- background-color: var(--main-bg-color);
- text-align: center;
-}
-
-.title {
- color: var(--light-grey);
- margin: 20px 0;
-}
-
-#author-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.user-card {
- border-radius: 15px;
- width: 300px;
- height: 350px;
- background-color: var(--light-grey);
- margin: 20px;
-}
-
-.user-img {
- width: 150px;
- height: 150px;
- object-fit: cover;
-}
-
-.purple-divider {
- background-color: var(--dark-purple);
- width: 100%;
- height: 15px;
-}
-
-.author-name {
- margin: 10px;
-}
-
-.bio {
- margin: 20px;
-}
-
-.error-msg {
- color: var(--light-grey);
-}
-
-.btn {
- cursor: pointer;
- width: 200px;
- margin: 10px;
- color: var(--main-bg-color);
- font-size: 14px;
- background-color: var(--golden-yellow);
- background-image: linear-gradient(#fecc4c, #ffac33);
- border-color: var(--golden-yellow);
- border-width: 3px;
-}
-```
-
-```js
-const authorContainer = document.getElementById('author-container');
-const loadMoreBtn = document.getElementById('load-more-btn');
-
-let startingIndex = 0;
-let endingIndex = 8;
-let authorDataArr = [];
-
-fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
- .then((res) => res.json())
- .then((data) => {
- console.log(data);
- })
- .catch((err) => {
- console.error(`There was an error: ${err}`);
- });
-
-const displayAuthors = (authors) => {
- authors.forEach(({ author, image, url, bio }, index) => {
---fcc-editable-region--
-
---fcc-editable-region--
- });
-};
-```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da6dcb6e4c9463d54c75b.md b/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da6dcb6e4c9463d54c75b.md
deleted file mode 100644
index ff459c0ce49..00000000000
--- a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da6dcb6e4c9463d54c75b.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-id: 641da6dcb6e4c9463d54c75b
-title: Step 12
-challengeType: 0
-dashedName: step-12
----
-
-# --description--
-
-Inside the template literal, create a `div` element with the `id` set to the `index` from the `.forEach()` array method. Remember to use string interpolation to do this.
-
-Also, add a `class` of `"user-card"` to the `div`.
-
-# --hints--
-
-You should create a `div` element with the class `"user-card"`.
-
-```js
-displayAuthors([{author: "Kolade"}]);
-assert.include(document.querySelector('#author-container > div')?.className, 'user-card');
-```
-
-Your `div` element should have the `id` of `index`. Remember to use string interpolation to set the `id`.
-
-```js
-displayAuthors([{author: "Naomi"}]);
-assert.equal(document.querySelector('#author-container > div')?.id, '0');
-```
-
-Your `div` element should be empty.
-
-```js
-assert.equal(document.querySelector('#author-container > div')?.innerText, '');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- freeCodeCamp News Author Page
-
-
-
-
freeCodeCamp News Author Page
-
-
-
-
-
-
-
-
-
-```
-
-```css
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-:root {
- --main-bg-color: #1b1b32;
- --light-grey: #f5f6f7;
- --dark-purple: #5a01a7;
- --golden-yellow: #feac32;
-}
-
-body {
- background-color: var(--main-bg-color);
- text-align: center;
-}
-
-.title {
- color: var(--light-grey);
- margin: 20px 0;
-}
-
-#author-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
-}
-
-.user-card {
- border-radius: 15px;
- width: 300px;
- height: 350px;
- background-color: var(--light-grey);
- margin: 20px;
-}
-
-.user-img {
- width: 150px;
- height: 150px;
- object-fit: cover;
-}
-
-.purple-divider {
- background-color: var(--dark-purple);
- width: 100%;
- height: 15px;
-}
-
-.author-name {
- margin: 10px;
-}
-
-.bio {
- margin: 20px;
-}
-
-.error-msg {
- color: var(--light-grey);
-}
-
-.btn {
- cursor: pointer;
- width: 200px;
- margin: 10px;
- color: var(--main-bg-color);
- font-size: 14px;
- background-color: var(--golden-yellow);
- background-image: linear-gradient(#fecc4c, #ffac33);
- border-color: var(--golden-yellow);
- border-width: 3px;
-}
-```
-
-```js
-const authorContainer = document.getElementById('author-container');
-const loadMoreBtn = document.getElementById('load-more-btn');
-
-let startingIndex = 0;
-let endingIndex = 8;
-let authorDataArr = [];
-
-fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
- .then((res) => res.json())
- .then((data) => {
- console.log(data);
- })
- .catch((err) => {
- console.error(`There was an error: ${err}`);
- });
-
-const displayAuthors = (authors) => {
- authors.forEach(({ author, image, url, bio }, index) => {
---fcc-editable-region--
- authorContainer.innerHTML += ``;
---fcc-editable-region--
- });
-};
-```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da7071d0d45467cd59977.md b/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da7071d0d45467cd59977.md
deleted file mode 100644
index b575baaf1e5..00000000000
--- a/curriculum/challenges/english/25-front-end-development/workshop-fcc-authors-page/641da7071d0d45467cd59977.md
+++ /dev/null
@@ -1,168 +0,0 @@
----
-id: 641da7071d0d45467cd59977
-title: Step 13
-challengeType: 0
-dashedName: step-13
----
-
-# --description--
-
-Now you need to show some information about the author. First, show the author's name.
-
-Create an `h2` tag with the `class` `"author-name"`. Then, interpolate `author` inside the `h2` tag. This is the author's name.
-
-
-# --hints--
-
-You should create an `h2` element within your `div` element.
-
-```js
-displayAuthors([{author: "Kolade"}]);
-assert.exists(document.querySelector('#author-container > div > h2'));
-```
-
-Your `h2` element should have a class set to `"author-name"`
-
-```js
-displayAuthors([{name: "Jane", height: 12}])
-assert.equal(document.querySelector('#author-container > div > h2')?.className, 'author-name');
-```
-
-You should interpolate the `author` in your `h2` tag to show the authors' names
-
-```js
-displayAuthors([{author: "Kolade"}]);
-assert.equal(document.querySelector('#author-container > div > h2')?.innerText, 'Kolade');
-```
-
-# --seed--
-
-## --seed-contents--
-
-```html
-
-
-
-
-
-
- freeCodeCamp News Author Page
-
-
-
-