Develop #5006

RuslanKhaiko · 2024-11-22T17:48:39Z

DEMO LINK
TEST REPORT LINK
there 2 BEM blocks card and stars each in their own file
SCSS Nesting is used for elements, modifiers and pseudo-classes
SCSS Variables are used for main values and placed in a separate file
all stars--N modifiers work as expected (Highlight first N stars)
Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor

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. Specifically, the separation of BEM blocks into individual files, the use of SCSS nesting, and the organization of SCSS variables into a separate file are core requirements that have not been met. Additionally, the stars block needs to be rewritten as specified, and the background image URLs should be relative. These changes are essential for the functionality and maintainability of the code. Once these issues are resolved, your code will be in great shape! Keep up the great effort, 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.

mateacademy-ai-mentor · 2024-11-22T17:49:54Z

src/styles/index.scss

+  font-weight: 700;
+  width: 166px;
+  height: 40px;
+  color: #ffff;


The color value '#ffff' is incorrect. It should be '#ffffff' for white. Ensure that the color values are correctly specified.

mateacademy-ai-mentor · 2024-11-22T17:49:54Z

src/styles/index.scss

+  font-weight: 700;
+  width: 166px;
+  height: 40px;
+  color: #00acdc;


The color value '#ffff' is incorrect. It should be '#ffffff' for white. Ensure that the color values are correctly specified.

mateacademy-ai-mentor · 2024-11-22T17:49:54Z

src/styles/index.scss

