Happy Friday! As the week comes to a close, I’m feeling a sense of relief and excitement for the weekend. My study session today was surprisingly smooth. The codes didn’t give me too much trouble, which was a pleasant surprise.
The weather outside is lovely. It’s a comfortable 75 degrees today, with a bit of wind. The forecast for next week is equally pleasant, with most days in the 70s. Merlin, of course, took full advantage of the weather and spent a good part of his day playing outside.
I am sitting at Tommy’s desk and have noticed the aesthetically pleasing weather display on his iPad’s lock screen. I am keenly interested in replicating this on my device and asked him how I could change my lock screen. He gave me a website link showing how to customize the iPad lock screen. I want to do this now.
JavaScript notes…
———————————–
FreeCodeCamp Shopping cart steps 31 – 45
Step 31
In your first p element, add a span element. Give the span a class of product-count and an id of product-count-for-id${id}. Then, after the span, give your p element the text of the name variable.
${name}
Step 32 There is still more functionality that your ShoppingCart class needs, but first you need to be able to test the code you have currently written. You'll need to instantiate a new ShoppingCart object and assign it to a variable. Here is an example of instantiating the Computer class from earlier examples: const myComputer = new Computer(); Declare a cart variable, and assign it a new ShoppingCart object. Note the use of the new keyword when instantiating the object.const cart = new ShoppingCart();Step 33
You need to get all of the Add to cart buttons that you added to the DOM earlier. Declare an addToCartBtns variable, and assign it the value of calling the getElementsByClassName() method on the document object, passing in the string "add-to-cart-btn".const addToCartBtns = document.getElementsByClassName("add-to-cart-btn");Step 34
You need to iterate through the buttons in your addToCartBtns variable. However, .getElementsByClassName() returns a Collection, which does not have a forEach method.Use the spread operator on the addToCartBtns variable to convert it into an array. Then, use the forEach method to iterate through the array. Do not pass a callback function yet.
[...addToCartBtns].forEach();Step 35
Add your callback function to the forEach method. It should take a btn parameter. Then, in the callback, add an event listener to the btn. The event listener should listen for a click event, and should take another callback with an event parameter. The second callback should be empty.[...addToCartBtns].forEach((btn) => {btn.addEventListener("click", (event) => {})} );Step 36
In your event listener callback, call the .addItem() method of your cart object, and pass in the event.target.id. Remember that the id here will be a string, so you need to convert it to a number.Pass your products array as the second argument.
[...addToCartBtns].forEach( (btn) => { btn.addEventListener("click", (event) => {cart.addItem(Number(event.target.id), products) }) } );Step 37
Your cart currently isn't visible on the webpage. To make it visible, start by adding an event listener to the cartBtn variable, listening for the click event. The callback does not need any parameters.cartBtn.addEventListener("click", () => {})Step 38
Start by inverting the value of isCartShowing. Remember that you can use the logical not operator ! to invert the value of a boolean. Assign the inverted value to isCartShowing.cartBtn.addEventListener("click", () => { isCartShowing = !isCartShowing; });Step 39
Now assign the textContent of the showHideCartSpan variable the result of a ternary expression which checks if isCartShowing is true. If it is, set the textContent to "Hide", otherwise set it to "Show".cartBtn.addEventListener("click", () => { isCartShowing = !isCartShowing; showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; });Step 40
Finally, update the display property of the style object of the cartContainer variable to another ternary which checks if isCartShowing is true. If it is, set the display property to "block", otherwise set it to "none".Now you should be able to see your cart and add items to it.
cartBtn.addEventListener("click", () => { isCartShowing = !isCartShowing; showHideCartSpan.textContent = isCartShowing ? "Hide" : "Show"; cartContainer.style.display = isCartShowing ? "block" : "none"; });Step 41
You need a way to access the total number of items in the cart. The best way to do this is to add another method to your ShoppingCart class, rather than accessing the items array directly.Add a getCounts method to the ShoppingCart class. It should return the number of items in the items array.
getCounts() {return this.items.length} Step 42 Now you can update the total number of items on the webpage. Assign the value of your cart object's .getCounts() method to the textContent of the totalNumberOfItems variable.[...addToCartBtns].forEach( (btn) => { btn.addEventListener("click", (event) => { cart.addItem(Number(event.target.id), products); totalNumberOfItems.textContent = cart.getCounts(); }) } );Step 43
You also need to update the total price of the cart when the user adds an item. Create a calculateTotal method in the ShoppingCart class.In that method, declare a subTotal variable and use the reduce method on the items array to calculate the sum of the price property of each item in the array. Use total and item as the parameters for your callback.
Remember to set your initial value in the reduce method.
calculateTotal() {const subTotal = this.items.reduce((total, item) => total + item.price, 0)}Step 44
Part of the total cost will include the tax, so you need to calculate that as well. Create a calculateTaxes method in the ShoppingCart class. This method should take an amount parameter.calculateTaxes(amount) {};Step 45
Your calculateTaxes method should return the value of the taxRate (divided by 100, to convert it to a percent) multiplied by the amount parameter.For clarity, wrap the taxRate / 100 calculation in parentheses.
calculateTaxes(amount) { return((this.taxRate / 100) * amount) }
Category: Uncategorized
