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: @clemcy9
- Live Site URL: ecommerce-cart
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Styled Components - For styles
Note: These are just examples. Delete this note and replace the list above with your own choices
Learnt how to use context api.
1.created a context api jsx file and exported it
import React, { createContext, useContext, useState } from "react";
const CartContext = createContext();
const ToggleContext = createContext();
function UseCartToggle({ children }) {
// toggle for cart
const [show, setShow] = useState(false);
return (
<CartContext.Provider value={show}>
<ToggleContext.Provider value={setShow}>
<div>{children}</div>
</ToggleContext.Provider>
</CartContext.Provider>
);
}
export { UseCartToggle, CartContext, ToggleContext };2.imported the custom created context api and used in app component
<UseCartToggle>
<Nav cartItems={cartItems} emptyCart={emptyCart}></Nav>
<Hero
increaseCart={increaseCart}
decreaseCart={decreaseCart}
emptyCart={emptyCart}
cartItems={cartItems}
></Hero>
{/* <Loading></Loading> */}
</UseCartToggle>Learnt to implement sytling in styled components using props
const MenuIcon = styled.div`
background-image: url(${(props) => (props.show ? close : menu)});
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 25px;
height: 25px;
cursor: pointer;
/* background-color: red; */
`Also got acquinted to publishing on netlify
If you want more help with writing markdown, we'd recommend checking out The Markdown Guide to learn more.
** How to implement css modal in react** ** How 56FC to add media queries on react internal style object** ** How to add window event listener in react**
- Linkedin - Clement Idemud
I acknowledge the grace of God that abounded throughout the period of this project. Being able to code in a constrained environment where power (electricity)dampens your coding-time by a great and noticeable factor. In all we'ev become better! I also want to acknowledge sir Whyte of smartHub for his technical supports