I had a productive day coding today and successfully completed the Forum Leaderboard project. Now, I am contemplating what to work on next. Unfortunately, FreeCodeCamp did not save my progress on a few past projects, so I am considering finishing those to receive credit for them. Then, I wonder if I should keep doing JavaScript or start up on HTML. I’d like to keep up with JavaScript. I will see what more FreeCodeCamp has to offer.
Regarding reading, I have not started reading “Part of Your World” yet. I intended to start last night but remembered I had a few tasks to complete before bed. After washing my face, I exfoliated last night, and my face just started burning! That has never happened before. Is the vitamin C serum that I had on yesterday too strong for my skin? My face feels better this morning, but I only put on essence and moisturizer. I didn’t put on sunscreen since I was inside all day.
We are leaving tonight to go to Lexi’s school. Tommy is leaving work early before his therapy appointment. Kel went to Chris’s school, and he was moved out of the dorm for the summer. I still think we should get a storage unit for the summer to house the kids’ mini fridge and other things.
I need to pack, including my laptop, so I’m posting this early. Hopefully, Kel will get here soon so we can go pay rent.
JavaScript notes…
—————————
freecodecamp Forum Leaderboard steps 41 – 67
Step 41
Add a new key for the number 409 with a value of an empty object.
Inside that object, add a property with a key of category and a string value of Project Feedback.
Below that property, add another key called className with a string value of feedback.
const allCategories = {
299: { category: "Career Advice", className: "career" },
409: { category: "Project Feedback",
className: "feedback" }
};
Step 42
Add a new key for the number 417 with a value of an empty object.
Inside that object, add a property with a key of category and a string value of freeCodeCamp Support.
Below that property, add another key called className with a string value of support.
const allCategories = {
299: { category: "Career Advice", className: "career" },
409: { category: "Project Feedback", className: "feedback" },
417: { category: "freeCodeCamp Support", className: "support" }
};
Step 43
The rest of the allCategories object has been completed for you.
In the next few steps, you will create a function to retrieve the category name from the allCategories object.
Start by creating an arrow function named forumCategory, with id as the parameter name.
const forumCategory = (id) => {}
Step 44
Inside your forumCategory function, create a new let variable named selectedCategory and assign it an empty object. This will be used to store the category name and class name for each category.
const forumCategory = (id) => {
let selectedCategory = {}
};
Step 45
Create an if statement to check if the allCategories object has a property of id. Remember, you can use the hasOwnProperty() method for this.
forumCategory = (id) => {
let selectedCategory = {};
if (allCategories.hasOwnProperty(id)) {
}
};
Step 46
Inside the if statement, destructure className and category from the allCategories[id] object.
const forumCategory = (id) => {
let selectedCategory = {};
if (allCategories.hasOwnProperty(id)) {
const { className, category } = allCategories[id]
}
};
Step 47
You now need to update the className and category for your selectedCategory object.
Start by assigning the className property to selectedCategory.className. Then assign category to selectedCategory.category.
if (allCategories.hasOwnProperty(id)) {
const { className, category } = allCategories[id];
selectedCategory.className = className;
selectedCategory.category = category;
}
Step 48
If the id is not in the allCategories object, you will need to display the General category.
Below your if statement, add an else clause.
if (allCategories.hasOwnProperty(id)) {
const { className, category } = allCategories[id];
selectedCategory.className = className;
selectedCategory.category = category;
} else {
}
Step 49
Inside your else statement, assign the string general to selectedCategory.className.
Below that, assign the string General to selectedCategory.category.
Lastly, assign the number 1 to selectedCategory.id.
selectedCategory.className = "general"; selectedCategory.category = "General"; selectedCategory.id = 1;
Step 50
Every category will have a URL that points to the category on the freeCodeCamp forum.
Create a constant called url and assign it a template literal. Inside that template literal, place the value of ${forumCategoryUrl}${selectedCategory.className}/${id}.
const url = `${forumCategoryUrl}${selectedCategory.className}/${id}`;
Step 51
Create a constant called linkText and assign it the value of selectedCategory.category. This will display the name of the category in the anchor element.
const linkText = selectedCategory.category;
Step 52
Create a constant called linkClass and assign it a template literal. Inside that template literal, add the value of category ${selectedCategory.className}.
These class names will be used to apply styles for the anchor element.
const linkClass = `category ${selectedCategory.className}`;
Step 53
Next, return an anchor element inside template literals. For the href attribute, assign the value of the url constant.
return ``;
Step 54
After the href attribute, set the class attribute to the constant named linkClass.
After the class attribute, set the target attribute to _blank.
Lastly, place the linkText constant in between the anchor tags to display the text in the link.
return `${linkText}`;
Step 55
Inside the first td element, add an embedded expression ${}. Inside that expression, call the forumCategory function with the argument of category_id.
Now, you should see a category displayed underneath each post topic.
${forumCategory(category_id)}
Step 56
Each forum post will include a list of user avatar images which represent all of the users participating in the conversation for that topic.
Start by creating an arrow function called avatars, with two parameters called posters and users.
const avatars = (posters, users) => {}
Step 57
The next step is to loop through the posters array to get all of their avatars.
Start by adding a return keyword followed by posters.map(). For the callback function, add a parameter called poster.
const avatars = (posters, users) => {
return posters.map((poster) => {})
};
Step 58
The next step is to find the correct user in the users array.
Start by creating a constant called user and assign it users.find(). The find method should have a callback function with a parameter of user.
Inside the find method, implicitly return user.id strictly equal to poster.user_id.
const avatars = (posters, users) => {
return posters.map((poster) => {
const user = users.find((user) => user.id === poster.user_id)
});
};
Step 59
Next, check if the user exists. Add an if statement with user for the condition.
if (user) {
}
Step 60
To customize the avatar’s size, you can set it to a value of 30.
Start by creating a constant called avatar. Then assign it the result of using the replace method on user.avatar_template.
For the replace method, use /{size}/ for the first argument and the number 30 for the second argument.
if (user) {
const avatar = user.avatar_template.replace(/{size}/, 30)
}
Step 61
Next, you will construct the userAvatarUrl.
Start by creating a constant called userAvatarUrl. Then use a ternary operator to check if avatar starts with “/user_avatar/”.
If so, use the concat method to concatenate avatar to avatarUrl. Otherwise return avatar.
This will ensure the avatar URL is correctly formed whether it’s a relative or absolute URL.
const userAvatarUrl = avatar.startsWith("/user_avatar/") ? avatarUrl.concat(avatar) : avatar;
Step 62
Lastly, you will need to return the image for the user avatar.
Start by adding a return followed by a set of template literals. Inside the template literals, add an img element.
Inside the img element, add a src attribute with the value of ${userAvatarUrl}. For the alt attribute, add a value of ${user.name}.
return ``
Step 63
At the end of your map method, chain the join() method. For the separator, pass in an empty string.
map.join("")
Step 64
For the remaining steps, you will add the functionality to display the user avatars.
Inside the second td element, add a div element with a class name of avatar-container.
Step 65
Inside the div element, call the avatars function and pass in the arguments of posters and users.
Now you should see the avatars displayed on the page.
${avatars(posters, users)}
Step 66
Your project is almost complete. It is just missing one last piece.
Users should be able to click on any post title and be directed to the actual post on the freeCodeCamp forum.
Start by changing the existing paragraph element inside the first td element to be an anchor element.
${title}
Step 67
For the opening a tag, set the target attribute to _blank. Then, set the href attribute to ${forumTopicUrl}${slug}/${id}.
And with those changes, your freeCodeCamp forum leaderboard project is now complete!
${title}
