Responsive Product List with Cart using CSS Grid/Flexbox/JavaScript

What are you most proud of, and what would you do differently next time?

I am most proud of the functionality and responsiveness of the app. Everything works the way I wanted it to, I love the design and how the app looks on both mobile and desktop devices. I'm also proud of the way I was able to dynamically create the cart items through use of a Document Fragment. Next time I would like to try working with a framework like React or JQuery to complete a project.

What challenges did you encounter, and how did you overcome them?

I encountered a problem with the cart total overlapping when the item was added to the cart but I used absolute positioning to prevent overlap. I had an issue with the quantity of items carrying over when the "Start New Order" button was clicked and fixed it by manually setting the quantity back to 1 whenever an item is added to the cart with a new order.

What specific areas of your project would you like help with?

I would like help with the use of the Document Fragment. In my project, I reused a Fragment twice to create the items in the cart and order confirmation and I am wondering if this is a common practice to reuse the Fragment. I feel like when each item is dynamically created my code looks a bit repetitive with the use of createElement and setAttribute for each item so I'm wondering if there's a better/cleaner way to go about populating the cart/order confirm modal.