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.
Note: Delete this note and update the table of contents based on what sections you keep.
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: https://github.com/Joshk7/ecommerce-product-page
- Live Site URL: https://ecommerce-product-page-xi-dun.vercel.app/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Next.js - React framework
- Styled Components - For styles
Note: These are just examples. Delete this note and replace the list above with your own choices
The main lesson that I learned from this challenge is how to use a dialog element to create quick modals in html.
<button id="dialog-trigger">Open Dialog</button>
<dialog id="my-dialog"></dialog>const dialogTrigger = document.getElementById("dialog-trigger");
const myDialog = document.getElementById("my-dialog");
const handleMyDialog = (e) => {
if (myDialog.open) {
myDialog.close();
} else {
myDialog.show();
}
};
dialogTrigger.addEventListener("click", handleMyDialog);- Website - https://joshuakahlbaugh.pages.dev
- Frontend Mentor - @Joshk7