add task solution #4864

taniabarkovskya · 2024-10-16T16:11:55Z

DEMO LINK
TEST REPORT LINK
there 2 BEM blocks card and stars each in it 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

It looks like there are a few issues that need to be addressed before we can approve the Pull Request. These include a code style issue with spacing, an incorrect comment regarding line-height, and an incorrect file path in the href attribute. Once these are fixed, 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! ✨

mateacademy-ai-mentor · 2024-10-16T16:12:05Z

src/index.html

+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
    <link
      rel="stylesheet"
      href="./styles/index.scss"


The href attribute in the link tag should point to a CSS file, not an SCSS file. Ensure that the path is correct and that the file is compiled to CSS.

mateacademy-ai-mentor · 2024-10-16T16:12:05Z

src/styles/blocks/card.scss

+    border-radius: 5px;
+
+    font-size: 14px;
+    line-height: 40px; /* 16/14 */


The comment '/* 16/14 */' seems incorrect for the line-height property. It should reflect the actual line-height ratio, which is 40/14 in this case.

mateacademy-ai-mentor · 2024-10-16T16:12:05Z

src/styles/blocks/stars.scss

+    }
+  }
+
+  &--4 :nth-child(-n + 4) {


There is an extra space between &--4 and :nth-child(-n + 4). According to the code style rules, there should be no space between the element and the pseudo-class.

mateacademy-ai-mentor

It looks like there are a few issues that need to be addressed before we can proceed. Specifically, the mixins regular-text and small-text need to be verified for their definitions, and the link tag should point to a CSS file instead of a SCSS file. Once these are resolved, you'll be all set! Keep up the great work! 😊

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

mateacademy-ai-mentor · 2024-10-16T16:35:36Z

src/index.html

+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
+      rel="stylesheet"
+    />
    <link
      rel="stylesheet"
      href="./styles/index.scss"


The href attribute in the link tag should point to a CSS file, not a SCSS file. Ensure that the correct CSS file is linked here.

mateacademy-ai-mentor · 2024-10-16T16:35:36Z

src/styles/blocks/card.scss

+
+.description {
+  &__name {
+    @include regular-text;


Issue: The mixin regular-text is used here, but it's not clear if it is defined in the project. Ensure that the mixin is defined in your mixins file or imported correctly.

mateacademy-ai-mentor · 2024-10-16T16:35:36Z

src/styles/blocks/card.scss

+  &__code {
+    color: $secondary-color;
+
+    @include small-text;


Issue: The mixin small-text is used here, but it's not clear if it is defined in the project. Ensure that the mixin is defined in your mixins file or imported correctly.

mateacademy-ai-mentor · 2024-10-16T16:35:37Z

src/styles/blocks/card.scss

+
+.rate {
+  &__reviews {
+    @include small-text;


Issue: The mixin small-text is used here, but it's not clear if it is defined in the project. Ensure that the mixin is defined in your mixins file or imported correctly.

mateacademy-ai-mentor · 2024-10-16T16:35:37Z

src/styles/blocks/card.scss

+  &__text {
+    color: $secondary-color;
+
+    @include regular-text;


Issue: The mixin regular-text is used here, but it's not clear if it is defined in the project. Ensure that the mixin is defined in your mixins file or imported correctly.

mateacademy-ai-mentor · 2024-10-16T16:35:37Z

src/styles/blocks/stars.scss

+    }
+  }
+
+  &--4 :nth-child(-n + 4) {


There is an extra space between '&--4' and ':nth-child(-n + 4)'. According to the code style rules, there should be no space between the element and the pseudo-class.

mateacademy-ai-mentor

Great work on the HTML and SCSS structure! 🎉 While there are a few minor issues with class naming and spacing according to BEM conventions, you've done a solid job overall. Please review the comments to refine your code further. 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! ✨

mateacademy-ai-mentor · 2024-10-16T16:58:37Z

src/styles/blocks/card.scss

+  }
+}
+
+.description {


The class name .description might conflict with the BEM naming convention used in the .card block. Consider using a more specific class name that follows the BEM convention, such as .card__description.

mateacademy-ai-mentor · 2024-10-16T16:58:37Z

src/styles/blocks/card.scss

+  }
+}
+
+.rate {


The class name .rate might conflict with the BEM naming convention used in the .card block. Consider using a more specific class name that follows the BEM convention, such as .card__rate.

mateacademy-ai-mentor · 2024-10-16T16:58:37Z

src/styles/blocks/card.scss

+  }
+}
+
+.price {


The class name .price might conflict with the BEM naming convention used in the .card block. Consider using a more specific class name that follows the BEM convention, such as .card__price.

mateacademy-ai-mentor · 2024-10-16T16:58:37Z

src/styles/blocks/stars.scss

+    }
+  }
+
+  &--4 :nth-child(-n + 4) {


There is an extra space between &--4 and :nth-child(-n + 4). According to the code style rules, there should be no space between the element and the pseudo-class.

BudnikOleksii

Looks great 🔥

BudnikOleksii · 2024-10-17T14:33:28Z

src/index.html

+      <img
+        class="card__image"
+        src="./images/imac.jpeg"
+        alt="Imac image"


alt attribute should describe the image content as well as possible

add task solution

efb47b1

mateacademy-ai-mentor suggested changes Oct 16, 2024

View reviewed changes

fix mistakes

e0afc39

taniabarkovskya requested a review from mateacademy-ai-mentor October 16, 2024 16:35

mateacademy-ai-mentor suggested changes Oct 16, 2024

View reviewed changes

create .css file

6098b11

taniabarkovskya requested a review from mateacademy-ai-mentor October 16, 2024 16:58

mateacademy-ai-mentor approved these changes Oct 16, 2024

View reviewed changes

fix BEM classes and add stars cycle

45e8802

taniabarkovskya requested a review from mateacademy-ai-mentor October 17, 2024 11:05

BudnikOleksii approved these changes Oct 17, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution #4864

add task solution #4864

taniabarkovskya commented Oct 16, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor Oct 16, 2024

mateacademy-ai-mentor Oct 16, 2024

BudnikOleksii left a comment

BudnikOleksii Oct 17, 2024

+                }
+              }
+              .rate {

add task solution #4864

Are you sure you want to change the base?

add task solution #4864

Conversation

taniabarkovskya commented Oct 16, 2024

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

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

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

Choose a reason for hiding this comment

BudnikOleksii left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment