M_Hajjar First week #7
Conversation
There was a problem hiding this comment.
Hi Hajjar,
Great work on this assignment. You've handled the cor concepts of React well.
My comments are largely to do with css. I really like what you're doing with styling! I have added comments to make your code more manageable for the future. Please fix them after you've reviewed them.
week1/project/ecommerce/src/App.jsx
Outdated
|
|
||
| // Function to handle category selection | ||
| const handleCategorySelect = (category) => { | ||
| console.log('Selected Category:', category); // Debugging log |
There was a problem hiding this comment.
Be sure to remove any unnecessary console logs before you commit code to a shared repo! 🟢
week1/project/ecommerce/src/App.jsx
Outdated
|
|
||
| return ( | ||
| <div className="App"> | ||
| {/* Display CategoryList at the top */} |
There was a problem hiding this comment.
intended for me to understand how to break the code fast and easily read it.
| outline: 4px auto -webkit-focus-ring-color; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: light) { |
There was a problem hiding this comment.
Good to see you experimenting with accessibility!
| button:hover { | ||
| border-color: #646cff; | ||
| } | ||
| button:focus, |
week1/project/ecommerce/src/App.css
Outdated
| filter: drop-shadow(0 0 2em #61dafbaa); | ||
| } | ||
|
|
||
| @keyframes logo-spin { |
There was a problem hiding this comment.
If you're no longer using these styles you should delete them 🟢
| font-weight: 400; | ||
|
|
||
| color-scheme: light dark; | ||
| color: rgba(255, 255, 255, 0.87); |
There was a problem hiding this comment.
In your code you mix units and formats. For colours you use both hex codes and rgb; for measurements you use both em and rem. You should choose one out of each of these options and stick to them for consistency. 🟠
There was a problem hiding this comment.
then i will go with rgba and rem
|
|
||
| @media (max-width: 900px) { | ||
| .product-grid { | ||
| grid-template-columns: repeat(2, 1fr); /* 2 columns */ |
There was a problem hiding this comment.
These fr fractions are variable. Sometimes the cards are different widths, especially in mobile or tablet view. Can you apply a different column width sizing to this repeat functions to ensure they always stay the same width as each other? 🟠
| <div className="product-card" key={product.id}> | ||
| <img src={product.image} alt={product.title} /> | ||
| <h2>{product.title}</h2> | ||
| <p>{product.price}</p> |
There was a problem hiding this comment.
Currently this appears as just a number. Maybe add a currency symbol to make it more user friendly? 🟢
|
i have fixed all the requested issues (comments) for the first week |
the site is live here : https://main--ecommercehyfexr.netlify.app/