yousra/react/Week1 #5
Conversation
YousraElmag
changed the title
YousraElmag
changed the title
There was a problem hiding this comment.
Hi Yousra,
This is a great first assignment. Your app is beautiful and you have a good understand of core React concepts. Great work.
I've left some comments for you to review. Please make the changes I've suggested. In particular, try not to repeat yourself in your code. The more times you repeat yourself, the more likely you are to make a small mistake which will cause data to fall out of sync.
| @@ -0,0 +1 @@ | |||
| /* /index.html 200 | |||
There was a problem hiding this comment.
Can you explain what this file is and why you need it?
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| .category-list button.active, |
There was a problem hiding this comment.
Your UI is very nice. Great attention to detail.
week1/project/ecommerce/src/App.css
Outdated
| filter: drop-shadow(0 0 2em #61dafbaa); | ||
| } | ||
|
|
||
| @keyframes logo-spin { |
There was a problem hiding this comment.
You've left a lot of styles in here that you're not using. Be sure to delete unnecessary CSS. 🟢
| onClick={() => onCategorySelect(category)} | ||
| className={selectedCategory === category ? "active" : ""} | ||
| > | ||
| {category.replace("FAKE: ", "")} |
There was a problem hiding this comment.
You do this three times: once here, once in productlist.jsx, and once in App.jsx. Can you figure out a way to only do this cleaning function once, and not repeat yourself? 🟠
| @@ -0,0 +1,19 @@ | |||
| // src/components/ProductList.jsx | |||
There was a problem hiding this comment.
The convention in React (and other frontend frameworks) is to name your component files in the same case as your component name - i.e. with a capital letter. Categories, Products, etc. 🟢
| <img src={product.image} alt={product.title} /> | ||
| <h3>{product.title.replace("FAKE: ", "")}</h3> | ||
| <p>${product.price}</p> | ||
| <p>Rating: {product.rating.rate} (Reviews: {product.rating.count})</p> |
.gitignore
Outdated
| # Except the folder you want to keep | ||
| !/ecommerce/ | ||
| !/ecommerce/**/* |
There was a problem hiding this comment.
You shouldn't need to edit the gitignore file. Please change this back.
…used anywhere and avoid repeating code
https://66d778ff6f1557c72fd7e66b--superb-pothos-22b3fc.netlify.app/