mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
chore(curriculum): Authors Page add quotes to strings (#55436)
Co-authored-by: Sem Bauke <sem@freecodecamp.org> Co-authored-by: Naomi the Technomancer <accounts+github@nhcarrigan.com>
This commit is contained in:
Supravisor
+2
-2
@@ -15,11 +15,11 @@ Here is how you can make a `GET` request with the `fetch()` method:
|
||||
fetch("url-goes-here")
|
||||
```
|
||||
|
||||
Make a `GET` request to this URL: `https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json`. Don't terminate your code with a semicolon yet.
|
||||
Make a `GET` request to this URL: `"https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json"`. Don't terminate your code with a semicolon yet.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `fetch()` method to make a `GET` request to `https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json`.
|
||||
You should use the `fetch()` method to make a `GET` request to `"https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json"`.
|
||||
|
||||
```js
|
||||
assert.match(code, /fetch\(\s*('|"|`)https:\/\/cdn\.freecodecamp\.org\/curriculum\/news\-author\-page\/authors\.json\1\s*\)/)
|
||||
|
||||
+1
-1
@@ -24,7 +24,7 @@ Again, don't terminate the code with a semicolon yet.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `fetch()` method to make a `GET` request to `https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json`.
|
||||
You should use the `fetch()` method to make a `GET` request to `"https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json"`.
|
||||
|
||||
```js
|
||||
assert.match(code, /fetch\(\s*('|"|`)https:\/\/cdn\.freecodecamp\.org\/curriculum\/news\-author\-page\/authors\.json\1\s*\)/)
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@ Chain another `.then()` to the existing `.then()` method. This time, pass in `da
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `fetch()` method to make a `GET` request to `https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json`.
|
||||
You should use the `fetch()` method to make a `GET` request to `"https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json"`.
|
||||
|
||||
```js
|
||||
assert.match(code, /fetch\(\s*('|"|`)https:\/\/cdn\.freecodecamp\.org\/curriculum\/news\-author\-page\/authors\.json\1\s*\)/)
|
||||
|
||||
+1
-1
@@ -15,7 +15,7 @@ Chain `.catch()` to the last `.then()`. Pass in a callback function with `err` a
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `fetch()` method to make a `GET` request to `https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json`.
|
||||
You should use the `fetch()` method to make a `GET` request to `"https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json"`.
|
||||
|
||||
```js
|
||||
assert.match(code, /fetch\(\s*('|"|`)https:\/\/cdn\.freecodecamp\.org\/curriculum\/news\-author\-page\/authors\.json\1\s*\)/)
|
||||
|
||||
+2
-2
@@ -9,11 +9,11 @@ dashedName: step-12
|
||||
|
||||
Inside the template literal, create a `div` element with the `id` set to the `index` from the `.forEach()` array method. Remember to use template interpolation to do this.
|
||||
|
||||
Also, add a `class` of `user-card` to the `div`.
|
||||
Also, add a `class` of `"user-card"` to the `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element with the class `user-card`.
|
||||
You should create a `div` element with the class `"user-card"`.
|
||||
|
||||
```js
|
||||
displayAuthors([{author: "Kolade"}]);
|
||||
|
||||
+2
-2
@@ -9,7 +9,7 @@ dashedName: step-13
|
||||
|
||||
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.
|
||||
Create an `h2` tag with the `class` `"author-name"`. Then, interpolate `author` inside the `h2` tag. This is the author's name.
|
||||
|
||||
|
||||
# --hints--
|
||||
@@ -21,7 +21,7 @@ displayAuthors([{author: "Kolade"}]);
|
||||
assert.exists(document.querySelector('#author-container > div > h2'));
|
||||
```
|
||||
|
||||
Your `h2` element should have a class set to `author-name`
|
||||
Your `h2` element should have a class set to `"author-name"`
|
||||
|
||||
```js
|
||||
displayAuthors([{name: "Jane", height: 12}])
|
||||
|
||||
+3
-3
@@ -9,7 +9,7 @@ dashedName: step-15
|
||||
|
||||
Now `authorDataArr` is the same as the `data` you logged to the console a while ago. Log `authorDataArr` to the console to confirm this.
|
||||
|
||||
Inside your `console.log()` statement, add the text `Author Data Array:` as the first argument and `authorDataArr` as the second argument. Use comma to separate the text from `authorDataArr`.
|
||||
Inside your `console.log()` statement, add the text `"Author Data Array:"` as the first argument and `authorDataArr` as the second argument. Use comma to separate the text from `authorDataArr`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -19,13 +19,13 @@ You should assign `data` to the `authorDataArr` variable
|
||||
assert.match(code, /authorDataArr\s*=\s*data\s*;?/)
|
||||
```
|
||||
|
||||
You should have a console log with the text `Author Data Array:`.
|
||||
You should have a console log with the text `"Author Data Array:"`.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(\s*("|'|`)Author\s+Data\s+Array:\s*\1/)
|
||||
```
|
||||
|
||||
You should use comma to separate your `Author Data Array:` text and `authorDataArr`.
|
||||
You should use comma to separate your `"Author Data Array:"` text and `authorDataArr`.
|
||||
|
||||
```js
|
||||
assert.match(code, /console\.log\(\s*("|'|`)Author\s+Data\s+Array:\s*\1\s*,/)
|
||||
|
||||
+2
-2
@@ -7,7 +7,7 @@ dashedName: step-17
|
||||
|
||||
# --description--
|
||||
|
||||
Now create an image tag and give it the `class` `user-img`. Use template interpolation to set the `src` attribute to `image` you destructured earlier. Set the `alt` attribute to `author` followed by the text `avatar`. Make sure there is a space between the `author` variable and the word `avatar`, for example, `Quincy Larson avatar`.
|
||||
Now create an image tag and give it the `class` `"user-img"`. Use template interpolation to set the `src` attribute to `image` you destructured earlier. Set the `alt` attribute to `author` followed by the text `"avatar"`. Make sure there is a space between the `author` variable and the word `"avatar"`, for example, `"Quincy Larson avatar"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -29,7 +29,7 @@ const retryingTest = (test, message, tries = 20) => {
|
||||
() => retryingTest(() => document.querySelector('img'), "'img' element not found");
|
||||
```
|
||||
|
||||
Your `img` element should have the class `user-img`.
|
||||
Your `img` element should have the class `"user-img"`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('img')?.className, "user-img");
|
||||
|
||||
+2
-2
@@ -9,7 +9,7 @@ dashedName: step-18
|
||||
|
||||
The next thing you'll show are biographical details about the author. You can do this with `bio` that you destructured earlier.
|
||||
|
||||
Add a paragraph element with the `class` `bio`, then interpolate `bio` inside the paragraph element.
|
||||
Add a paragraph element with the `class` `"bio"`, then interpolate `bio` inside the paragraph element.
|
||||
|
||||
|
||||
# --hints--
|
||||
@@ -20,7 +20,7 @@ You should create a `p` element.
|
||||
assert.exists(document.querySelector('p'));
|
||||
```
|
||||
|
||||
Your `p` element should have the class `bio`
|
||||
Your `p` element should have the class `"bio"`
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('p')?.className, 'bio');
|
||||
|
||||
+4
-4
@@ -9,7 +9,7 @@ dashedName: step-19
|
||||
|
||||
Next, add a link to the author's page on freeCodeCamp News.
|
||||
|
||||
Add an anchor element with the `class` `author-link`, interpolate `url` as the value for the `href` attribute, and set `target` to `_blank`. For the text of the anchor element, interpolate `author` followed by the text `'s author page`. For example, `Quincy Larson's author page`.
|
||||
Add an anchor element with the `class` `"author-link"`, interpolate `url` as the value for the `href` attribute, and set `target` to `"_blank"`. For the text of the anchor element, interpolate `author` followed by the text `"'s author page"`. For example, `"Quincy Larson's author page"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -19,7 +19,7 @@ You should create an anchor element.
|
||||
assert.exists(document.querySelector('a'));
|
||||
```
|
||||
|
||||
Your anchor element should have the class `author-link`.
|
||||
Your anchor element should have the class `"author-link"`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('a')?.className, "author-link");
|
||||
@@ -31,13 +31,13 @@ You should interpolate `url` as the value of your anchor's `href` attribute.
|
||||
assert.equal(document.querySelector('a')?.getAttribute('href'), authorDataArr[0].url);
|
||||
```
|
||||
|
||||
You should set the `target` attribute of your anchor element to `_blank`.
|
||||
You should set the `target` attribute of your anchor element to `"_blank"`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('a')?.getAttribute('target'), '_blank');
|
||||
```
|
||||
|
||||
You should interpolate `author` followed by the text `'s author page` inside your anchor element.
|
||||
You should interpolate `author` followed by the text `"'s author page"` inside your anchor element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('a')?.textContent.trim(), `${authorDataArr[0].author}'s author page`);
|
||||
|
||||
+2
-2
@@ -9,7 +9,7 @@ dashedName: step-23
|
||||
|
||||
Remember that in step 1 you selected the `Load More Authors` button and assigned it to `loadMoreBtn`.
|
||||
|
||||
Use `addEventListener` to add a `click` event listener to `loadMoreBtn`. Also, pass in a reference to the `fetchMoreAuthors` function to run whenever the button is clicked.
|
||||
Use `addEventListener` to add a `"click"` event listener to `loadMoreBtn`. Also, pass in a reference to the `fetchMoreAuthors` function to run whenever the button is clicked.
|
||||
|
||||
After that, when you click the button you should see 8 more authors.
|
||||
|
||||
@@ -21,7 +21,7 @@ You should call the `addEventListener()` method on your `loadMoreBtn` variable.
|
||||
assert.match(code, /loadMoreBtn\.addEventListener\(/)
|
||||
```
|
||||
|
||||
Your event listener should listen for a `click` event.
|
||||
Your event listener should listen for a `"click"` event.
|
||||
|
||||
```js
|
||||
assert.match(code, /loadMoreBtn\.addEventListener\(\s*('|"|`)click\1/)
|
||||
|
||||
+2
-2
@@ -7,7 +7,7 @@ dashedName: step-25
|
||||
|
||||
# --description--
|
||||
|
||||
If this condition is met, disable the button by setting its `disabled` property to `true`. Also, set the `textContent` of the button to `No more data to load`.
|
||||
If this condition is met, disable the button by setting its `disabled` property to `true`. Also, set the `textContent` of the button to `"No more data to load"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -17,7 +17,7 @@ You should set the `disabled` property of `loadMoreBtn` to `true`.
|
||||
assert.match(code, /loadMoreBtn\.disabled\s*=\s*true\s*;?/)
|
||||
```
|
||||
|
||||
You should set the `textContent` of `loadMoreBtn` to `No more data to load`.
|
||||
You should set the `textContent` of `loadMoreBtn` to `"No more data to load"`.
|
||||
|
||||
```js
|
||||
assert.match(code, /loadMoreBtn\.textContent\s*=\s*('|"|`)No\s+more\s+data\s+to\s+load\1\s*;?/)
|
||||
|
||||
+2
-2
@@ -9,7 +9,7 @@ dashedName: step-26
|
||||
|
||||
Next, there's not a lot of separation between each author's name and image, and the rest of the details on the card. A divider will give the author cards a clear visual hierarchy.
|
||||
|
||||
Add a `div` element above the author's bio and give it the `class` `purple-divider`.
|
||||
Add a `div` element above the author's bio and give it the `class` `"purple-divider"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -19,7 +19,7 @@ You should create a `div` element before your `p` element.
|
||||
assert.equal(document.querySelector('p')?.previousElementSibling?.tagName, 'DIV');
|
||||
```
|
||||
|
||||
Your `div` element should have the `class` set to `purple-divider`.
|
||||
Your `div` element should have the `class` set to `"purple-divider"`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('p')?.previousElementSibling?.className, 'purple-divider');
|
||||
|
||||
+2
-2
@@ -7,7 +7,7 @@ dashedName: step-27
|
||||
|
||||
# --description--
|
||||
|
||||
Some of the author bios are much longer than others. To give the cards a uniform look, you can extract the first 50 characters of each one and replace the rest with an ellipsis (...). Otherwise, you can show the entire bio.
|
||||
Some of the author bios are much longer than others. To give the cards a uniform look, you can extract the first 50 characters of each one and replace the rest with an ellipsis `("...")`. Otherwise, you can show the entire bio.
|
||||
|
||||
Within the paragraph element, replace `bio` with a ternary operator. For the condition, check if the length of `bio` is greater than 50. If it is, use the `.slice()` method to extract the first 50 characters of `bio` and add an ellipsis at the end. Otherwise, show the full `bio`.
|
||||
|
||||
@@ -31,7 +31,7 @@ You should check if the length of the `bio` text is greater than `50`.
|
||||
assert.match(code, /<p\s*class=("|')bio\1>\s*\$\{\s*bio\.length\s*>\s*50/)
|
||||
```
|
||||
|
||||
If the `bio` text is greater than `50` characters, you should extract the first 50 characters with `slice()` and replace the rest with `...`. Don't forget that indexes are zero-based.
|
||||
If the `bio` text is greater than `50` characters, you should extract the first 50 characters with `slice()` and replace the rest with `"..."`. Don't forget that indexes are zero-based.
|
||||
|
||||
```js
|
||||
assert.match(code, /<p\s*class\s*=\s*("|')bio\1\s*>\s*\$\{\s*bio\.length\s*>\s*50\s*\?\s*(?:bio\.slice\(\s*0\s*,\s*50\s*\)\s*\+\s*("|')\.\.\.\2|`\$\{\s*bio\.slice\(\s*0\s*,\s*50\s*\)\s*\}\.\.\.`)\s*:/);
|
||||
|
||||
+3
-3
@@ -9,7 +9,7 @@ dashedName: step-28
|
||||
|
||||
Finally, what if there's an error and the author data fail to load? Then we need to show an error in the UI. That's exactly what the `.catch()` method is for – handling errors.
|
||||
|
||||
Inside the `.catch()`, remove the `console.error()` and set the `innerHTML` of the `authorContainer` to a `p` element with the `class` `error-msg` and text `There was an error loading the authors`.
|
||||
Inside the `.catch()`, remove the `console.error()` and set the `innerHTML` of the `authorContainer` to a `p` element with the `class` `"error-msg"` and text `"There was an error loading the authors"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -26,13 +26,13 @@ You should access the `innerHTML` of `authorContainer` and set it to a `p` eleme
|
||||
assert.match(code, /authorContainer\.innerHTML\s*=\s*(`|"|')\s*<p.*>.*<\/p>\s*\1/)
|
||||
```
|
||||
|
||||
Your `p` element should have the class `error-msg`.
|
||||
Your `p` element should have the class `"error-msg"`.
|
||||
|
||||
```js
|
||||
assert.match(code, /(`|"|')\s*<p\s+class\s*=\s*("|')error-msg\2>/)
|
||||
```
|
||||
|
||||
Your `p` element should have the text `There was an error loading the authors`.
|
||||
Your `p` element should have the text `"There was an error loading the authors"`.
|
||||
|
||||
```js
|
||||
assert.match(code, /(`|"|')<p\s+class\s*=\s*("|')error-msg\2>There\s+was\s+an\s+error\s+loading\s+the\s+authors<\/p>\s*\1\s*;?/)
|
||||
|
||||
+3
-3
@@ -7,9 +7,9 @@ dashedName: step-29
|
||||
|
||||
# --description--
|
||||
|
||||
One more thing. If you keep clicking the `Load More Authors` button until there's no more data to load and the text changes to `No more data to load`, the cursor value is still `pointer`. Why not change the cursor value to `not-allowed` instead?
|
||||
One more thing. If you keep clicking the `Load More Authors` button until there's no more data to load and the text changes to `"No more data to load"`, the cursor value is still `pointer`. Why not change the cursor value to `not-allowed` instead?
|
||||
|
||||
Access the `style` property of the `Load More Authors` button and set `cursor` to `not-allowed`.
|
||||
Access the `style` property of the `Load More Authors` button and set `cursor` to `"not-allowed"`.
|
||||
|
||||
With that, your author page is complete!
|
||||
|
||||
@@ -27,7 +27,7 @@ You should access `cursor` from the `style` property with dot notation.
|
||||
assert.match(code, /loadMoreBtn\.style\.cursor/)
|
||||
```
|
||||
|
||||
You should set the value of the `cursor` property to `not-allowed`.
|
||||
You should set the value of the `cursor` property to `"not-allowed"`.
|
||||
|
||||
```js
|
||||
assert.match(code, /loadMoreBtn\.style\.cursor\s*=\s*('|"|`)not\-allowed\1\s*;?/)
|
||||
|
||||
Reference in New Issue
Block a user