@TedJenkler
Posted
Hi @willsf2021,
Nice project! It’s been a while since I’ve looked in-depth at a pure HTML, CSS, and JS project, so it’s fun to revisit this area.
Here are a few quick improvements:
Rename cartArray: Since cartArray is just a copy of your data, consider renaming it to something like dataCopy for clarity. Your "let cart" should hold the actual cart data so that name makes sense.
Remove Item Function: To remove an item from the cart, link the "X" image to a function using DOM manipulation. This function should filter out the item by its name. Here’s a simple example:
let cart = [];
function removeItem(name) { cart = cart.filter(item => item.name !== name);
renderCart(); // Function to update the UI (you'll need to implement this in react it would be easily done with useEffect) }
Ensure the "X" image has an onclick event that triggers this function, passing the correct item name: example
<img src="x-icon.png" onclick="removeItem('ItemName')" />Note: Using IDs would be more robust for handling duplicates in real projects, but if item names are unique, this approach will work.
Update the UI: You'll need to implement the renderCart function to update the UI after removing an item. This function will depend on how your cart and items are displayed.
I’m impressed you’ve managed to implement all this in vanilla JavaScript without using any frameworks. However, for projects like these, I would strongly recommend using a framework. Implementing all this functionality can be quite a headache with plain JavaScript, and frameworks can simplify the process significantly.
I hope these quick tips help improve your project. If you find them useful, let me know, and I’d be happy to add more suggestions. I find it a bit harder to explain pure JS compared to React, but hopefully, this is clear and helpful!
Best, Teodor
