DARYNA-TKACHENKO-WEEK1 #9
Conversation
sycons
left a comment
sycons
left a comment
There was a problem hiding this comment.
Following were implemented:
- Copied fake data into
srcfolder as instructed ✅ - A product list that displays all of the products in the all-products file ✅
- A category list that displays all of the categories in the all-categories file at the top of the page ✅
- Site is responsive ✅
Requested improvements:
- Please deploy app to netlify and and the link to the PR description.
- Category selection is not working. When user clicks on category, products belonging to that category should be displayed. Pay attention to the value of category when doing the filtering.
You have styled the web app beautifully. Great use of Tailwind CSS. It's aesthetic and pleasing to the eye ⭐
Good structuring of the app by identifying and creating components 👏
|
|
||
| return ( | ||
| <div className="min-h-screen bg-gray-50"> | ||
| <Header /> |
There was a problem hiding this comment.
Really good job separating these into components and placing them in a folder together 👏
week1/project/ecommerce/src/App.jsx
Outdated
| ? products | ||
| : products.filter((product) => | ||
| product.category.toLowerCase().includes( | ||
| selectedCategory.toLowerCase() |
There was a problem hiding this comment.
Pay attention to the value of category when doing the filtering.
| return ( | ||
| <div> | ||
| <h2 className="text-2xl font-semibold mb-6 text-gray-800"> | ||
| Products ({products.length}) |
There was a problem hiding this comment.
Nice UX touch adding the number of products 👏
sycons
left a comment
sycons
left a comment
There was a problem hiding this comment.
Requested improvements have been made ✅
| @@ -0,0 +1,6 @@ | |||
| export default [ | |||
There was a problem hiding this comment.
Updating this file by removing FAKE: from the data works because you are reading data from a file in your own repo. However, a better way to make this change is in the processing logic after reading the data, because the data could also come from an API instead of a file.
| {categories.map((category) => ( | ||
| <button | ||
| key={category} | ||
| onClick={() => onCategoryChange(category)} |
There was a problem hiding this comment.
Sample code handle if the categories contain FAKE:
Replace category with category.replace("FAKE: ", "")
| : "bg-gray-200 text-gray-700 hover:bg-green-100" | ||
| }`} | ||
| > | ||
| {category} |
There was a problem hiding this comment.
Sample code handle if the categories contain FAKE:
Replace category with category.replace("FAKE: ", "")
2 participants
No description provided.