This is a solution to the E-commerce product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
- Solution URL: Solution URL here
- Live Site URL: Live site URL here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Desktop-first workflow
This challenge helped me improve the following concepts.
- CSS Flexbox and GRID
- Using sprite.svg file for svg icons
- Hamburger menu for mobile
- Overlay features when the modal is opened
- Sliding the images in the light box using JS
- Resuing the functions by changing the scope
- Getting the CSS values in JS by using getComputedStyle method
- Inserting the HTML tags using insertAdjacentHTML in JS
- Getting data by using the lastChild property from the parent node in JS
- Adding animations using transform and transition for the click of buttons
Code snippets I am proud about, see below:
basketDetails.lastChild.addEventListener("click", emptyCart);
- Frontend Mentor - @Memeena
- Twitter - @MeKrish18