We’re having carne adovada for dinner tonight, and the chile sauce is quite spicy. I made the sauce a while ago, and the pork is now marinating. Fortunately, we have some sour cream to help with the heat.
Today, I spent most of my time coding, which was quite challenging. Sometimes, I needed more time to find the solution to the problem, so I spent hours researching it. However, it later turned out that I wasn’t reading the problem correctly, and the fix was easy. I enjoy coding, but at times, it can be frustrating.
I’m not a fan of the wind, and neither is Merlin. I wish it would warm up so he could spend more time outside since he likes being out there. Karissa is taking care of O’Malley today. One day, these pets will have to be able to roam around the house without our assistance.
I don’t have much to share at present. However, I would like to make some notes on the book I’m reading in preparation for my therapy session tomorrow. A quote resonated with me: “Unsafe people don’t forgive; they condemn.” This led me to ponder whether one could be deemed unsafe if one could not forgive. I found the chapter on religion and sins somewhat perplexing. Still, as I’m not religious, perhaps that’s to be expected. Honestly, I don’t know why a self-help book that doesn’t claim to be religious would have a whole chapter on sins in the spiritual sense – if there is another sense to the word, I don’t know it. I don’t know; I just feel that if a self-help book is religious, they should advertise it on the book itself. I don’t know if I will bring up how I keep griping about the spiritual aspects of this book. But I may mention that some of it is lost on me.
I went to a Christian Sunday School with a friend as a kid. They would give out candy and money if you could memorize passages or quotes, which was the whole reason I went. However, my aunt Vita disapproved of this, as we are Catholic, and believed I should attend a Catholic church instead. As a result, I only attended for a brief period. I suspect my mother shared similar sentiments.
Although my mom and aunt are devoutly religious, attending church was never a regular part of my family’s routine. I suspect that my mom, in particular, does not enjoy the crowds that typically accompany church services. My dad would have been happy to make my mom happy and attend church if she wanted to. Nevertheless, my extended family holds their faith in high esteem. I remember when my aunt Ponciana from the Philippines visited. She went around our home and offered prayers for various houseplants she deemed unsuitable. While I didn’t fully comprehend her actions, I found it amusing to watch her bicker with my mom over this matter.
Oh, geez. Mother’s Day is coming up next weekend. Since my mom and I don’t get along and talk, this has always been a bittersweet holiday. I’m always excited to celebrate because of my girls. But then I think of my own mom, and all my excitement dwindles away. I wonder what she is up to and what she does with her time. I don’t dare ask, though. My uncle always asks me why I don’t speak to my mom. Because I’m scared to. But I guess it goes both ways. But she certainly isn’t afraid to talk to me.
Tommy and I started watching another anime show, Spice and Wolf: Merchant Meets the Wise Wolf. Will we finish some of the other anime shows we started watching? 🙂 I want to list out all the anime we are watching. But I can’t remember all the names.
JavaScript notes…
——————————
FreeCodeCamp Forum Leaderboard steps 1 – 20
Step 1
In this project, you will build a freeCodeCamp forum leaderboard that displays the latest topics, users, and replies from the freeCodeCamp forum. The HTML and CSS have been provided for you. Feel free to explore them.
When you are ready, use const to declare a forumLatest variable and assign it the string https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json.
Below that, create another const variable called forumTopicUrl and assign it the string https://forum.freecodecamp.org/t/.
const forumLatest = "https://cdn.freecodecamp.org/curriculum/forum-latest/latest.json" const forumTopicUrl ="https://forum.freecodecamp.org/t/"
Step 2
Next, create a const variable called forumCategoryUrl and assign it the string https://forum.freecodecamp.org/c/.
Below that, create another const variable called avatarUrl and assign it the string https://sea1.discourse-cdn.com/freecodecamp.
const forumCategoryUrl = "https://forum.freecodecamp.org/c/" const avatarUrl = "https://sea1.discourse-cdn.com/freecodecamp"
Step 3
Next, access the #posts-container element by using the getElementById() method. Assign it to a new constant called postsContainer.
const postsContainer = document.getElementById('posts-container');
Step 4
To populate the forum leaderboard with data, you will need to request the data from an API. This is known as an asynchronous operation, which means that tasks execute independently of the main program flow.
You can use the async keyword to create an asynchronous function, which returns a promise.
const example = async () => {
console.log(“this is an example”);
};
Use the async keyword to create an asynchronous arrow function called fetchData.
const fetchData = async () => {}
Step 5
In the last project, you used the .catch() method to handle errors. Here you’ll use a try…catch statement instead.
The try block is designed to handle potential errors, and the code inside the catch block will be executed in case an error occurs.
try {
const name = “freeCodeCamp”;
name = “fCC”;
} catch (err) {
console.log(err); // TypeError: Assignment to constant variable.
}
Inside your fetchData function, add a try…catch statement. The catch block should have an error parameter named err.
const fetchData = async () => {
try {
} catch (err) {
}
}
Step 6
In the previous project, you used fetch() with the .then() method to perform logic after the promise was resolved. Now you will use the await keyword to handle the asynchronous nature of the fetch() method.
The await keyword waits for a promise to resolve and returns the result.
const example = async () => {
const data = await fetch(“https://example.com/api”);
console.log(data);
}
Inside the try block, create a constant called res and assign it await fetch(). For the fetch call, pass in the forumLatest variable.
const fetchData = async () => {
try {
const res = await fetch(forumLatest);
} catch (err) {
}
};
Step 7
You want to get the response body as a JSON object. The .json() method of your res variable returns a promise, which means you will need to await it.
Create a constant called data and assign it the value of await res.json().
const fetchData = async () => {
try {
const res = await fetch(forumLatest);
const data = await res.json();
} catch (err) {
}
};
Step 8
To view the data results, log the data variable to the console inside your try block.
Below your fetchData definition, call the function and open up the console to see the results.
const fetchData = async () => {
try {
const res = await fetch(forumLatest);
const data = await res.json();
console.log(data);
} catch (err) {
}
};
fetchData()
Step 9
If there is an error from the fetch call, the catch block will handle it.
Inside the catch block, add a console.log to log the err parameter.
Also, remove your console.log(data); from your try block now that you understand what is being returned from the fetch call.
const fetchData = async () => {
try {
const res = await fetch(forumLatest);
const data = await res.json();
} catch (err) {
console.log(err);
}
};
fetchData();
Step 10
Now it is time to display the data on the page.
Start by creating an arrow function called showLatestPosts, which takes a single data parameter.
const showLatestPosts = (data) => {}
Step 11
As you build out your showLatestPosts() function, you’ll need to call it to see your changes.
Call the showLatestPosts() function at the end of your try block and pass in data for the argument.
const fetchData = async () => {
try {
const res = await fetch(forumLatest);
const data = await res.json();
showLatestPosts(data);
} catch (err) {
console.log(err);
}
};
Step 12
Back in your showLatestPosts() function, use destructuring to get the topic_list and users properties from the data object.
const showLatestPosts = (data) => {
const {topic_list, users} = data;
};
Step 13
The topic_list object contains a topics array which contains the latest topics posted to the forum.
Destructure the topics array from the topic_list object.
const showLatestPosts = (data) => {
const { topic_list, users } = data;
const { topics } = topic_list;
};
Step 14
Now it is time to start populating the data inside the postsContainer.
Start by calling the map() method on your topics array. For the callback function, use an empty arrow function that takes item as a parameter.
Then assign the result of the map() method to postsContainer.innerHTML.
const showLatestPosts = (data) => {
const { topic_list, users } = data;
const { topics } = topic_list;
postsContainer.innerHTML = topics.map((item) => {})
};
Step 15
Inside the map method, destructure the following properties from the item object:
id
title
views
posts_count
slug
posters
category_id
bumped_at
postsContainer.innerHTML = topics.map((item) => {
const { id, title, views, posts_count, slug, posters, category_id, bumped_at } = item;
});
Step 16
The next step is to build out the table which will display the forum data.
Below your destructuring assignment, add a return keyword followed by a set of template literals. Inside those template literals, add a table row tr element.
postsContainer.innerHTML = topics.map((item) => {
const {
id,
title,
views,
posts_count,
slug,
posters,
category_id,
bumped_at,
} = item;
return `
Step 17
In the preview window, you should see a column of commas. To fix this, you should chain the join method to your map method. For the separator, pass in an empty string.
postsContainer.innerHTML = topics.map((item) => {
const {
id,
title,
views,
posts_count,
slug,
posters,
category_id,
bumped_at,
} = item;
return `
Step 18
Inside your tr element, add five empty td elements.
return `
`;
Step 19
To display the topic title, add a p element inside the first td element.
Between the paragraph tags, add an embedded expression that contains the title variable. Then add a class called post-title inside the opening paragraph tag.
return `
${title}
Step 20
Keep the second td element empty because you will add content to it later on.
In the third td element, add the following embedded expression: ${posts_count – 1}.
This will display the number of replies to the topic.
return `
${title}
${posts_count - 1}
Category: Uncategorized
Skip to toolbar
- Log In
Not optimized