You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Site is really responsive, cards are all uniform and the filter container changing from top to left is great. I would like to see the mobile version including the same checkbox functionality; we don’t want to make a worse experience for mobile users unnecessarily!
Your style comes through really well in this project, the site looks really fun but it’s not overdone.
You're doing extra requests for the checkboxes which is great, I would like to see you add logic to call the API when the search input is changed too. If you search for 'Tactical Nuclear Penguin' (id: 185) nothing shows up until you check 'Classic Range' which triggers another search.
Code
I want to see you refactor your three ‘check’ functions in App.jsx. The first two in particular or so similar... this could all become one check function! How could you find the checkbox label from the event argument to help you differentiate which one has been pressed?
In your Navbar.jsx, you’re wrapping the whole component in a div but it has no stylings associated with it. Just return that nav, keep it as simple as possible. Similarly with SearchBox.jsx, you have a div and label that aren’t used. Remove the div and use the label to add meaning to your input.
Your SearchBox component is being passed a name prop in Navbar.jsx, but this prop isn’t used/ doesn’t exist there. Remember to remove these unused props, if you come back to this project in a couple weeks/ months it’s going to be confusing.
CardList.scss: you don’t need to specify display: grid three times, just once will do! Only overwrite styles you want to change within media queries
Overally I’m really happy with your project, there’s just a few things for you to look at in regards to tidying up your project, then tackling the bugs you’ve noted + allow user to search all the beers in the API.
Site
Code
divbut it has no stylings associated with it. Just return thatnav, keep it as simple as possible. Similarly with SearchBox.jsx, you have a div and label that aren’t used. Remove the div and use the label to add meaning to your input.display: gridthree times, just once will do! Only overwrite styles you want to change within media queries