add solution #5178
add solution #5178
Conversation
There was a problem hiding this comment.
It looks like there are a few critical issues that need to be addressed before we can approve the pull request. Specifically, the crossorigin attribute value is incorrect and should be updated to either 'anonymous' or 'use-credentials'. Additionally, please ensure that all SCSS variables mentioned are defined in your project to avoid any compilation errors. Once these issues are resolved, your code will be in great shape! Keep up the good 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.
src/index.html
Outdated
| <link | ||
| rel="preconnect" | ||
| href="https://fonts.gstatic.com" | ||
| crossorigin="attr-req-value" |
There was a problem hiding this comment.
The crossorigin attribute value 'attr-req-value' seems incorrect. It should be either 'anonymous' or 'use-credentials'. Please update it to the correct value.
| @@ -0,0 +1,87 @@ | |||
| .card { | |||
| width: $card-width; | |||
There was a problem hiding this comment.
Ensure that the SCSS variable $card-width is defined in your project. If it's not defined, it will cause a compilation error.
| @@ -0,0 +1,87 @@ | |||
| .card { | |||
| width: $card-width; | |||
| height: $card-height; | |||
There was a problem hiding this comment.
Ensure that the SCSS variable $card-height is defined in your project. If it's not defined, it will cause a compilation error.
| .card { | ||
| width: $card-width; | ||
| height: $card-height; | ||
| border: 1px solid $color-border-card; |
There was a problem hiding this comment.
Ensure that the SCSS variable $color-border-card is defined in your project. If it's not defined, it will cause a compilation error.
| width: $card-width; | ||
| height: $card-height; | ||
| border: 1px solid $color-border-card; | ||
| font-family: $card-font; |
There was a problem hiding this comment.
Ensure that the SCSS variable $card-font is defined in your project. If it's not defined, it will cause a compilation error.
| width: 166px; | ||
| height: 40px; | ||
| border-radius: 5px; | ||
| background-color: $color-blue; |
There was a problem hiding this comment.
Ensure that the SCSS variable $color-blue is defined in your project. If it's not defined, it will cause a compilation error.
| height: 40px; | ||
| border-radius: 5px; | ||
| background-color: $color-blue; | ||
| border: 1px solid $color-blue; |
There was a problem hiding this comment.
Ensure that the SCSS variable $color-blue is defined in your project. If it's not defined, it will cause a compilation error.
| font-size: 14px; | ||
| font-weight: 700; | ||
| line-height: 16px; | ||
| color: $color-white; |
There was a problem hiding this comment.
Ensure that the SCSS variable $color-white is defined in your project. If it's not defined, it will cause a compilation error.
|
|
||
| &:hover { | ||
| .card__btn { | ||
| background-color: $color-white; |
There was a problem hiding this comment.
Ensure that the SCSS variable $color-white is defined in your project. If it's not defined, it will cause a compilation error.
| &:hover { | ||
| .card__btn { | ||
| background-color: $color-white; | ||
| color: $color-blue; |
There was a problem hiding this comment.
Ensure that the SCSS variable $color-blue is defined in your project. If it's not defined, it will cause a compilation error.
There was a problem hiding this comment.
Great job on addressing most of the issues in your project! 🎉 However, there are a few critical points that need attention:
-
HTML File: The
crossoriginattribute value is currently set to"attr-req-value", which is incorrect. Please update it to either"anonymous"or"use-credentials"to meet the HTML specification and ensure proper functionality. -
SCSS Files: Ensure that all mixins, such as
simple-textandelem-space-between, are defined in your project to avoid any compilation errors. If they are already defined, you're good to go!
Your project structure is well-organized, and the use of SCSS variables and mixins enhances the reusability and consistency of your styles. Keep up the good work! Remember to address the critical issues mentioned to improve your code and avoid similar problems in the future. This decision is made to help you move forward with your learning. Keep learning and improving! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/index.html
Outdated
| <link | ||
| rel="preconnect" | ||
| href="https://fonts.gstatic.com" | ||
| crossorigin="attr-req-value" |
There was a problem hiding this comment.
The crossorigin attribute value is incorrect. It should be either 'anonymous' or 'use-credentials' as per the HTML specification. Please update this value to ensure proper functionality.
| display: block; | ||
| } | ||
| &__prod-code { | ||
| @include simple-text; |
There was a problem hiding this comment.
Ensure that the simple-text mixin is defined in your project. If it's missing, it will cause a compilation error.
| } | ||
|
|
||
| &__reviews { | ||
| @include elem-space-between; |
There was a problem hiding this comment.
Ensure that the elem-space-between mixin is defined in your project. If it's missing, it will cause a compilation error.
| margin: 20px 0; | ||
| } | ||
| &__reviews-text { | ||
| @include simple-text; |
There was a problem hiding this comment.
Ensure that the simple-text mixin is defined in your project. If it's missing, it will cause a compilation error.
| } | ||
|
|
||
| &__price { | ||
| @include elem-space-between; |
There was a problem hiding this comment.
Ensure that the elem-space-between mixin is defined in your project. If it's missing, it will cause a compilation error.
DEMO LINK
TEST REPORT LINK
there 2 BEM blocks
cardandstarseach in their own fileSCSS Nesting is used for
elements,modifiersandpseudo-classesSCSS Variables are used for main values and placed in a separate file
all
stars--Nmodifiers work as expected (Highlight firstNstars)Code follows all the Code Style Rules ❗️