Product list with cart using vanilla Javascript
Design comparison
Solution retrospective
I am proud of the Javascript part because I got it all working quite nicely in vanilla Javascript. For the next project I will definitely try using React because this was a bit painful. Also this was probably the most difficult layout I've built to date and I made it all work using just flexbox for all screen sizes.
What challenges did you encounter, and how did you overcome them?Replacing the "Add to cart" button with the plus and minus button was a challenge. I placed the button using position: absolute which worked quite nicely except for the fact that I had to use transform: translateX to center the button, which then made hover transitions more difficult to handle. I would like some advice on how to center the button without the use of transform.
What specific areas of your project would you like help with?I'm aware there is no accessibility. Any advice on this topic is most welcome. With barely 2 weeks of experience in HTML, CSS and web-based Javascript, this challenge really tested my abilities so any advice at all is welcome.
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord