add task solution #5060
add task solution #5060
Conversation
There was a problem hiding this comment.
Thank you for your hard work on this project! 😊 While your code is mostly on the right track, there are a few critical issues that need to be addressed before we can approve the pull request:
-
CSS Selector Issue: The current CSS selectors use a space between
.stars--Nand:nth-child(-n + N), which indicates a descendant selector. This means it will select any matching child within.stars--N, not just direct children. To fix this, remove the space to ensure you're targeting direct children only. This is crucial for the correct styling of your elements. -
File Organization: The task requires each BEM block to have its own separate file. Currently, all styles are in a single
style.cssfile. Please separate the styles for each BEM block into different files as per the requirement. -
Missing Files: Ensure that all necessary files, such as images for the stars, are included in the project. This is important for the complete functionality of the task.
Once these issues are resolved, your code will be in great shape 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.
src/style.css
Outdated
| margin-right: 4px; | ||
| } | ||
|
|
||
| .stars--1 :nth-child(-n + 1) { |
There was a problem hiding this comment.
The space between .stars--1 and :nth-child(-n + 1) might cause issues. This space indicates a descendant selector, which means it will select any :nth-child(-n + 1) within .stars--1. If the intention is to select direct children, remove the space.
src/style.css
Outdated
| background-image: url(images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--2 :nth-child(-n + 2) { |
There was a problem hiding this comment.
Similar to line 19, ensure there is no space between .stars--2 and :nth-child(-n + 2) if you intend to select direct children.
src/style.css
Outdated
| background-image: url(images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--3 :nth-child(-n + 3) { |
There was a problem hiding this comment.
Ensure there is no space between .stars--3 and :nth-child(-n + 3) if you intend to select direct children.
src/style.css
Outdated
| background-image: url(images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--4 :nth-child(-n + 4) { |
There was a problem hiding this comment.
Ensure there is no space between .stars--4 and :nth-child(-n + 4) if you intend to select direct children.
src/style.css
Outdated
| background-image: url(images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--5 :nth-child(-n + 5) { |
There was a problem hiding this comment.
Ensure there is no space between .stars--5 and :nth-child(-n + 5) if you intend to select direct children.
There was a problem hiding this comment.
Great effort on organizing the HTML and CSS files according to the BEM methodology! 🎉 You've successfully separated styles into different files for each BEM block, which is a crucial step in maintaining clean and manageable code. However, there are a few critical issues to address:
-
CSS Selector Issue: Ensure that the CSS selectors for
.stars--N .stars__star:nth-child(-n + N)are corrected by removing the space to target direct children only. This is essential for the proper functionality of the star rating display. -
Missing Files: The images for the stars (
star.svgandstar-active.svg) are referenced in the CSS but not visible in the provided search results. Make sure these images are included in theimagesdirectory to avoid any display issues.
These adjustments are important for the functionality of your code, and addressing them will enhance your understanding and skills. 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! ✨
| margin-right: 4px; | ||
| } | ||
|
|
||
| .stars--1 .stars__star:nth-child(-n + 1) { |
There was a problem hiding this comment.
Remove the space between .stars--1 and .stars__star:nth-child(-n + 1) to ensure you're targeting direct children only.
| background-image: url(../images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--2 .stars__star:nth-child(-n + 2) { |
There was a problem hiding this comment.
Remove the space between .stars--2 and .stars__star:nth-child(-n + 2) to ensure you're targeting direct children only.
| background-image: url(../images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--3 .stars__star:nth-child(-n + 3) { |
There was a problem hiding this comment.
Remove the space between .stars--3 and .stars__star:nth-child(-n + 3) to ensure you're targeting direct children only.
| background-image: url(../images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--4 .stars__star:nth-child(-n + 4) { |
There was a problem hiding this comment.
Remove the space between .stars--4 and .stars__star:nth-child(-n + 4) to ensure you're targeting direct children only.
| background-image: url(../images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--5 .stars__star:nth-child(-n + 5) { |
There was a problem hiding this comment.
Remove the space between .stars--5 and .stars__star:nth-child(-n + 5) to ensure you're targeting direct children only.
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 MistakesfromBEMlesson theory are checked.Code follows all the Code Style Rules ❗️