- This is an e-commerce product page. user can add to cart shoe based on their choice clicking on the add to cart button after selecting desire number of shoe
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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JavaScript
- Desktop-first workflow
I have learned a lot of cool technique by building this project such don't use display:none property beacuse display:none doesn't support transition property.
I have learned event delegation and by the help of this I was able to done the tab component . I also learn how to create a slider.
I have learned how to use box shadow instead of border-bottom
.main-nav-link:hover,
.main-nav-link:active {
/* trick */
box-shadow: 0px 6.1rem 0 -8px var(--main-color);
}
tabBox.addEventListener("click", function (e) {
const clicked = e.target.closest(".product-image-small");
if (!clicked) return;
// remove active class
tabImage.forEach((el) => el.classList.remove("active-small"));
contentImage.forEach((el) => el.classList.remove("active"));
//add active class
clicked.classList.add("active-small");
document
.querySelector(`.operation-content-${clicked.dataset.tab}`)
.classList.add("active");
});
// sticky Navigation
const section1 = document.querySelector("#section1");
const mainHeader = document.querySelector(".header");
const initialCoords = section1.getBoundingClientRect();
window.addEventListener("scroll", function () {
if (window.scrollY > initialCoords.top) {
mainHeader.classList.add("sticky");
} else mainHeader.classList.remove("sticky");
});
I want to continue building project but these time i want to focus on javascript more than html and css.
- Example resource 1 - This helped me for understand the event delegation and the tab component and slider.
- Frontend Mentor - @anuragsingh6886
- LinkedIn - @anuragsingh6886
- Twitter - @anurags_me