Added task solution

[cmac2617]

• DEMO LINK
• TEST REPORT LINK

[mateacademy-ai-mentor]

Review Summary

Hey there! 👋 Thanks for your submission! There are a couple of things to adjust: The styling for .stars--5 could be more consistent with other modifiers by using :nth-child. Also, remember to create separate files for each BEM block and keep your CSS lines under 80 characters. Keep up the great work! ✨

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

Footnotes

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

For consistency with the other modifiers, consider using :nth-child here as well. This will ensure a uniform approach for applying the active state to the stars. For example: .stars--5 > :nth-child(-n + 5).

Also, according to the task description:

Yellow stars are added with container modifier + pseudo-selector (NO extra classes)

[mateacademy-ai-mentor]

Review Summary

Okay, great job completing the task! 🎉 I'm approving this pull request so you can move forward.

Here's a summary of the feedback to help you improve:

• CSS File Structure: Remember to split your CSS code into separate files for each BEM block. This makes your code more organized and easier to maintain. For example, the .stars block, .stars__star element, and any modifiers (like .stars--large) should each have their own CSS file (e.g., stars.css, stars__star.css, stars--large.css). This adheres to the BEM principle of modularity.

• Line Length: In src/style.css, try to keep lines of code to a maximum of 80 characters for better readability. You can break long lines into multiple shorter lines to stay within this limit.

Keep up the great work! 💪 By addressing these points in future pull requests, you'll be writing even cleaner and more maintainable code. Feel free to ask if you have any questions!

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Footnotes

1. Rate AI review example ↩

[mateacademy-ai-mentor]

According to the checklist, "Each BEM block has its own separate file". Consider creating a separate file for the .stars block.

[mateacademy-ai-mentor]

According to the checklist, "Each BEM block has its own separate file". Consider creating a separate file for the .stars__star block.

[mateacademy-ai-mentor]

According to the checklist, "Each BEM block has its own separate file". Consider creating a separate file for the stars block modifiers.