Ecommerce Product Page | Angular 15
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🎉
Please log in to post a comment
Log in with GitHubCommunity feedback
- @MirMurr
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 -
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