Today has been relatively uneventful. I encountered some coding difficulties but overcame them through diligent research. I completed the Authors Page project and have since begun a new endeavor. Our current focus is on learning asynchronous programming, which we are doing by constructing an FCC Forum Leaderboard.
Today, Alex is at home as he has no classes. He took care of O’Malley as Karissa informed him that she couldn’t look after the pets today due to her chores and needing a break. On my end, I kept an eye on Merlin. It will be a relief when our furry companions grow older and can explore without constant supervision.
Alexis woke up at 4 a.m. this morning feeling nervous about her math final at 8. However, I’m confident that she did well. I advised her to rest later. Last week, Alexis called her sister to tell her she was coming home this weekend. Both Chris and Alexis will be home for the summer. The garage is going to be looking crowded. Maybe we should get a storage unit for the summer? But that doesn’t make sense since the kids will still need their things.
Despite the warm temperature outside, the wind is quite strong today, which makes it less enjoyable. We are having tacos tonight for Taco Tuesday. 🙂 I still need to pick up my medication from the pharmacy. I’d like to do that Thursday when Kel is home.
JavaScript notes…
——————————
FreeCodeCamp News Author Page steps 16 – 29
Step 16
Now it’s time to call the displayAuthors function. But again, you don’t want to populate the page with all the authors at once. Instead, you can extract a portion of the authors with the startingIndex and endingIndex variables. The best method to do this is the .slice() array method.
First, remove the console log statement showing authorDataArr. Then, call the displayAuthors function with the authorDataArr array and .slice(). Use the startingIndex variable for the starting point and the endingIndex variable for the ending point.
displayAuthors(authorDataArr.slice(startingIndex, endingIndex))
Step 17
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.
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.
${bio}
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.
${author}'s author page
Step 20
Now you have everything you want to include in the UI. The next step is to make the Load More Authors button fetch more authors whenever it’s clicked. You can do this by adding a click event to the button and carefully incrementing the startingIndex and endingIndex variables.
Create a fetchMoreAuthors function with the arrow function syntax. Don’t put anything in it yet. Make sure you use curly braces because you’ll have more than one expression inside the function.
const fetchMoreAuthors = () => {}
Step 21
Inside the fetchMoreAuthors function, set the startingIndex and endingIndex variables to += 8 each.
startingIndex += 8; endingIndex += 8;
Step 22
Now call the displayAuthors function with a portion of the author data just like you did before.
If you click the Load More Authors button after calling the function, it won’t work. That’s because you still have to add the click event listener to the button. You’ll do that next.
displayAuthors(authorDataArr.slice(startingIndex, endingIndex))
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.
After that, when you click the button you should see 8 more authors.
loadMoreBtn.addEventListener("click", fetchMoreAuthors)
Step 24
Your fCC Authors Page is now complete. But you could improve on a few things.
First, if you click the Load More Authors button a couple of time, you’ll see that it won’t add more authors to the page. That’s because you’ve reached the end of the authors list. For a better user experience, you should make it clear when there’s no more data to display by disabling the button and changing its text. An if statement is the perfect tool for this.
Inside the fetchMoreAuthors function, write an if statement and set the condition to authorDataArr.length <= endingIndex – meaning there's no more data to load.
if (authorDataArr.length <= endingIndex) {
}
Step 25
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.
loadMoreBtn.disabled = true;
loadMoreBtn.textContent = 'No more data to load';
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.
Step 27
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.
${bio.length > 50 ? bio.slice(0, 50) + '...' : bio}
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.
authorContainer.innerHTML = `There was an error loading the authors
`;
Step 29
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.
With that, your author page is complete!
loadMoreBtn.style.cursor = 'not-allowed';
