Add task solution

[SofiiaPelenska]

• 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 ❗️

[mateacademy-ai-mentor]

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 proceed. The logical error in the nth-child selectors is significant because it affects the functionality of displaying active stars correctly. Additionally, the class naming and file structure do not fully comply with the task requirements, which could lead to maintenance challenges in the future. Please make these adjustments, and you'll be all set! Keep up the great work! 🌟

✨ 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.

[mateacademy-ai-mentor]

There is a logical error in the nth-child selectors. The selectors are intended to apply the active star image to a certain number of stars, but the range specified by nth-child(-n + 0) will not select any elements. You should adjust the selectors to correctly apply the active image to the intended number of stars. For example, for '.stars--0', you might want to use '.stars--0 .stars_star:nth-child(-n + 1)' to select the first star, and so on for the other classes.

[mateacademy-ai-mentor]

Great effort on implementing the star rating system! 🌟 While the Pull Request is approved to help you progress in your learning journey, there are a few critical issues that need attention:

1. Class Naming: The current class names like stars--0, stars--1 are not descriptive enough. Consider using more meaningful names such as stars--active or stars--inactive to enhance readability and maintainability.

2. Active Stars Logic: The nth-child selectors are not correctly highlighting the active stars. Ensure that the selectors match the intended number of active stars based on the zero-based index used in your HTML.

3. File Structure: Each BEM block should have its own separate file. This is essential for maintaining a clean and organized codebase.

Please review the comments and make the necessary improvements. Addressing these issues will not only meet the task requirements but also enhance the overall quality of your code. 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! ✨

[mateacademy-ai-mentor]

The class names stars--0, stars--1, etc., are not descriptive. Consider using class names that better reflect the purpose or state of these elements, such as stars--active or stars--inactive, to improve readability and maintainability.

[mateacademy-ai-mentor]

The nth-child selectors are not correctly highlighting the active stars. Since the HTML uses zero-based indexing for the classes (e.g., stars--0), the selectors should be adjusted to match the correct number of active stars. For example, .stars--1 should highlight the first star, .stars--2 should highlight the first two stars, and so on.