Responsive Product List with Cart (Pure Vanilla JS, HTML, SCSS/CSS)

I'm proud of almost everything! This is my first multi-functional project that I can see being out there in the real world. I think the two aspects of this project I am most proud of is accurately reflecting the cart with the popup modal at the end, and that I decided to go beyond the requirements of the assignment and create a sorting function where you can display the menu based on your preferences.

What I would do differently for next time is simplify my code. While the code works, I know that there were probably more effective ways to write script. Also, I would probably implement testing frameworks to ensure that my code actually works with edge cases, ensuring my made works with high volume, orders, etc.

The biggest issue I had was thinking about how toggling between different settings actually duplicate event listeners can if you did not carefully consider how you display information. At first, I was simply changing the appearance of the add to cart vs. quantity button; however, that meant that whenever I was toggling to the quantity button multiple times, I would stack increment and decrement event listeners on top of each other, calling functions unnecessarily and causing a lot of bugs when using my website. For the buttons (and a lot of parts of my code actually), I utilized display: none depending on where the user was in their experience.

I would like to explore more ways to create the pop-up modal at the end. I utilized the popover modal API but it seems like it may not be supported by older versions of some browsers (e.g., Firefox).

Speaking of the popover modal, I had some issues with starting a new order. My original plan was to essentially erase the content from the popover modal after the user clicks Start New Order; however, the content in the modal would erase first and not close. The only way I got around it was utilizing a setTimeout() on the function that was responsible for clearing the modal, clearing the cart, and reloading the page. The timeout was so that the modal can close first and then begin a new order. This works, and I only needed to put 100ms for the setTimeout, which is basically indiscernible in practice... but I realize there was some flaw or inefficiencies in my JS for starting a new order. Any advice would be great!