add task solution #4979
add task solution #4979
Conversation
There was a problem hiding this comment.
Great job on your project! 🎉 Your code meets most of the task requirements and constraints, and it's clear you've put in a lot of effort. Here are some key points to focus on for improvement:
-
SCSS Variables: Ensure all variables like
$black,$width,$white,$blue,$grey, and$marginare defined in yourvariables.scssfile or imported correctly. This is crucial for your styles to be applied as expected. -
Stars Modifiers: While the
stars--4modifier works, make sure allstars--Nmodifiers are implemented and tested to ensure full functionality.
Your attention to detail with BEM methodology, SCSS nesting, and other requirements is commendable. Keep up the good work and address the mentioned issues to enhance your code quality. Remember, learning from 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! ✨
| } | ||
|
|
||
| body { | ||
| margin: $margin; |
There was a problem hiding this comment.
The variable $margin is used here, but it is not defined in this file. Ensure that it is defined in a separate SCSS file or imported correctly.
| font-weight: 500; | ||
| font-size: 12px; | ||
| line-height: 18px; | ||
| color: $black; |
There was a problem hiding this comment.
The variable $black is used here, but it is not defined in this file. Ensure that it is defined in a separate SCSS file or imported correctly.
| font-weight: 400; | ||
| font-size: 10px; | ||
| line-height: 14px; | ||
| color: $grey; |
There was a problem hiding this comment.
The variable $grey is used here, but it is not defined in this file. Ensure that it is defined in a separate SCSS file or imported correctly.
| } | ||
|
|
||
| &__price { | ||
| width: $width; |
There was a problem hiding this comment.
The variable $width is used here, but it is not defined in this file. Ensure that it is defined in a separate SCSS file or imported correctly.
| width: $width; | ||
| height: 40px; | ||
| border-radius: 5px; | ||
| background-color: $blue; |
There was a problem hiding this comment.
The variable $blue is used here, but it is not defined in this file. Ensure that it is defined in a separate SCSS file or imported correctly.
|
|
||
| &:hover { | ||
| border: 1px solid $blue; | ||
| background: $white; |
There was a problem hiding this comment.
The variable $white is used here, but it is not defined in this file. Ensure that it is defined in a separate SCSS file or imported correctly.
| .stars { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| width: $width; |
There was a problem hiding this comment.
The variable $width is used here, but it is not defined in this file. Ensure that it is defined in a separate SCSS file or imported correctly.
| font-weight: 400; | ||
| line-height: 16px; | ||
| padding-left: 17px; | ||
| color: $black; |
There was a problem hiding this comment.
The variable $black is used here, but it is not defined in this file. Ensure that it is defined in a separate SCSS file or imported correctly.
| class="card" | ||
| data-qa="card" | ||
| > | ||
| <div class="card__image"></div> |
There was a problem hiding this comment.
This image isn't background, so you need to add image with the img tag
| <p class="card__product">Product code: 195434</p> | ||
|
|
||
| <div class="stars stars--4"> | ||
| <div class="stars__image"></div> |
There was a problem hiding this comment.
Fix it everywhere
| <div class="stars__image"></div> | |
| <div class="stars__star"></div> |
| </div> | ||
|
|
||
| <div class="card__price"> | ||
| <div class="card__price_text">Price:</div> |
There was a problem hiding this comment.
You need to use the semantic tag for text, fix it everywhere
| <div class="card__price_text">Price:</div> | |
| <p class="card__price_text">Price:</p> |
| <div class="card__price_amount">$2,199</div> | ||
| </div> | ||
|
|
||
| <div class="card__box"> |
There was a problem hiding this comment.
Redundant wrapper
| <div class="card__box"> |
DEMO LINK
TEST REPORT LINK
[ x ] there 2 BEM blocks
cardandstarseach in their own file[ x ] SCSS Nesting is used for
elements,modifiersandpseudo-classes[ x ] SCSS Variables are used for main values and placed in a separate file
[ x ] all
stars--Nmodifiers work as expected (Highlight firstNstars)[ x ] Code follows all the Code Style Rules ❗️