-
Notifications
You must be signed in to change notification settings - Fork 4.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
create stars block #5443
base: master
Are you sure you want to change the base?
create stars block #5443
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Your code is almost there, but there are a few critical issues that need attention before we can approve it. The main points to address are: separating BEM blocks into their own files as per the task requirements, and removing the unnecessary .body
class from your HTML and CSS. These changes will ensure your code fully aligns with the task specifications. 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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great job on implementing the star rating system using BEM methodology! 🌟 While your code is well-structured and adheres to many best practices, there are a few areas for improvement to fully meet the task requirements:
-
BEM Block Separation: Ensure that each BEM block has its own separate file for both HTML and CSS. This modular approach is crucial for maintaining clean and organized code.
-
CSS Formatting: Double-check that all CSS rules are consistently formatted according to the style guide, paying attention to line length and indentation.
These adjustments will not only align your work with the task specifications but also enhance your coding skills. Keep up the great work, and remember to review the comments to refine your code further. Your dedication to learning is commendable, and addressing these points will help you grow as a developer. 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
<div class="stars stars--0"> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
</div> | ||
|
||
<div class="stars stars--1"> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
</div> | ||
|
||
<div class="stars stars--2"> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
</div> | ||
|
||
<div class="stars stars--3"> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
</div> | ||
|
||
<div class="stars stars--4"> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
</div> | ||
|
||
<div class="stars stars--5"> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
<div class="stars__star"></div> | ||
</div> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Each BEM block (e.g., 'stars stars--0', 'stars stars--1', etc.) should be separated into its own file according to the task requirements. Consider creating individual HTML files for each block to comply with the task specifications.
.stars { | ||
display: flex; | ||
flex-direction: row; | ||
} | ||
|
||
.stars__star { | ||
background-image: url(images/star.svg); | ||
background-position: center; | ||
background-repeat: no-repeat; | ||
width: 16px; | ||
height: 16px; | ||
margin-right: 4px; | ||
} | ||
|
||
.stars__star:last-child { | ||
margin-right: 0; | ||
} | ||
|
||
.stars--1 .stars__star:nth-child(-n + 1) { | ||
background-image: url(images/star-active.svg); | ||
} | ||
|
||
.stars--2 .stars__star:nth-child(-n + 2) { | ||
background-image: url(images/star-active.svg); | ||
} | ||
|
||
.stars--3 .stars__star:nth-child(-n + 3) { | ||
background-image: url(images/star-active.svg); | ||
} | ||
|
||
.stars--4 .stars__star:nth-child(-n + 4) { | ||
background-image: url(images/star-active.svg); | ||
} | ||
|
||
.stars--5 .stars__star:nth-child(-n + 5) { | ||
background-image: url(images/star-active.svg); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Each BEM block (e.g., '.stars', '.stars--1', etc.) should be separated into its own CSS file according to the task requirements. Consider creating individual CSS files for each block to comply with the task specifications.
[x] Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
[x] Each BEM block has its own separate file
[x] All Typical Mistakes from BEM lesson theory are checked.
[x] Code follows all the Code Style Rules ❗️