Skip to content
Submitted 22 days ago

HTML CSS SCSS Javascript Mobile firts bem Accessibility

bem, accessibility
P
RF13•590
@rf1303
A solution to the E-commerce product page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I’m most proud of how I was able to break the JavaScript into modular files to keep the logic organized and maintainable. It made handling features like the image gallery, lightbox, and menu behavior much cleaner. I also paid special attention to accessibility and responsive design, which improved the overall user experience across devices.

If I were to do this project again, I would plan the JavaScript architecture earlier and consider using a small framework or components system for better scalability. I would also write unit tests for some of the key interactive features and focus more on advanced accessibility practices like keyboard trap handling in modals and ARIA live region updates.

What challenges did you encounter, and how did you overcome them?

the challenges, the lightbox and the modules and the screen changes, the cartbox items and the menus, working a lot and testing, I think it looks pretty good.

What specific areas of your project would you like help with?

I'm missing more accessibility, some tips and js part would also be appreciated.

Code

Please log in to post a comment

Log in

Community feedback

  • Adesh Katiya•420
    @adeysh

    Hi There! This looks awesome. You have done very well implementing all the funcitionalities of the design. Your code is well structured too. I would like to give you some feedback from my end for polishing it as well here goes:

    For UI

    • The cursor currently doesn't change to pointer on hover on header contents, the preview image of the gallery, '+'/'-' and add to cart button. Some styles are missing on hover for header cart button and profile button
    • Currently the lightbox overlay screen is not covering the whole screen and white background shows up at the bottom.
    • There's no hover styles for thumbnail images in the lightbox.
    • Changing the preview image in lightbox thorugh arrow buttons doesn't update the thumbnail images telling which image is currently active. it works when you click on the specific image but not on sliding it to a different one.
    • No hover styles for close button in lightbox.
    • For tablet screen sizes the preview image on the gallery doesn't fit 100% and gets cropped out.
    • The navigation menu in tablet screen sizes doesn't attach to the edge of the screen because i think it has some fixed width.
    • I think after adding some items and clicking on add to cart button currently updates the cart badge but it should also open the cart to show the items that were added.
    • The cart if opened should close after clicking anywhere outside it.

    For Code

    • I think in the <body> tag, there should really be only three landmarks <header> containing your navbar, <main> containing everything below it.
    • The other <divs> could just be a part of a parent container even for overlays.
    • Always try to give alt messages for images.
    • The html is semantic as well.
    • I have applied the same logic to slide the image with transition that you have used for gallery in your productSneaker() and prodSneakLight() functions. however i see that you can create a single function for these two generalizing similar code.
    • Same goes for event listeners in you main.js file as well. Since you are calculating the index for when buttons are clicked and then increasing/decreasing them. you could create a single function for this operation and pass parameters as needed just for increasing/decreasing and the element that you need event listener for. it can reduce some amount of code lines.
    • These code blocks too
    btnsThumbail.forEach((btn) => {

        btn.addEventListener("click", () => {
            const i = parseInt(btn.dataset.img);
            productSneaker(i, 1);

            btnsThumbail.forEach((b) => b.classList.remove("button__thumbails--active"));
            btn.classList.add("button__thumbails--active")
        });
    });

    and

    btnsThumbLight.forEach((btn) => {
        btn.addEventListener("click", () => {
            const i = parseInt(btn.dataset.img);
            prodSneakLight(i);
            btnsThumbLight.forEach((b) => b.classList.remove("button__thumbails--active"));
            btn.classList.add("button__thumbails--active")
        });
    });

    have similar logic so you could combine them.

    • for code in the cart box section too.
    • Code in functions in menu.js file also have a lot of similar code that can be reused or generalized into a single function. for example for lightBoxChange(), lightClose() and lightBox() could have the constants defined at a single and place and then if conditions applied for necessary code.

    That's all. Everything looks good but I think you can refactor code here to make it scalable and reduce DRY code. All the best 🎉

    Marked as helpful

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