Products
Featured Products
Top-rated products selected using array methods
Learning Outcomes Demonstrated
This project showcases comprehensive implementation of modern JavaScript and CSS features as required by the curriculum:
ES6 Features Implemented (Progression from Task 1):
- const/let declarations - Modern variable scoping
- Arrow functions - Concise function syntax throughout
- Template literals - Dynamic HTML generation
- Destructuring - Clean data extraction patterns
- Spread operator - Array manipulation and copying
- ES6 Classes - Object-oriented cart management
Array Methods Demonstrated (Progression from Task 1):
- map() - Product rendering and data transformation
- filter() - Search and category filtering
- reduce() - Cart total calculations
- forEach() - Category dropdown population
- sort() - Multiple sorting algorithms
- find() - Product lookup by ID
- splice() - Product management and reordering
CSS Learning Outcomes:
- CSS Properties & Selectors - Comprehensive selector usage
- Text & Font - Multiple font families and weights
- Images in CSS - Object-fit and responsive images
- Box Model - Padding, margin, border, box-sizing
- px vs em vs rem - Proper unit usage for scalability
- Layout - CSS Grid for complex layouts
- Flexbox - Navigation and component alignment
- Responsiveness - Media queries for all screen sizes