Skip to content
Submitted over 1 year ago

Ecommerce Product Page | Angular 15

Huy Phan•2,300
@huyphan2210
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

Hello😁! My name is Huy, and this is my solution for this challenge.

Users should be able to:

  • View the optimal layout for the site depending on their device's screen size
  • See hover states for all interactive elements on the page
  • Open a lightbox gallery by clicking on the large product image
  • Switch the large product image by clicking on the small thumbnail images
  • Add items to the cart
  • View the cart and remove items from it

What I used🚀:

  • Framework: Angular
  • Language: Typescript, HTML, SASS
  • I don't use any extra libraries

Thank you! Cheers🎉

Community feedback

  • Andrea•290
    @MirMurrPosted over 1 year ago

    Hello Huy!

    I like your solution! I have also completed this project and I really enjoyed working on it! I have some formatting tips for you:

    • Footer: I was struggling with the issue that the footer doesn´t stay on the bottom of the page. :) It is easy to solve: you can add position relative to the <main> HTML tag and set a min-width of 100vh. To the footer HTML tag you can add position absolute and bottom: 0 properties in CSS. This will place your footer to the bottom of the page and it won´t overlap the content above.

    • lightbox gallery: there are no arrows on the main image when I open the lightbox on laptop. This is a great resource on lightbox image gallery: https://www.w3schools.com/howto/howto_js_lightbox.asp

    I hope it was helpful. :)

    Best regards, Andrea

    Marked as helpful
    0
    Huy Phan•2,300
    @huyphan2210Posted over 1 year ago

    @MirMurr About the footer: what is your device's width? Is it a landscape or portrait device? I think the footer is doing ok. The parent element of the footer is the body element.

    About the lightbox gallery, I didn't add the arrows on landscape devices. This was done on purpose. You can see the arrows when you use mobile or tablet devices.

    Thank you for your reply. I'll take a look at it again later.

    0
    Andrea•290
    @MirMurrPosted over 1 year ago

    @huyphan2210 The device width is 1280px (laptop). Oh, my mistake, it solves the issue if you apply position relative on body. Or you can use display flex on the body tag and flex-direction: column, then the footer will stick to the bottom. I have solved the footer issue with flexbox on this project.

    0
    Huy Phan•2,300
    @huyphan2210Posted over 1 year ago

    @MirMurr Ok. After reviewing the page on some devices (with help from Chrome), I've made some adjustments:

    • I've fixed the footer
    • I've changed the width of the modal to get it fit on some landscape devices (I realized that it got too big on some devices which have width smaller than 1920px)
    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