Need help with JS assignment

#1

Hi, I’m the first year student and because of my job it was hard for me to attend a seminar at JS, I’m facing some of the requirements 2 of which I can not do, can you help me please?

I’ve put here what I’ve done so far for JavaScript
https://jsfiddle.net/pgqb8mxn/1/

and I have these requirements that I can not do

Adding products to your shopping cart is done on the event click on the add class item. If there is a product with the same name in the cart, it will increase its amount. If the product no longer exists in the shopping cart, the quantity will be 1. To add to the shopping cart, the content of the template item will be clustered with id item-basket-template. Values ??for cells with price and total classes will be set. Set or update the value for the input with the quantity class. The cloned element will be added to the page in the element with the item id. After adding, the date-index attribute is updated with the current index in the shopping cart

2.When clicking on the item with the remove class will delete the product from the shopping cart. You can use the data-index attribute to identify the element index.

can you help me please, I struggled until 4 in the morning and I do not get out

The JavaScript Framework Explosion (or, JavaScript-less SPAs)
#2

You might need to give further details on what you need further help with.

For example, is it the click event that you have trouble with?

1 Like
#3

https://jsfiddle.net/pgqb8mxn/1/
this is my code

i dont know how to finish the first requirement … can you help me with it please

#4

Yes of course. The first thing that is mentioned is to add a click event to the add class item. Is that something that you know how to do, or do you need assistance with that part of things?

#5

For example, here is how I would add a click event to each of the add buttons.

  function addItemHandler(evt) {
    console.log(evt);
  }
  var addButtons = document.querySelectorAll("button.add");
  addButtons.forEach(function addEventHandler(button) {
    button.addEventListener("click", addItemHandler);
  });

In the addItemHandler function where the console.log is, I would then get the item information, most likely by getting the entire item row (as that’s wanted by the cart), and pass that to an addToCart function.

  function addItemHandler(evt) {
    var button = evt.target;
    var itemRow = getItemRow(button);
    addToCart(itemRow);
  }

The getItemRow function just walks up the DOM looking for a TR element.

function getItemRow(button) {
  var el = button.parentNode;
  while (el.nodeName !== "TR") {
    el = el.parentNode;
  }
  return el;
}

However, if a TR element doesn’t exist that’s going to cause an endless loop, so protection needs to be put in place.

function getItemRow(button) {
  var el = button.parentNode;
  while (el.nodeName !== "HTML" && el.nodeName !== "TR") {
    el = el.parentNode;
  }
  if (el.nodeName === "HTML") {
    throw new ReferenceError("TR element not found");
  }
  return el;
}

Now if the loop gets up to the HTML element, it throws a noisy error that a TR element wasn’t found.

Then you just need to implement an addToCart function that adds the itemRow to the cart.
Once that’s been done, you need to check before doing it if the item already exists, and increase the item count instead. Details of that are in the requirement that you listed in the OP.

1 Like
#6

Of the first set of requirements, the number of parts that have been taken care of are in bold.

Adding products to your shopping cart is done on the event click on the add class item. If there is a product with the same name in the cart, it will increase its amount. If the product no longer exists in the shopping cart, the quantity will be 1.To add to the shopping cart, the content of the template item will be clustered with id item-basket-template. Values ??for cells with price and total classes will be set. Set or update the value for the input with the quantity class. The cloned element will be added to the page in the element with the item id. After adding, the date-index attribute is updated with the current index in the shopping cart

The next part of the requirements is: “If there is a product with the same name in the cart, it will increase its amount.”

I like to add a temporary product to the cart, so that we can have the code do what it’s expected to do in that situation.

                <tbody id="items">                    
                <tr>
                  <td><img class="image" src="img/supa.jpg" alt="Supa"></td>
                  <td class="name">Supa</td>
                  <td class="price">10.45</td>
                  <td>
                    <span class="amount">1</span>
                    <button class="remove" data-index="supa">Remove</button>
                  </td>
                </tr>
              </tbody>

With that cart item in place, we can now easily work on the next part of the addToCart function.
If there is a product with the same name in the cart, it will increase its amount.

When an item of the same name is in the cart, we just increase amount by 1.

That means getting the name of the item

function getName(itemRow) {
  return itemRow.querySelector(".name").innerHTML;
}
function addToCart(itemRow) {
  var name = getName(itemRow);
  console.log(name);
}

getting a list of item names

function addToCart(itemRow) {
  var cartRows = document.querySelectorAll("#items tr");
  var cartItems = Array.from(cartRows).map(getName);
  console.log(cartItems);
}

and checking if the name is in that list.

function addToCart(itemRow) {
  var cartRows = document.querySelectorAll("#items tr");
  var cartItems = Array.from(cartRows).map(getName);
  if (cartItems.includes(name)) {
    console.log(name);
  }
}

And if the named row is already there, increase the count of that row

  if (cartItems.includes(name)) {
    var row = getCartRow(name);
    increaseItemAmount(row);
  }

The getCartRow function just needs to return the first row that’s found that has the name:

function getCartRow(name) {
    var items = document.querySelector("#items tr");
    return Array.from(items).find(function findName(row) {
        return getName(row) === name;
    });
}

And now that we have the appropriate row, we can increase its value.

function increaseItemAmount(row) {
  var amount = row.querySelector(".amount").innerHTML;
  amount = Number(amount) + 1;
  row.querySelector(".amount").innerHTML = amount;
}

So of the first set of requirements, the piece of your assignment that has been done for you in this post is in bold.

Adding products to your shopping cart is done on the event click on the add class item. If there is a product with the same name in the cart, it will increase its amount. If the product no longer exists in the shopping cart, the quantity will be 1.To add to the shopping cart, the content of the template item will be clustered with id item-basket-template. Values ??for cells with price and total classes will be set. Set or update the value for the input with the quantity class. The cloned element will be added to the page in the element with the item id. After adding, the date-index attribute is updated with the current index in the shopping cart

The details will of course change depending on the intended structure of the cart table, and whether values are supposed to be in named input fields.

But hopefully, the above helps to give some insight into just how much work is needed for each piece of those requirements.

I just hope that you haven’t left it too late for your to finish your assignment. Just don’t forget that when you get other people to do your assignment work for you, that means that you haven’t done the work yourself.

2 Likes
#7

Thank you very much for your help,you are the best, i appreciate your help and thank you for your time also
You are the only good person who helped me !