Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

React

@Farouk-ayo

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


I did this with React while still learning it, just to grasp my knowledge more on the basics. I have issues with implementing a notication on the cartIcon whenever a user addToCart. Anyone who can recommend me a solution to that please?.

And i actually did try my best to replicate all the designs and functionalities, due to the limitation of not having full access to all the resource. Pls feel free to to give your thought on any issue or suggestion.

Community feedback

@zubyCharles

Posted

That shouldnt be too difficult since you are making use of the context API. You just need to import your context where the cart icon is and take out the variable that represents the number of items in your cart then make the badge icon and put that variable inside it also make sure the value is only visible when the number of items in the cart is > 0; otherwise render null.

Marked as helpful

1

@Farouk-ayo

Posted

@zubyCharles yeah Charles.Thank you. i now got it fixed.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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