task solution stars - #6968
Conversation
tetrahook
commented
Aug 1, 2026
tetrahook
commented
- DEMO LINK
- TEST REPORT LINK
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Changes are needed before this implementation can be approved. There are two critical issues that must be addressed: 1. CSS file naming violates the task requirement - The checklist explicitly states that each BEM block must have its own separate file. You must rename style.css to stars.css and update the <link> tag in src/index.html to reference stars.css instead. This is a hard requirement that cannot be bypassed. 2. Inconsistent background-image URL paths - The inactive star uses ./images/star.svg but active stars use 'images/star-active.svg' (missing the leading ./ and different quote style). This inconsistency will prevent the yellow/active stars from displaying correctly. Change all active star selectors (lines 25, 29, 33, 37, 41) to use the same format as the inactive star: background-image: url('./images/star-active.svg');. The core implementation is solid - your BEM structure, flexbox layout, modifier logic using :nth-child(-n+N), and pseudo-selector approach for active states all meet the requirements. Once you fix the file naming and path consistency issues, this will be ready for approval.
✨ Please rate this review in the Platform's notification center1. 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 button2 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 tag3.
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
| width: 16px; | ||
| height: 16px; | ||
| margin-right: 4px; | ||
| background-image: url(./images/star.svg); |
There was a problem hiding this comment.
Inconsistent path format: the base .stars__star uses ./images/star.svg (line 15), but active star selectors use 'images/star-active.svg' without the leading ./. This path mismatch will cause active stars to not load. Use the same relative path format for both.
| } | ||
|
|
||
| .stars.stars--1 .stars__star:nth-child(-n + 1) { | ||
| background-image: url('images/star-active.svg'); |
There was a problem hiding this comment.
The active star image path should use ./images/star-active.svg to match the format used for the inactive star. Change all occurrences on lines 25, 29, 33, 37, and 41 to use the same relative path format.
| } | ||
|
|
||
| .stars.stars--2 .stars__star:nth-child(-n + 2) { | ||
| background-image: url('images/star-active.svg'); |
There was a problem hiding this comment.
Active star path inconsistency - should use ./images/star-active.svg
| } | ||
|
|
||
| .stars.stars--3 .stars__star:nth-child(-n + 3) { | ||
| background-image: url('images/star-active.svg'); |
There was a problem hiding this comment.
Active star path inconsistency - should use ./images/star-active.svg
| } | ||
|
|
||
| .stars.stars--4 .stars__star:nth-child(-n + 4) { | ||
| background-image: url('images/star-active.svg'); |
There was a problem hiding this comment.
Active star path inconsistency - should use ./images/star-active.svg
| } | ||
|
|
||
| .stars.stars--5 .stars__star:nth-child(-n + 5) { | ||
| background-image: url('images/star-active.svg'); |
There was a problem hiding this comment.
Active star path inconsistency - should use ./images/star-active.svg
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Your solution is approved. Excellent work on implementing all the required changes — the CSS file is correctly named stars.css, all image paths use consistent ./images/... formatting, and your BEM structure with :nth-child(-n+N) selectors for active stars is implemented perfectly. You've clearly understood the requirements and delivered a clean, well-structured solution. Keep up this attention to detail!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
2 participants
