add task solution #5008
add task solution #5008
Conversation
leraMeleshchenko
commented
Oct 30, 2024
leraMeleshchenko
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Thank you for your hard work on this project! 😊 While your solution meets many of the task requirements, there's a critical issue that needs to be addressed before we can approve the pull request. The nth-child selectors in your CSS are not correctly activating the intended number of stars. For example, .stars--0 .stars__star:nth-child(-n + 0) will not activate any stars because -n + 0 results in no matches. You should adjust these selectors to match the desired number of active stars. For instance, .stars--0 .stars__star:nth-child(-n + 0) should be .stars--0 .stars__star:nth-child(-n + 1) to activate the first star, and so on for the other classes.
Additionally, the task requires each BEM block to have its own separate file, but currently, all styles are in a single CSS file. Please separate the CSS for each BEM block into its own file as per the task requirements.
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.
src/style.css
Outdated
| .stars--0 .stars__star:nth-child(-n + 0), | ||
| .stars--1 .stars__star:nth-child(-n + 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) { |
There was a problem hiding this comment.
The nth-child selectors are not correctly activating the intended number of stars. For example, .stars--0 .stars__star:nth-child(-n + 0) will not activate any stars because -n + 0 results in no matches. You should adjust these selectors to match the desired number of active stars. For instance, .stars--0 .stars__star:nth-child(-n + 0) should be .stars--0 .stars__star:nth-child(-n + 1) to activate the first star, and so on for the other classes.
There was a problem hiding this comment.
Great job on your submission! 🎉 Your code meets most of the task requirements and constraints, and you've done well with the BEM methodology and CSS Flexbox implementation. However, there are a few areas to improve:
- CSS Selector Usage: Avoid using tag names for styling in your CSS, except for
htmlandbody, as per the checklist requirement. - Yellow Stars with Pseudo-Selectors: Ensure that yellow stars are added with a container modifier and pseudo-selector, without extra classes.
These issues are not critical for the current functionality, but addressing them will enhance your code quality and adherence to best practices. Keep up the good work, and make sure to review the comments to improve your code. This decision is made to help you move forward with your learning. Keep learning and refining your skills! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
