Tommy was home sick yesterday. We spent the day on the couch, playing video games. I played Animal Crossing for most of the day. After four years, I still have yet to finish my island. We only left the house once to run a quick errand to the bank and buy some wood stove pellets. Tommy wasn’t feeling well enough to be outside for too long.
My studies are progressing well today, although my brain does feel a bit fried. However, I managed to find some respite before my therapy session. I took a moment to meditate, and it made me feel calmer.
During therapy, we discussed the upcoming anniversary of Kevin’s death, which is tomorrow. We talked about how my day went 20 years ago and how I feel now. We also talked about my recent panic attacks and what could be triggering them. My therapist helped me understand more about why I have panic attacks and how to be more mindful of what could cause them.
Currently, I am doing well, albeit feeling slightly low. My thoughts frequently drift towards my girls and how they have navigated life without a father figure. It’s heartening to know that Tommy has been there for them. My girls are lucky for that.
My therapist asked me if I had plans for tomorrow due to it being Kevin’s death anniversary. I told him I needed to take Lexi’s hearing aids in to be paired. I don’t know what else to do but to keep moving and going about my day. I think that is the best way to handle something like this.
JavaScript notes…
——————————-
FreeCodeCamp Shopping cart steps 21 – 30
Step 21
You now need a total count of each product that the user has in the cart. Declare a totalCountPerProduct variable, and assign it an empty object.
addItem(id, products) {
const product = products.find((item) => item.id === id);
const { name, price } = product;
this.items.push(product);
const totalCountPerProduct = {
}
}
Step 22
Use the .forEach() method to loop through the items array. Pass an empty callback function that takes a single parameter dessert.
addItem(id, products) {
const product = products.find((item) => item.id === id);
const { name, price } = product;
this.items.push(product);
const totalCountPerProduct = {};
this.items.forEach((dessert) => {})
}
Step 23
In your forEach callback, you need to update the totalCountPerProduct object. Using the id of the current dessert as your property, update the value of the property to be the current value plus one. Do not use the addition assignment operator for this.
addItem(id, products) {
const product = products.find((item) => item.id === id);
const { name, price } = product;
this.items.push(product);
const totalCountPerProduct = {};
this.items.forEach((dessert) => {
totalCountPerProduct[dessert.id] = totalCountPerProduct[dessert.id] + 1
})
}
Step 24
You now have a small bug. When you try to access a property of an object and the property doesn’t exist, you get undefined. This means if the dessert isn’t already present in the totalCountPerProduct object, you end up trying to add 1 to undefined, which results in NaN.
To fix this, you can use the || operator to set the value to 0 if it doesn’t exist. Wrap your right-hand totalCountPerProduct[dessert.id] in parentheses, and add || 0 to the end of the expression.
addItem(id, products) {
const product = products.find((item) => item.id === id);
const { name, price } = product;
this.items.push(product);
const totalCountPerProduct = {};
this.items.forEach((dessert) => {
totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
})
}
Step 25
Now you need to get prepared to update the display with the new product the user added. Declare a currentProductCount variable, and assign it the value of the totalCountPerProduct object’s property matching the id of product.
addItem(id, products) {
const product = products.find((item) => item.id === id);
const { name, price } = product;
this.items.push(product);
const totalCountPerProduct = {};
this.items.forEach((dessert) => {
totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
})
const currentProductCount = totalCountPerProduct[product.id]
}
Step 26
You haven’t written the code to generate the HTML yet, but if a product has already been added to the user’s cart then there will be a matching element which you’ll need.
Use .getElementById() to get the matching element – you’ll be setting the id value to product-count-for-id${product.id}, so use a template literal to query that value.
Assign your query to a currentProductCountSpan variable.
addItem(id, products) {
const product = products.find((item) => item.id === id);
const { name, price } = product;
this.items.push(product);
const totalCountPerProduct = {};
this.items.forEach((dessert) => {
totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
})
const currentProductCount = totalCountPerProduct[product.id];
const currentProductCountSpan = document.getElementById(`product-count-for-id${product.id}`)
}
Step 27
The behaviour of the addItem method needs to change if the product is already in the cart or not. Create a ternary that checks if the current product is already in the cart. Use undefined for both the truthy and falsy expressions to avoid a syntax error.
addItem(id, products) {
const product = products.find((item) => item.id === id);
const { name, price } = product;
this.items.push(product);
const totalCountPerProduct = {};
this.items.forEach((dessert) => {
totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
})
const currentProductCount = totalCountPerProduct[product.id];
const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
currentProductCount > 1 ? undefined : undefined;
}
Step 28
For your truthy expression, removing the undefined, you need to update the textContent of the currentProductCountSpan to be the currentProductCount followed by an x. Use a template literal to do so.
addItem(id, products) {
const product = products.find((item) => item.id === id);
const { name, price } = product;
this.items.push(product);
const totalCountPerProduct = {};
this.items.forEach((dessert) => {
totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
})
const currentProductCount = totalCountPerProduct[product.id];
const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
currentProductCount > 1 ? currentProductCountSpan.textContent = `${currentProductCount}x` : undefined;
}
Step 29
For your falsy expression, you’ll need to add new HTML to your productsContainer. Start by removing the undefined, then use the addition assignment operator and template literal syntax to add a div with the class set to product and the id set to dessert${id} to the innerHTML property of the productsContainer.
addItem(id, products) {
const product = products.find((item) => item.id === id);
const { name, price } = product;
this.items.push(product);
const totalCountPerProduct = {};
this.items.forEach((dessert) => {
totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
})
const currentProductCount = totalCountPerProduct[product.id];
const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
currentProductCount > 1
? currentProductCountSpan.textContent = `${currentProductCount}x`
: productsContainer.innerHTML += ``;
}
Step 30
Inside your div, add two p elements. Set the text of the second p element to be the value of the price variable.
addItem(id, products) {
const product = products.find((item) => item.id === id);
const { name, price } = product;
this.items.push(product);
const totalCountPerProduct = {};
this.items.forEach((dessert) => {
totalCountPerProduct[dessert.id] = (totalCountPerProduct[dessert.id] || 0) + 1;
})
const currentProductCount = totalCountPerProduct[product.id];
const currentProductCountSpan = document.getElementById(`product-count-for-id${id}`);
currentProductCount > 1
? currentProductCountSpan.textContent = `${currentProductCount}x`
: productsContainer.innerHTML += `
${price}
`;
}
