add task solution #5091
add task solution #5091
Conversation
ALexKhodakov
commented
Dec 20, 2024
ALexKhodakov
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Thank you for your hard work on this project! 😊 While your code is well-structured and meets many of the task requirements, there are a few critical issues that need to be addressed before we can proceed. Specifically, the task requires the use of separate BEM block files for card and stars, and SCSS variables should be placed in a separate file. Additionally, ensure that SCSS nesting is consistently applied for elements, modifiers, and pseudo-classes. Once these changes are made, your implementation will be in great shape! Keep up the great work, and I look forward to your updated submission! 🚀
✨ 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.
Great job on your submission! 🎉 While your code meets several task requirements, there are a few areas for improvement. Please ensure that the stars component has its own SCSS file, separate from the card styles, and that all SCSS variables are placed in a dedicated variables.scss file. This will help maintain a clean and organized codebase. Keep up the good work, and use this feedback to enhance your skills further!
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="./styles/index.scss" |
There was a problem hiding this comment.
The SCSS file index.scss is linked here. Ensure that SCSS variables are placed in a separate file, and separate BEM block files are used for card and stars, as per the task requirements.
| .stars { | ||
| display: flex; | ||
|
|
||
| &__star { | ||
| width: 16px; | ||
| height: 16px; | ||
| margin-right: 4px; | ||
|
|
||
| background-image: url(../images/star.svg); | ||
| background-repeat: no-repeat; | ||
| background-position: center; | ||
|
|
||
| & :last-child { | ||
| margin-right: 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) { | ||
| background-image: url(../images/star-active.svg); | ||
| } |
There was a problem hiding this comment.
The styles for the stars component should be moved to a separate SCSS file dedicated to the stars BEM block, as per the task requirements.
| font-family: Roboto, sans-serif; | ||
| font-size: 10px; | ||
| line-height: 14px; | ||
| color: $text-secondary-color; |
There was a problem hiding this comment.
Ensure that SCSS variables like $text-secondary-color are placed in a separate variables file, as required by the task.
| margin: 0; | ||
| } | ||
| @import './utils/variables'; | ||
| @import './blocks/card'; |
There was a problem hiding this comment.
Ensure that you also import the stars block SCSS file here, as it should be in a separate file according to the task requirements.
