-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
add task solution #4883
base: master
Are you sure you want to change the base?
add task solution #4883
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.
There are a few critical issues that need to be addressed, such as the incorrect image source path and the stylesheet link referencing a SCSS file instead of a compiled CSS file. Please fix these to ensure the functionality is correct. Keep up the good work, and feel free 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! ✨
@@ -13,6 +13,44 @@ | |||
/> |
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.
The stylesheet link should reference a CSS file, not a SCSS file. SCSS files need to be compiled to CSS before they can be used in HTML.
src/index.html
Outdated
data-qa="card" | ||
> | ||
<img | ||
src="/src/images/imac.jpeg" |
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.
The image source path seems to be incorrect. Ensure the path is relative to the HTML file location or use an absolute path if necessary.
&__price-value, | ||
&__buy { | ||
@include font-weight-700; | ||
|
||
font-size: 16px; | ||
} |
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.
The &__price-value
selector is repeated in two different blocks. Consider consolidating these styles to avoid redundancy and potential conflicts.
&__rating, | ||
&__buy { | ||
margin-top: 16px; | ||
} |
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.
The &__rating
and &__buy
selectors are repeated in two different blocks. Consider consolidating these styles to avoid redundancy and potential conflicts.
background-position: center; | ||
} | ||
|
||
&--4 &__star:nth-child(-n + 4) { |
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.
The selector &--4 &__star:nth-child(-n + 4)
might not work as intended if the &--4
modifier is not correctly applied to the .stars
class. Ensure that the modifier class is applied to the .stars
element in the HTML to activate the first four stars.
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.
Thank you for your hard work! There are a few critical issues that need to be addressed before we can approve the PR. Please ensure the href
attribute in the link tag points to a compiled CSS file instead of an SCSS file. Additionally, consider merging duplicate styles to improve maintainability. Keep up the great effort! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
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 structuring and organizing your SCSS files! 🎉 While the code is mostly correct, please address the browser compatibility issue with 'width: fit-content;' and ensure your SCSS files are compiled to CSS before linking them. Keep up the good work and continue learning from these experiences!
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
@@ -13,6 +13,44 @@ | |||
/> |
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.
The href
attribute in the <link>
tag should point to a CSS file, not a SCSS file. SCSS files need to be compiled to CSS before they can be linked in an HTML document.
.stars { | ||
display: flex; | ||
flex-direction: row; | ||
width: fit-content; |
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.
The use of 'width: fit-content;' is not supported in all browsers. Consider using an alternative approach for better compatibility.
DEMO LINK
TEST REPORT LINK
there 2 BEM blocks
card
andstars
each in it own fileSCSS Nesting is used for
elements
,modifiers
andpseudo-classes
SCSS Variables are used for main values and placed in a separate file
all
stars--N
modifiers work as expected (Highlight firstN
stars)Code follows all the Code Style Rules ❗️