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
Request path contains unescaped characters
Not Found
Not Found
Not Found

Submitted

E-commerce sneakers shop | Updated version

Jo89 😈• 380

@AhmadYousif89

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

E-commerce product page
  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi There 👋

This is my second upload for this challenge, I just added new features to the application and I thought it might be a good idea to post these updates to hear your thoughts and listen to your valuable feedback 🤗.

update summary

  • added the product's favorite logic (the ability to like and add a sneaker to the favorite list)
  • the ability to search inside the favorite list by the product name.
  • added the order list logic and the order page to preview the order details after checkout.
  • added the logic to track the user viewing history per product (for now it's just the main product so only one product can be added to the history).
  • some minor styling changes.
  • the app state is persisted over sessions locally.

that's all for now, please feel free to leave any feedback or suggestions that you might find helpful to the app, Thanks.

Community feedback

Nermen• 270

@NermenElefky

Posted

Hi Ahmed 👋

You have done great work. The design is really good. But I think this professional website needs custom scrollbar. Above all, your efforts are greatly appreciated.

0
Jo89 😈• 380

@AhmadYousif89

Posted

@NermenElefky

Thank you for your kind words 🙏 , I don't get what you mean by a custom scrollbar, like for the entire app? I actually thought of adding custom scrollbars in some areas but ended up not implementing this idea especially since custom scrollbars aren't supported on all major browsers.

0
Chukwudobe Micah Chinedu• 700

@chukwudobe-Micah

Posted

Man, I must say your design is really good.👏🏾

0
Jo89 😈• 380

@AhmadYousif89

Posted

@chukwudobe-Micah

Hey thanks man, I really appreciate it 😊

0
Chukwudobe Micah Chinedu• 700

@chukwudobe-Micah

Posted

@AhmadYousif89 i wanna ask, I like the effect you have on the buttons. If you click on it it becomes lighter in a fancy way and also based on where the user clicks, how did you achieve this?

0
Jo89 😈• 380

@AhmadYousif89

Posted

@chukwudobe-Micah It's called the ripple effect, the idea is to render a span or div (the amount increases as you click) inside the button and based on where you click over the button they get rendered, you then add animation that make it appear small then scale bigger and fade away in maybe 1 second, there are a lot of tutorials online that teaches this effect.

0
Chukwudobe Micah Chinedu• 700

@chukwudobe-Micah

Posted

@AhmadYousif89 Man, thanks a lot. I'll check that out on YouTube for more details. I just came here to appreciate your work again then I noticed that effect. You did a really good job here.

0
Jo89 😈• 380

@AhmadYousif89

Posted

@chukwudobe-Micah

Thanks man I really appreciate that 💯

0

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