Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

E-commerce Product Page

Josh•100
@Joshua-Farr
A solution to the E-commerce product page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Really enjoyed being able to apply some more advanced JavaScript and responsive design principles to this project.

Notably, I tried building this project with scalability in mind and created the Product class to make it easier to reuse the shopping cart functionality if I were to add more products in the future.

The biggest challenge was building the logic where only one instance of the product was created when added to the shopping cart and it is updated with additional items should the user want to increase the purchased amount.

Would love some feedback on my semantic HTML (I felt like its a bit all over the place) and could be made prettier.

Also, felt like there was a lot of CSS to get the styling right between mobile and desktop views but it works so I guess I can't complain!

I was unfortunately unable to figure out how to get the desktop view lightbox to work - will have to revisit that challenge in the future!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Josh's solution.

Join 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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License