Task Description
In this homework, you will create a dynamic Products List component that interacts with a simple About component. You will implement component toggling logic that allows users to switch between viewing an About page and a Products List via the site header.
Note: We don't need to add filters yet. Just a list of Products.
1. Create a ProductsList component:
- This component should accept an array of products as a prop and render these products using a child
ProductCard component.
- Each
ProductCard component should display the product's name, price, and other relevant details.
2. Hide About component:
- Just comment or remove use of
About component (if any) inside App.tsx. We should see Header, ProductsList, Footer
3. Add adaptivity for ProductsList:
- It should be displayed fine for mobiles as well according to design.
Advance Task Description (1*)
1. Update the static header from the previous task to include interactivity:
- Implement toggling logic in the
App.tsx using useState to switch between the About and ProductsList components based on user interaction.
- Use a state variable in
App.tsx to manage which component is currently visible (About or ProductsList).
- Render components conditionally based on the current state.
- Ensure the Header and Footer remain visible regardless of which component is displayed.
2. Add logic for Cart:
- When the user clicks on Cart icon inside a
ProductCard, we need to make the icon active.
- Also, we need to show counter of added items in header cart icon.
3. (Optional) Add LocalStorage
- When reload the page, state of saved cards should be persisted.
Design
For consistent styling and layout, refer to the Figma design you used in the previous task: React Web Page Design.
Acceptance Criteria for 1
Acceptance Criteria for 1*
Task Description
In this homework, you will create a dynamic Products List component that interacts with a simple About component. You will implement component toggling logic that allows users to switch between viewing an About page and a Products List via the site header.
Note: We don't need to add filters yet. Just a list of Products.
1. Create a
ProductsListcomponent:ProductCardcomponent.ProductCardcomponent should display the product's name, price, and other relevant details.2. Hide
Aboutcomponent:Aboutcomponent (if any) insideApp.tsx. We should seeHeader,ProductsList,Footer3. Add adaptivity for
ProductsList:Advance Task Description (1*)
1. Update the static header from the previous task to include interactivity:
App.tsxusinguseStateto switch between theAboutandProductsListcomponents based on user interaction.App.tsxto manage which component is currently visible (AboutorProductsList).2. Add logic for Cart:
ProductCard, we need to make the icon active.3. (Optional) Add
LocalStorageDesign
For consistent styling and layout, refer to the Figma design you used in the previous task: React Web Page Design.
Acceptance Criteria for
1ProductsListcomponent correctly receives product data as props.ProductCardcomponent created and renders a single product.HeaderandFooterelements are present.ProductListdisplays right on mobile devicesAcceptance Criteria for
1*Headercomponent has clickable elements that toggle the display between theAboutandProductsListcomponents.App.tsx, with state determining which component to show.LocalStorageadded to save items in card after page realod