+  }
+}
+
+.product-card__stars__star:nth-child(-n + 4) {


The selector '.product-card__stars__star:nth-child(-n + 4)' is overly specific. Consider simplifying the selector if possible to improve maintainability and avoid potential specificity issues.

mateacademy-ai-mentor

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.

mateacademy-ai-mentor

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.

mateacademy-ai-mentor

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.

mateacademy-ai-mentor

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.

volodymyr-soltys97

Hi, here is no styles on the demo, you need to make a deploy again and check it after on the demo

volodymyr-soltys97 · 2024-11-23T07:30:22Z

src/index.html

+        <div class="product-card__stars">
+          <div class="product-card__stars-star"></div>
+          <div class="product-card__stars-star"></div>
+          <div class="product-card__stars-star"></div>


This part of the task is incomplete, you need to add the modifier class and use styles from the previous task

volodymyr-soltys97 · 2024-11-23T07:30:42Z

src/index.html

+          <div class="product-card__stars-star"></div>
+          <div class="product-card__stars-star"></div>
+          <div class="product-card__stars-star"></div>
+          <div class="product-card__stars-review">Reviews: 5</div>


You need to use the semantic tag for text, fix it everywhere

volodymyr-soltys97 · 2024-11-23T07:30:56Z

src/index.html

+          <div class="product-card__price-number">$2,199</div>
+        </div>
+
+        <div class="button">


Redundant wrapper

Suggested change

<div class="button">

volodymyr-soltys97 · 2024-11-23T07:31:19Z

src/styles/index.scss

+$main-color: #060b35;
+$secondary-color: #616070;
+$button-bg-color: #00acdc;


Move variables to the separate file

volodymyr-soltys97 · 2024-11-23T07:31:41Z

src/styles/index.scss

+.product-card__stars {
+  display: flex;
+  padding-bottom: 24px;
+  &-star {
+    background-image: url(/src/images/star.svg);
+    background-repeat: no-repeat;
+    height: 16px;
+    width: 16px;
+    padding-right: 4px;
+  }


Move stars styles to the separate file

volodymyr-soltys97 · 2024-11-23T07:32:03Z

src/styles/index.scss

+  font-weight: 700;
+  width: 166px;
+  height: 40px;
+  color: #ffff;


volodymyr-soltys97 · 2024-11-23T07:32:28Z

src/styles/index.scss

+  font-weight: 700;
+  width: 166px;
+  height: 40px;
+  color: #00acdc;


Create a variable for repeated color and use scss nesting everywhere

VitaliyBondarenko1982

No space under button. It is a reason of failed tests.

VitaliyBondarenko1982 · 2024-11-23T16:33:41Z

src/styles/modifiers.scss

+}
+
+// .card__button {
+// padding-bottom: 16px;


do not keep commented code

VitaliyBondarenko1982 · 2024-11-23T16:36:46Z

src/styles/modifiers.scss

+    width: 160px;
+    height: 134px;
+    padding-top: 32px;
+    padding-bottom: 40px;


better to make paddings for .card (for each side) and inside card should be only vertical margins between elements. it is should be on bottom or only top margins.

VitaliyBondarenko1982 · 2024-11-23T16:37:49Z

src/styles/modifiers.scss

+  padding-bottom: 16px;
+
+  &-value {
+    padding-left: 85px;


it is hardcode. instead use justify-content: space-between for parent element

vadiimvooo

Good job, but you have to fix stars and title margin. Please feel free to ask for help in fe_chat

etojeDenys

please, don't forget to fix all tests and then re-request the review

etojeDenys · 2024-11-26T19:55:39Z

src/styles/modifiers.scss

+.card__price {
+  display: flex;
+  justify-content: space-between;
+  color: $secondary-color;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  margin-bottom: 16px;
+
+  &-value {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 18px;
+    color: $main-color;
+  }
+}
+
+.card__button-buy {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  line-height: 16px;


don't forget to use sass nesting here

volodymyr-soltys97

Almost done!
This part of the task is incomplete, you need to implement the modifier logic for active stars, use styles for stars from the previous task

volodymyr-soltys97 · 2024-11-27T06:56:16Z

src/index.html

+          <p class="card__code">Product code: 195434</p>
+        </h2>
+
+        <div class="stars">


Add the modifier class

Suggested change

<div class="stars">

<div class="stars stars--4">

volodymyr-soltys97 · 2024-11-27T06:56:42Z

src/index.html

+          <div class="stars-star"></div>
+          <div class="stars-star"></div>
+          <div class="stars-star"></div>
+          <div class="stars-review">Reviews: 5</div>


You need to use the semantic tag for text, fix it everywhere

Suggested change

<div class="stars-review">Reviews: 5</div>

<p class="stars-review">Reviews: 5</p>

volodymyr-soltys97

Hi, this part of the task is incomplete, you need to use styles for stars block from the previous task, if you have any questions feel free in the fe_chat

volodymyr-soltys97 · 2024-11-28T07:47:57Z

src/index.html

+        <div class="card__price">
+          Price:
+          <div class="card__price-value">$2,199</div>
+        </div>


You need to use semantic tag for text

Suggested change

<div class="card__price">

Price:

<div class="card__price-value">$2,199</div>

</div>

<div class="card__price">

<p class="card__price-label">Price:</p>

<p class="card__price-value">$2,199</p>

</div>

volodymyr-soltys97 · 2024-11-28T07:48:42Z

src/styles/modifiers.scss

+  &__price {
+    display: flex;
+    justify-content: space-between;
+    color: $secondary-color;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    margin-bottom: 16px;
+  }
+
+  &__price-value {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 18px;
+    color: $main-color;
+  }


Use scss nesting everywhere

Suggested change

&__price {

display: flex;

justify-content: space-between;

color: $secondary-color;

font-size: 12px;

font-weight: 400;

line-height: 18px;

margin-bottom: 16px;

}

&__price-value {

font-size: 16px;

font-weight: 700;

line-height: 18px;

color: $main-color;

}

&__price {

display: flex;

justify-content: space-between;

color: $secondary-color;

font-size: 12px;

font-weight: 400;

line-height: 18px;

margin-bottom: 16px;

&-value {

// write styles here

}

}

add task solution

d54e810

mateacademy-ai-mentor suggested changes Nov 22, 2024

View reviewed changes

RuslanKhaiko requested a review from mateacademy-ai-mentor November 22, 2024 19:34

mateacademy-ai-mentor reviewed Nov 22, 2024

View reviewed changes

RuslanKhaiko requested a review from mateacademy-ai-mentor November 22, 2024 19:34

mateacademy-ai-mentor reviewed Nov 22, 2024

View reviewed changes

volodymyr-soltys97 suggested changes Nov 23, 2024

View reviewed changes

add task solution

65572b8

RuslanKhaiko requested review from mateacademy-ai-mentor and volodymyr-soltys97 November 23, 2024 14:23

add task solution

1be30a5

VitaliyBondarenko1982 suggested changes Nov 23, 2024

View reviewed changes

add task solution

c159a07

RuslanKhaiko requested a review from VitaliyBondarenko1982 November 23, 2024 19:07

vadiimvooo suggested changes Nov 23, 2024

View reviewed changes

add task solution

9c3e311

RuslanKhaiko requested a review from vadiimvooo November 26, 2024 19:05

etojeDenys suggested changes Nov 26, 2024

View reviewed changes

add task solution

bb9eaef

RuslanKhaiko requested a review from etojeDenys November 26, 2024 20:49

volodymyr-soltys97 suggested changes Nov 27, 2024

View reviewed changes

add task solution

1b44cb2

RuslanKhaiko requested a review from volodymyr-soltys97 November 27, 2024 23:01

volodymyr-soltys97 suggested changes Nov 28, 2024

View reviewed changes

add task solution

6cc5908

RuslanKhaiko requested a review from volodymyr-soltys97 November 28, 2024 20:06

volodymyr-soltys97 approved these changes Nov 29, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Develop #5006

Develop #5006

RuslanKhaiko commented Nov 22, 2024 •

edited

Loading

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Nov 22, 2024

mateacademy-ai-mentor Nov 22, 2024

mateacademy-ai-mentor Nov 22, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor left a comment

volodymyr-soltys97 left a comment

volodymyr-soltys97 Nov 23, 2024

volodymyr-soltys97 Nov 23, 2024

volodymyr-soltys97 Nov 23, 2024

volodymyr-soltys97 Nov 23, 2024

volodymyr-soltys97 Nov 23, 2024

volodymyr-soltys97 Nov 23, 2024

volodymyr-soltys97 Nov 23, 2024

VitaliyBondarenko1982 left a comment

VitaliyBondarenko1982 Nov 23, 2024

VitaliyBondarenko1982 Nov 23, 2024

VitaliyBondarenko1982 Nov 23, 2024

vadiimvooo left a comment

etojeDenys left a comment

etojeDenys Nov 26, 2024

volodymyr-soltys97 left a comment

volodymyr-soltys97 Nov 27, 2024

volodymyr-soltys97 Nov 27, 2024

volodymyr-soltys97 left a comment

volodymyr-soltys97 Nov 28, 2024

volodymyr-soltys97 Nov 28, 2024

	<div class="stars-review">Reviews: 5</div>
	<p class="stars-review">Reviews: 5</p>

Develop #5006

Are you sure you want to change the base?

Develop #5006

Conversation

RuslanKhaiko commented Nov 22, 2024 • edited Loading

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

VitaliyBondarenko1982 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vadiimvooo left a comment

Choose a reason for hiding this comment

etojeDenys left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RuslanKhaiko commented Nov 22, 2024 •

edited

Loading