Submitted about 2 years ago

React

Farouk Mustapha• 230

@Farouk-ayo

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

E-commerce product page

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

Ibenyenwa Charles• 330

@zubyCharles

Posted 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

Farouk Mustapha• 230

@Farouk-ayo

Posted about 2 years ago

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

Ibenyenwa Charles• 330

@zubyCharles

Posted about 2 years ago

@eff-r-k nicely done.

Please log in to post a comment

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