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

E-commerce Product - Responsive Flexbox jQuery Slider Lightbox

Samuel Ardeleanβ€’ 1,010

@samy-ard

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


The lightbox and product gallery were a bit challenging, but I am glad I was able to complete the challenge.

Community feedback

Jo89 πŸ˜ˆβ€’ 380

@AhmadYousif89

Posted

Hey Sam πŸ‘‹

I just wanted to tell you that your solution looks great. however, you have a bug after closing the lightbox, looks like the close modal btn is the issue, one other thing, I can open multiple lightbox one over the other you should place a check condition to detect if the modal is already open or not.

btw, I noticed that you are using jQuery 😐😱 I would advise on learning more active and on-demand frameworks like React, Vue or even Angular. Have a good day ☺️

Marked as helpful

1

Samuel Ardeleanβ€’ 1,010

@samy-ard

Posted

@AhmadYousif89 thank you ☺️! I admit that I avoided intentionally the frameworks you mentioned. Because I don't find them very "attractive", I like simple css and jquery, I like bootstrap, especially bs4, but I found myself often overwritting the existing code, e.g. the button classes (primary, secondary, etc) and I am not exactly liking the sass/scss/less. I wish some things would stay simple but they get more and more required at almost every job. I know that's not "a step forward" for me but I will try to use the frameworks on future challenges.

And about the bugs, thank you for telling but the only way you could open multiple lightboxes would be to modify the z-index of the modal otherwise you can't "reach" the trigger, but I wil fix this issue anyway.

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