Develop #5086
Develop #5086
Conversation
IvanIlnytskyy
commented
Dec 19, 2024
IvanIlnytskyy
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Thank you for your hard work on this project! 😊 While your code is well-structured and mostly meets the task requirements, there are a few critical issues that need to be addressed before we can approve the pull request. Specifically, the separation of BEM blocks into individual files and the use of SCSS variables in a separate file are core requirements that haven't been met. Additionally, ensure all elements, modifiers, and pseudo-classes are properly nested according to BEM conventions. Once these issues are resolved, your solution will be in great shape! Keep up the great work, and don't hesitate to reach out if you need any help. 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.
There was a problem hiding this comment.
Great effort on your submission! 🎉 While your code is mostly well-structured, there are a few areas for improvement. Ensure SCSS variables are defined in a separate file and used consistently for properties like font-family and background-color. Also, create separate SCSS files for the card and stars BEM blocks. Addressing these issues will enhance code maintainability and adherence to task requirements. Keep up the good work and continue learning from these experiences! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="./styles/index.scss" |
There was a problem hiding this comment.
The task requires SCSS variables to be defined in a separate file. Ensure that you have a separate SCSS file for variables and that it is imported correctly in your SCSS files. The Parcel bundler should handle the compilation of SCSS to CSS.
| @@ -1,3 +1,128 @@ | |||
| body { | |||
| margin: 0; | |||
| font-family: Roboto, sans-serif; | |||
| } | |||
There was a problem hiding this comment.
Consider using SCSS variables for properties like font-family, background-color, and other repeated values. This will help maintain consistency and make it easier to update styles globally.
src/styles/index.scss
Outdated
| text-decoration: none; | ||
| border-radius: 5px; | ||
| font-weight: 700; | ||
| background-color: #00acdc; |
There was a problem hiding this comment.
The background color #00acdc is used multiple times. It would be beneficial to define this as an SCSS variable to ensure consistency and ease of maintenance.
| <div class="product-cards"> | ||
| <div | ||
| class="product-card" | ||
| data-qa="card" | ||
| > | ||
| <img | ||
| src="./images/imac.jpeg" | ||
| alt="imac" | ||
| class="product-card__image" | ||
| /> | ||
| <div class="content"> | ||
| <h2 class="content__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </h2> | ||
| <p class="content__description">Product code: 195434</p> | ||
| <div class="mark"> | ||
| <div class="mark__stars"> | ||
| <span class="star"></span> | ||
| <span class="star"></span> | ||
| <span class="star"></span> | ||
| <span class="star"></span> | ||
| <span class="star"></span> | ||
| </div> | ||
| <div class="mark__reviews">Reviews: 5</div> | ||
| </div> | ||
| <div class="price"> | ||
| <div class="price__word">Price:</div> | ||
| <div class="price__numeric">$2,199</div> | ||
| </div> | ||
| <a | ||
| href="#" | ||
| data-qa="hover" | ||
| class="bottom" | ||
| > |
There was a problem hiding this comment.
you need to follow the BEM in this task
| alt="imac" | ||
| class="product-card__image" | ||
| /> | ||
| <div class="content"> |
There was a problem hiding this comment.
| <div class="content"> | |
| <div class="product-card__content"> |
| <div class="mark__stars"> | ||
| <span class="star"></span> | ||
| <span class="star"></span> | ||
| <span class="star"></span> | ||
| <span class="star"></span> | ||
| <span class="star"></span> | ||
| </div> |
There was a problem hiding this comment.
just reuse styles for stars from the stars task
