Skip to content
Submitted about 2 years ago

React

Farouk Mustapha•230
@Farouk-ayo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate

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

  • Ibenyenwa Charles•330
    @zubyCharlesPosted about 2 years ago

    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 Mustapha•230
    @Farouk-ayoPosted about 2 years ago

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

    1
    Ibenyenwa Charles•330
    @zubyCharlesPosted about 2 years ago

    @eff-r-k nicely done.

    1

Please log in to post a comment

Log in with GitHub

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