add task solution #5077
add task solution #5077
Conversation
wiltonmartinsdev
commented
Dec 17, 2024
wiltonmartinsdev
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Hello! 😊 It looks like there are a few critical issues that need to be addressed before we can approve the pull request. Let's work through them together:
-
BEM Blocks: The task requires two separate BEM blocks,
cardandstars, each in their own file. Currently, thestarsblock is not separated into its own file, which is a core requirement. -
SCSS Variables: While SCSS variables are used, they need to be placed in a separate file as specified in the task requirements. This helps in maintaining and organizing the code better.
-
Card Width: The card width should be
200pxincluding the border, but it's currently set to165px. This needs to be adjusted to meet the task specifications. -
Stars Block: The task requires the
starsblock to be rewritten using SCSS. Currently, SVG paths are directly included in the HTML, which doesn't align with the requirement. -
Image Path: Ensure that the
background-image: url()is used correctly and is relative toindex.scss. This seems to be missing from the current implementation.
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. You're almost there! 🚀
✨ 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/styles/index.scss
Outdated
| border-radius: 5px; | ||
| border: none; | ||
|
|
||
| background: var(--blue-accent-color, #00acdc); |
There was a problem hiding this comment.
The use of var(--blue-accent-color, #00acdc) is incorrect because the variable --blue-accent-color is not defined in the SCSS file. Instead, you should use the SCSS variable $blue-accent-color directly: background: $blue-accent-color;.
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
[CODE: 7]
If the issue is within your control, please address it.
The next review attempt will automatically launch in 1 hour.
If you believe this is an error or need assistance, please contact the support team.
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
[CODE: 7]
If the issue is within your control, please address it.
The next review attempt will automatically launch in 1 hour.
If you believe this is an error or need assistance, please contact the support team.
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
[CODE: 7]
If the issue is within your control, please address it.
The next review attempt will automatically launch in 1 hour.
If you believe this is an error or need assistance, please contact the support team.
There was a problem hiding this comment.
Sorry, the pull request review was unsuccessful for the following reasons:
Warning
No changes were made in the pull request since the last review. Please make sure that you have added files to the pull request and committed the changes.
[CODE: 7]
If the issue is within your control, please address it.
The next review attempt will automatically launch in 1 hour.
If you believe this is an error or need assistance, please contact the support team.
src/index.html
Outdated
| <h2 class="product-card__code">Product code: 195434</h2> | ||
|
|
||
| <div class="product-card__reviews"> | ||
| <svg |
There was a problem hiding this comment.
What is this svg doing here?
You should have used the same code as for the Stars task done before. The stars should be added using css and work exactly as the previous task (you can literally copy-paste most of it)
src/styles/index.scss
Outdated
| line-height: 18px; | ||
| text-align: left; | ||
|
|
||
| width: 166px; |
There was a problem hiding this comment.
We avoid using these broken numbers. If you saw a number like this in the design, it must certainly comes from another styling, like width: 100% or something like that
src/styles/index.scss
Outdated
| } | ||
|
|
||
| &__star { | ||
| width: 20px; |
There was a problem hiding this comment.
I don't believe this is the right size.
And as I said before, you can use the code from Stars' task
src/styles/index.scss
Outdated
| font-size: 16px; | ||
| } | ||
|
|
||
| .product-card { |
There was a problem hiding this comment.
I believe the height of your card is wrong and it is causing most fails in the test
There was a problem hiding this comment.
Thank you, i will make the adjustments.
| @import 'variables'; | ||
| @import 'product-card'; | ||
| @import 'stars'; | ||
|
|
There was a problem hiding this comment.
Missing declare:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
There was a problem hiding this comment.
Thanks for the tip, I'll make the adjustments
