add task solution #5444
add task solution #5444
Conversation
iFedyna
commented
Feb 26, 2025
iFedyna
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 meets most of the task requirements, there's a critical issue that needs to be addressed before we can approve the pull request. The task requires that each BEM block has its own separate file, which is currently missing. This is important to ensure modularity and maintainability of your code. Once you address this, your solution will be in great shape! Keep up the good work, and I look forward to your updated submission. 🚀
✨ 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.
Review Summary
Great effort on implementing the HTML and CSS using BEM conventions! 🎉 However, there are a few areas that need improvement to fully meet the task requirements:
-
Modularity: Each BEM block should have its own separate file. This means creating individual HTML and CSS files for each 'stars' block to enhance maintainability and modularity.
-
CSS Structure: Currently, all styles are in a single
style.cssfile. Consider breaking these into separate files for each BEM block.
Your code is on the right track, and the decision to approve is to help you move forward with your learning journey. Please review the comments and address these issues in future projects to improve your skills and code quality. 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 stars--0"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars stars--1"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars stars--2"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars stars--3"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars stars--4"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars stars--5"> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> |
There was a problem hiding this comment.
Each BEM block (e.g., 'stars') should be placed in its own separate file according to the task requirements. Consider creating separate HTML files for each 'stars' block to improve modularity and maintainability.
| .stars { | ||
| display: flex; | ||
| } | ||
|
|
||
| .stars__star { | ||
| height: 16px; | ||
| width: 16px; | ||
| background-image: url(images/star.svg); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
| } | ||
|
|
||
| .stars__star + .stars__star { | ||
| margin-left: 4px; | ||
| } | ||
|
|
||
| .stars--1 .stars__star:nth-child(1), | ||
| .stars--2 .stars__star:nth-child(-n + 2), | ||
| .stars--3 .stars__star:nth-child(-n + 3), | ||
| .stars--4 .stars__star:nth-child(-n + 4), | ||
| .stars--5 .stars__star:nth-child(-n + 5) { | ||
| background-image: url(images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
According to the task requirements, each BEM block should have its own separate file. Consider creating separate CSS files for each 'stars' block to align with the modularity and maintainability goals.
