add solution #5249
add solution #5249
Conversation
MartaKurdylo
commented
Jan 11, 2025
MartaKurdylo
commented
- DEMO LINK
- TEST REPORT LINK
- Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
- Each BEM block has its own separate file
- All Typical Mistakes from BEM lesson theory are checked.
- Code follows all the Code Style Rules
There was a problem hiding this comment.
Thank you for your hard work on this project! 😊 While your implementation is mostly on point, there are a few critical issues that need to be addressed before we can proceed:
-
CSS Flex Gap Usage: The task specifies not to use the
gapproperty in theflexcontainer, as it doesn't work in tests. Please removegap: 4px;from the.starsclass. -
File Structure: Each BEM block should have its own file. Currently, all styles are in a single
style.cssfile. Please refactor your code to meet this requirement. -
Missing Files: The images necessary for the background of the stars are missing. Ensure these files are included so the code functions as expected.
Once these issues are resolved, your code will be ready for approval. 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 job on addressing some of the previous feedback! 🎉 While there are still a few areas that need improvement, such as the CSS file structure and missing image files, your efforts are commendable. Remember to:
- Refactor the CSS to ensure each BEM block has its own file.
- Include all necessary image files to avoid broken links.
- Correct the typo in the comment tag for better readability.
These adjustments will help you enhance your code quality and align with the 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! ✨
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <!-- #endregin--> |
There was a problem hiding this comment.
There is a typo in the comment tag. It should be <!-- #endregion --> instead of <!-- #endregin-->.
| .stars { | ||
| display: flex; | ||
| } |
There was a problem hiding this comment.
The task specifies not to use the gap property in the flex container. While you have used margin-right for spacing, ensure that this approach is consistent with the task requirements and does not rely on the gap property.
src/style.css
Outdated
| margin-right: 4px; | ||
| } | ||
|
|
||
| .stars--0 .stars__star:nth-child(-n + 0) { |
There was a problem hiding this comment.
The selector .stars--0 .stars__star:nth-child(-n + 0) is effectively selecting no elements because -n + 0 results in an empty set. Consider removing or adjusting this rule.
src/style.css
Outdated
| .stars--1 .stars__star:nth-child(-n + 1) { | ||
| background-image: url('./images/star-active.svg'); | ||
| } | ||
|
|
||
| .stars--2 .stars__star:nth-child(-n + 2) { | ||
| background-image: url('./images/star-active.svg'); | ||
| } |
There was a problem hiding this comment.
| .stars--1 .stars__star:nth-child(-n + 1) { | |
| background-image: url('./images/star-active.svg'); | |
| } | |
| .stars--2 .stars__star:nth-child(-n + 2) { | |
| background-image: url('./images/star-active.svg'); | |
| } | |
| .stars--1 .stars__star:nth-child(-n + 1), | |
| .stars--2 .stars__star:nth-child(-n + 2) { | |
| background-image: url('./images/star-active.svg'); | |
| } |
combine it all with a comma
