My weekend was low-key, with little happening on Friday and Saturday. However, on Friday, I had a therapy session where we discussed the book he recommended, “Safe People.” While it has some good points, I’m struggling to fully express my thoughts. The religious undertones throughout the book feel excessive, with bible quotes on nearly every page. Despite being the target audience, it takes work to relate to the material. I’m about a quarter of the way through the book and understand what constitutes an unsafe person. Now, I’m eager to learn about identifying and dealing with these types of individuals and becoming a safe person myself… yes, it means doing the opposite of what the book suggests. /facepalm
I’m curious about the warning signs we should watch out for, as many dangerous individuals can quickly appear trustworthy. For instance, my ex initially seemed like a safe person. Initially, I continued to spend time with friends and engage in solo activities. Over time, he gradually isolated me from my social circle and became overly controlling of my whereabouts and activities. Unfortunately, I was also dealing with the loss of my dad during this period, which may have made it harder for me to recognize the signs of danger.
Over the weekend, I found a quote that caught my attention: “Unsafe people don’t forgive; they condemn.” It struck a chord with me because I’ve experienced how an unsafe person can hold a grudge, use your actions or words against you, and punish you for it. Obviously, that’s not right. However, I also wonder about the other end of the spectrum. This safe person forgives constantly to avoid condemning others. Is there a line where even the most forgiving person has to draw it and say enough is enough? Especially when it’s a recurring issue or an unforgivable offense. The book says nothing about how a safe person can forgive an unsafe person too much and how that can be troublesome.
Over the weekend, Tommy and I decided to visit the zoo. The place was packed with visitors for the Run for the Zoo event. Despite the crowds, we had a great time and even discussed doing it again next year. Tommy, who had just got a new camera lens, took the opportunity to capture some fantastic shots of the animals.
Today was productive, as coding for my new project is progressing smoothly. It’s not a complicated project, so I can complete it by tomorrow.
I had my medication management appointment today, which was a virtual session. Although my doctor ran a little late, I decided to wait for her instead of calling the office. During the appointment, she prescribed a supplement medication to complement one of my existing prescriptions and lowered the dosage of another. We scheduled a follow-up appointment in a month, and her office called me to confirm the date since it had been a while since my last visit. She feared our next visit would be months later instead of just one month. She did mention to me that she hadn’t seen me in months.
Our new kitten, O’Malley, is doing well. All our other animals, except Emily, are curious about the kitten. O’Malley is an orange tabby. His name comes from the character Thomas O’Malley, the male protagonist of Disney’s 1970 movie The Aristocats. As the character did in the film, our kitten was found on the streets.
JavaScript notes…
——————————-
FreeCodeCamp News Author Page steps 1 – 15
Step 1
All the HTML and CSS for this project has been provided for you. You can take a look at the two files to familiarize yourself with them.
Start by getting the #author-container and #load-more-btn elements with the .getElementById() method. Assign them to the variables authorContainer and loadMoreBtn, respectively.
The variables will not change, so use const to declare them.
const authorContainer = document.getElementById("author-container");
const loadMoreBtn = document.getElementById("load-more-btn");
Step 2
The Fetch API is a built-in JavaScript interface to make network requests to a server. It has a fetch() method you can use to make GET, POST, PUT, or PATCH requests. In this project, you’ll make a GET request to a URL for a JSON file with information about authors on freeCodeCamp News.
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 semi-colon yet.
fetch("https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json")
Step 3
The fetch() method returns a Promise, which is a placeholder object that will either be fulfilled if your request is successful, or rejected if your request is unsuccessful.
If the Promise is fulfilled, it resolves to a Response object, and you can use the .then() method to access the Response.
Here’s how you can chain .then() to the fetch() method:
fetch(“sample-url-goes-here”)
.then((res) => res)
Chain the .then() method to your fetch call. Inside the .then() method, add a callback function with res as a parameter, then log the res to the console so you can see the Response object. Open your console and expand the Response object to see what it contains.
Again, don’t terminate the code with a semi-colon yet.
fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
.then((res) => console.log(res))
Step 4
The data you get from a GET request is not usable at first. To make the data usable, you can use the .json() method on the Response object to parse it into JSON. If you expand the Prototype of the Response object in the console, you will see the .json() method there.
Remove console.log(res) and implicitly return res.json() instead.
.then((res) => res.json())
Step 5
In order to start working with the data, you will need to use another .then() method.
Chain another .then() to the existing .then() method. This time, pass in data as the parameter for the callback function. For the callback, use a curly brace because you will have more than one expression. Within your callback function, log data to the console to see what it looks like.
fetch('https://cdn.freecodecamp.org/curriculum/news-author-page/authors.json')
.then((res) => res.json())
.then((data) => {
console.log(data)
})
Step 6
The .catch() method is another asynchronous JavaScript method you can use to handle errors. This is useful in case the Promise gets rejected.
Chain .catch() to the last .then(). Pass in a callback function with err as the parameter. Inside the callback, use console.error() to log possible errors to the console with the text There was an error: ${err}. Since you’re using err in the text, don’t forget to use a template literal string with backticks (“) instead of single or double quotes.
Note: Now you can terminate your code with a semicolon. You couldn’t do that in the previous steps because you’ll signal to JavaScript to stop parsing your code, which will affect the fetch() syntax.
.catch((err) => {
console.error(`There was an error: ${err}`);
});
Step 7
Now that you have the data you want, you can use it to populate the UI. But the fetched data contains an array of 26 authors, and if you add them all to the page at the same time, it could lead to poor performance.
Instead, you should add 8 authors at a time, and have a button to add 8 more until there’s no more data to display.
Use let to create 2 variables named startingIndex and endingIndex, and assign them the number values 0 and 8, respectively. Also, create an authorDataArr variable with let and set it to an empty array.
let startingIndex = 0; let endingIndex = 8; let authorDataArr = [];
Step 8
Now you’ll create a function to populate the UI with the author data. You will call this function inside the second .then() method.
Create an empty arrow function named displayAuthors that takes authors as a parameter.
const displayAuthors = (authors) => {}
Step 9
Inside your displayAuthors function, chain .forEach() to authors.
authors.forEach()
Step 10
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.
authors.forEach(({author, image, url, bio}, index) => {});
Step 11
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.
authorContainer.innerHTML += ``
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.
authorContainer.innerHTML += ``;
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.
${author}
Step 14
To see the authors’ names on the page, you need to call the displayAuthors function inside the second .then() method. But before that, you need to assign the author data to the empty authorDataArr array.
First, remove your console.log() statement. Then, assign data to the authorDataArr variable.
authorDataArr = data;
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.
console.log("Author Data Array:", authorDataArr);
