All solutions

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.

I struggled with sizing the image/background to fit the mockup. In order to achieve the accordion effect without the use of JavaScript, would the details tag be used? Also I'm not sure about my use of the getElementById for accordion menu items being indexed by number (for instance, if there were a lot more items to be added). Thank you for any suggestions to make my code more concise/clean!

I'm wondering about how I did the styles for the input validation. There are a lot of lines of CSS styling in my JavaScript code that I might want to move over to a CSS class at some point so I can just apply the styling from the class. I felt like there was some excess white space in my card component but it might just be the screen resolution. Thanks for looking!

I had some trouble with getting the image the right size initially. I set it to several different values/percentages but ended up leaving it as-is since it looked okay when it was inside of the card container. The <hr> gave me some trouble as I couldn't get it to look the same as the design mock up. When I gave it a margin of 1rem on top and bottom, the <hr> completely disappeared but when I made the values smaller it seemed to fix the issue. Thank you for any feedback!

I hope this passes the FEM report! One thing I wasn't super sure about was making the body itself a flex container. I made the .card a grid layout on desktop but initially wanted it to be a flex container as well. One weird thing that happened was with the scores: the .item class was set to flex and I made the score itself align-self to end, but I had some leftover space so made the score text-align right which seemed to fix the issue. Thanks for looking!

I had some trouble with displaying the required popup for the text input field in the active state when number of people is equal to 0. One solution I found used a hidden input with type submit so I may try to add that functionality in the future. Please excuse the spaghetti code while I'm learning JavaScript. Thank you for looking!

I wasn't sure if I was meant to use async/await for the fetch API call. I ran into an issue on larger screens where I couldn't center the divider. The box-shadow when hovering the button is a little bit offset since the shadow is larger on the bottom.

I initially used relative/absolute positioning to achieve the overlay effect of the submit button but ended up changing the margin instead as the overlay wasn't uniform across all screen sizes. I am not sure about the box-shadow effect seen on the button in the design specifications. I wanted to add a hover state for the submit button but ended up scrapping the idea. I did not add a script.js for form validation since the required parameter seen on the email input field achieves the same effect.

I initially wanted to make both the desktop and mobile images have the same class, but I discovered that I couldn't keep the linear-gradient background if I changed the url for each version of the site. In addition, the mobile version of the site uses a height of 28% for the image div which kind of felt like a random value, so I'm wondering if there might be a better approach.

For some reason, the CSS that I applied for the submit button did not appear on mobile. The padding property did not change anything, but I was able to change the background color. I found the form handling to be a challenge as I did not know whether to include a form action or what that action would have been. I am also unsure of my use of relative and absolute positioning to center the card on the page. Thank you for looking!

I changed my solution from using a flex container to grid in the hopes that the layout wouldn't be distorted on larger desktops. I did as a commenter suggested and changed the images to be inside their own div and modified the image to have a min-height of 100% in order to fill the container.

What I found challenging about building this project was keeping track of flex containers inside of the overall grid layout. I had some issues with things overlapping or spilling over into other columns so I used grid-column-start and grid-column-end to keep the elements in line, along with setting width where necessary. The hamburger menu was done incrementally and used the CSS transition property to slide in from the right side when on mobile. The areas I am not sure about are the @media queries. I initially used a min-width of 1200px for the desktop but then changed it to accommodate smaller desktop screens by making it 1024px. Another thing I am not sure about is whether the entire site is meant to fit on one whole desktop screen (without having to scroll) and whether the padding/margins I have added are appropriate. This will be the first project I've used JavaScript on my own so please excuse ugly code! Thanks for looking!

I struggled with keeping the links all in line with each other and initially had to give each card description its own class, but somehow once I changed the letter spacing it became more even. I consulted the design multiple times to make sure that the padding and width were in line with the specifications. I am unsure about my use of grid because originally I used 5 columns but ended up with 10 in order to make the cards wider.

I found working with the SVG background image to be a challenge because it kept pushing the rest of the content down, but I was able to solve it with the help of Stack Overflow. I am not sure about the overall size of the component, as it looks maybe a little bit smaller in the screenshot, but with the font size being 16px that was the only way for me to go. When I changed the height of the parent container, the content ended up getting cut off at the bottom and it threw everything off. Does the 120vh that I've set for the wrapper container height match the specifications?