Recipe Box (finished)

Finished recipe box and it’s also mobile responsive.
What do you guys think?
https://codepen.io/Ozubergs/full/jjwKEJ

UPDATE (latest: 7/6/2019)
FIXED BUGS:

  1. add new media query format for larger-screen response
  2. the entire modal box is visible in screen
  3. opaque screen is unstuck after modal disappears

Hey @ozubergz,
Looks great and you have done great on the responsive part as well.

Congratulations.

However, one thing i noticed is that when you click on edit for any recipe on larger-screen sizes, there is now way to exit because save changes and cancel buttons are not visible on the larger screen. And overflow seems to be hidden for the modal window, so i can’t even scroll down.
Try fixing that.

Great Project though.

2 Likes

It looks great. Its opening and closing effects are nice. Congratulations

Agreeing with @aditya_p - The modal for New / Edit routes is cut off on the right side for desktop view. As it stands, not only is it impossible to add a new recipe, but I cannot even escape the modal once I click the Add New Recipe button.

Checking it out in mobile view - Adding a simple recipe and deleting a recipe seems to work. Side note, I didn’t realize you were set up with a backend so I’m sorry for deleting a recipe and adding two silly Lemonade recipes!

When I try to add a recipe by the same name, an error message pops up, the modal disappears, and I’m stuck on an opaque screen. There’s no way to escape without refreshing.

Another issue I have is how the ingredients and recipe must be done in the fashion of the placeholder, but you never put explicit instructions for the user. If you look at my first Lemonade recipe, I didn’t realize I had to follow the rules and I messed up the format.

Overall, it’s a fine project start, but there are bugs to be sorted out and I can’t wait to see your improvements!

Thanks for pointing out the problem. I added a new media query for larger screen format; check it out now if you want.

It looks very nice, and good job on those animations! :smiley: I have a couple suggestions though:

  • Maybe add a bit more padding to the inputs and textarea?
  • Also, to keep it consistent maybe add a border-radius to the textarea too (actually maybe all the bordered boxes)?

Thanks for pointing out the problems. I added new media query for larger screen format to see the entire modal box. The opaque screen is now unstuck after error message pops up. I have decided to disable the add new button when modal appears.

I forgot to mention that the backend of the website is browser local state, so your changes did not effect my backend of my browser.

Thanks for your feedback; it’s much appreciated.

1 Like