E-commerce product page

Hello, Natasha!.

I am Ahmed from Egypt.

First of all, you have done an awesome job. I have given your code a quick look, and I would like to help you understand the points in your code that are causing the problems you have mentioned :)

1- The cart problem: You might think that your code isn't adding new items, since it looks like that it is ONLY adding the current selected element. However, that is not true!.

Think about the following case:

• You decided to add one item to cart by pressing + one time, and hit the add to cart button. So, your global count variable will increase by 1. While the global cost variable will increase by $125.

• Then, you increase the count to 2 (by hitting + again), and hit the update cart button. However, this time instead of adding 2 items (which should make the total equal 3), it will only add one (and the total will be equal to 2). You see, when you hit the + symbol, the count only increase by one as you have programed it to do that ( in addUnit(), minusUnit() ). So, it doesn't actually take into account the number chosen (the number that appears between (+ and -)).

So, you could add another 2 global query Selectors to your code, which selects the span (with id= "cartNum"), which should contain the actual value you want to add, and the span (with id= "itemTotal"). So, your addToCart() function could look like the following:

// First, add the 2 global selectors
// this is the container of current number selected
const numOf_Items = document.querySelector('#cartNum'); // or use getElementById :)
const previous_Selection = document.querySelector('#itemTotal'); 
// this is the amount already in the cart

// And This could be your new addToCart()
const addToCart = () => {
  const actualCount = parseInt(numOf_Items.innerText) + parseInt(previous_Selection.innerText);
  cartCount.innerHTML = actualCount;
}

and your itemUpdate() function could look like the following,

const itemUpdate = () => {
   const actualCount = parseInt(numOf_Items.innerText) + parseInt(previous_Selection.innerText);
   itemTotal.innerHTML = actualCount;
   const actualCost = actualCount*125; // This should be the correct price :)
   priceTotal.innerHTML = `$ ${actualCost}.00`;
}

This should hopefully fix your cart problem ;)

Note: It is important to note that this doesn't affect the existence of your 2 functions (addUnit, minusUnit) as they still serve the function of keeping the items below 10 and also keeping them above 0. So, don't remove them, they just won't be used to determine the number of items selected by the user or the total cost.

2- Arrow's Css Problem:

This is a lot more straight forward. Don't worry :)

in your css file (lines 345 to 348).

What you have written means the following: For each image in any element, which has a class of "arrows", change the color of the SVG when a mouse hovers over it.

this is cool for the arrow itself, but to make the effect happens when a mouse hovers over a the circle as well, you will need JS.

A possible solution would be:

document.querySelectorAll('.arrows-pop').forEach(n => n.addEventListener('mouseenter', (e) => {
   e.target.querySelector('.arrow-hover').classList.toggle('highlight');
   // So, you will have to make a new class named 'highlight' which has the same two CSS lines (lines 346 to 347).
   // This will add the coloring effect to the arrows when the mouse enters the div
});
// and also
document.querySelectorAll('.arrows-pop').forEach(n => n.addEventListener('mouseleave', (e) => {
   e.target.querySelector('.arrow-hover').classList.toggle('highlight'));
   // This will remove the coloring effect to the arrows when the mouse leaves the div
});

Phew, hope this helps you. And keep up the awesome work.

If there is anything not clear, due to language barrier (as English isn't my first language, I am more than happy to elaborate more).

Wish you all the best :)