-
Notifications
You must be signed in to change notification settings - Fork 4.4k
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
deploy for mentors #5074
base: master
Are you sure you want to change the base?
deploy for mentors #5074
Conversation
Aweiro
commented
Dec 16, 2024
- DEMO LINK
- TEST REPORT LINK
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 on this project! There are a few critical issues that need to be addressed before we can approve the pull request:
-
Stylesheet Link: The HTML file is currently linking to a
.scss
file. Browsers cannot directly interpret SCSS files; they need to be compiled into CSS first. Please ensure that the SCSS file is compiled to CSS, and update the link to point to the resulting CSS file. -
SCSS Variables: There are several mentions of variables like
$blue_accent-color
,$main_accent-color
, and$secondary-color
. Please verify that these variables are correctly defined in your SCSS files to prevent any compilation errors. -
Image Paths: Ensure that the image paths for
star-active.svg
andstar.svg
are correct and that the image files exist at the specified locations.
Once these issues are resolved, your code will be in great shape! Keep up the excellent work, and feel free to reach out if you have any questions or need further assistance. 😊
✨ 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.
@@ -9,10 +9,54 @@ | |||
<title>Product cards</title> | |||
<link | |||
rel="stylesheet" | |||
href="./styles/index.scss" | |||
href="./styles/main.scss" | |||
/> |
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 references a .scss
file. Browsers cannot directly interpret SCSS files; they need to be compiled into CSS first. Ensure that the SCSS file is compiled to CSS, and the link should point to the resulting CSS file.
line-height: 18px; | ||
|
||
margin-bottom: 4px; | ||
color: $main_accent-color; |
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 variable $main_accent-color
is used here. Ensure that this variable is defined in your SCSS files, otherwise it will cause a compilation error.
} | ||
|
||
&__text--product-code { | ||
color: $secondary-color; |
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 variable $secondary-color
is used here. Make sure this variable is defined in your SCSS files to avoid compilation errors.
} | ||
|
||
&__text--reviews { | ||
color: $main_accent-color; |
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 variable $main_accent-color
is used again. Verify its definition in your SCSS files.
&__text--price { | ||
font-size: 12px; | ||
line-height: 18px; | ||
color: $secondary-color; |
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 variable $secondary-color
is used again. Ensure it is defined in your SCSS files.
} | ||
|
||
&__link { | ||
background-color: $blue_accent-color; |
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 variable $blue_accent-color
is used here. Ensure this variable is defined in your SCSS files to prevent compilation errors.
|
||
&__link { | ||
background-color: $blue_accent-color; | ||
border: 1px solid $blue_accent-color; |
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 variable $blue_accent-color
is used again. Verify its definition in your SCSS files.
|
||
&:hover { | ||
background-color: inherit; | ||
color: $blue_accent-color; |
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 variable $blue_accent-color
is used once more. Confirm its definition in your SCSS files.
} | ||
|
||
.stars__star { | ||
background-image: url(../images/star.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.
Ensure that the image path '../images/star.svg' is correct and that the image file exists at this location.
} */ | ||
|
||
.stars--1 .stars__star:nth-child(-n + 1) { | ||
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.
Ensure that the image path '../images/star-active.svg' is correct and that the image file exists at this location.
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.
Review Summary
Great job on addressing the previous issues! Your code now meets the task requirements and constraints. Here are some key points and suggestions for improvement:
-
Stylesheet Link: Your HTML file correctly links to the
main.scss
file, which is acceptable due to the use of the Parcel bundler. However, remember that browsers cannot directly interpret SCSS files, so ensure that your SCSS is compiled into a CSS file for broader compatibility. -
SCSS Variables: The SCSS variables
$blue_accent-color
,$main_accent-color
, and$secondary-color
are properly defined in thevariables.scss
file. This is crucial for maintaining consistent styling across your project. -
Image Paths: The paths for
star-active.svg
andstar.svg
in thestars.scss
file are correctly specified. Ensure these images exist at the specified locations to avoid any display issues.
Your solution is approved to help you move forward with your learning. Please review the comments to further improve your code. Addressing these points will enhance your skills and prevent similar issues in the future. Keep up the great work and continue learning from these experiences! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
@@ -9,10 +9,54 @@ | |||
<title>Product cards</title> | |||
<link | |||
rel="stylesheet" | |||
href="./styles/index.scss" | |||
href="./styles/main.scss" | |||
/> |
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.
Browsers cannot directly interpret SCSS files. Please ensure that the SCSS file is compiled into a CSS file and update the link to point to the resulting CSS file.
color: $main_accent-color; | ||
} | ||
|
||
&__text--product-code { | ||
color: $secondary-color; | ||
margin-bottom: 16px; | ||
} | ||
|
||
&__text--reviews { | ||
color: $main_accent-color; | ||
align-self: end; | ||
} | ||
|
||
&__row { | ||
display: flex; | ||
justify-content: space-between; | ||
align-items: center; | ||
} | ||
|
||
&__row--feedback { | ||
margin-bottom: 24px; | ||
} | ||
|
||
&__row--price { | ||
margin-bottom: 16px; | ||
} | ||
|
||
&__text--price { | ||
font-size: 12px; | ||
line-height: 18px; | ||
color: $secondary-color; | ||
} | ||
|
||
&__text--costs { | ||
font-size: 16px; | ||
font-weight: 700; | ||
line-height: 18px; | ||
color: $main_accent-color; | ||
} | ||
|
||
&__link { | ||
background-color: $blue_accent-color; | ||
border: 1px solid $blue_accent-color; | ||
|
||
height: 40px; | ||
box-sizing: border-box; | ||
|
||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
|
||
border-radius: 5px; | ||
|
||
color: white; | ||
text-decoration: none; | ||
font-size: 14px; | ||
font-weight: 700; | ||
line-height: 16px; | ||
|
||
&:hover { | ||
background-color: inherit; | ||
color: $blue_accent-color; |
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.
Ensure that the SCSS variables $main_accent-color
, $secondary-color
, and $blue_accent-color
are defined in your SCSS files to prevent compilation errors.