add task solution #5203

viktoriamyhailiak · 2025-01-22T14:28:05Z

DEMO LINK
TEST REPORT LINK
There 2 BEM blocks cards and stars each in their own file
SCSS Nesting is used for elements, modifiers, and pseudo-classes
[x]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:

SCSS Nesting: The code does not show evidence of SCSS nesting for elements, modifiers, and pseudo-classes. Implementing nesting will help organize styles hierarchically and improve maintainability.
Stars Modifiers: The task requires stars--N modifiers to highlight the first N stars. This functionality is missing and needs to be implemented to meet the task requirements.
Font-weight Values: There are several instances where font-weight is incorrectly specified with units (e.g., font-weight: 500px;). These should be corrected to numeric values without units (e.g., font-weight: 500;).
Typo in CSS: There's a typo in align-items: centers;. It should be corrected to align-items: center;.

Once these issues are resolved, your code will be in great shape! Keep up the great 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! ✨

🔄 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 · 2025-01-22T14:29:56Z

src/styles/card.scss

+}
+
+.card__description {
+  font-weight: 500px;


The font-weight property should not have a unit like 'px'. It should be a numeric value, such as 500.

mateacademy-ai-mentor · 2025-01-22T14:29:57Z

src/styles/card.scss

+
+  @include card-inline-margin;
+
+  align-items: centers;


There is a typo in 'align-items: centers;'. It should be 'align-items: center;'.

mateacademy-ai-mentor · 2025-01-22T14:29:57Z

src/styles/card.scss

+  border-color: $button-color;
+  box-shadow: none;
+  color: $main-background-color;
+  font-weight: 700px;


The font-weight property should not have a unit like 'px'. It should be a numeric value, such as 700.

mateacademy-ai-mentor · 2025-01-22T14:29:57Z

src/styles/page.scss

+.page__body {
+  font-family: Roboto, serif;
+  font-optical-sizing: auto;
+  font-weight: 400px;


The font-weight property should not have a unit like 'px'. It should be a numeric value, such as 400.

mateacademy-ai-mentor · 2025-01-22T14:29:57Z

src/styles/price.scss

@@ -0,0 +1,10 @@
+.price__discription {
+  font-weight: 400px;


The font-weight property should not have a unit like 'px'. It should be a numeric value, such as 400.

mateacademy-ai-mentor · 2025-01-22T14:29:57Z

src/styles/price.scss

+
+.price__value {
+  font-size: 16px;
+  font-weight: 700px;


The font-weight property should not have a unit like 'px'. It should be a numeric value, such as 700.

mateacademy-ai-mentor

Sorry, the pull request review was unsuccessful for the following reasons:

Warning

Something went wrong while processing the review.
_{[CODE: 3]}

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

Something went wrong while processing the review.
_{[CODE: 3]}

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

Great job on making significant progress with your project! 🎉 While there are still a few areas to improve, such as implementing SCSS nesting and correcting class name typos, your efforts are commendable. The stars--N modifiers need attention to ensure they highlight the first N stars as required. Additionally, ensure that the <html> tag is properly closed. These improvements will enhance your code's functionality and maintainability. Keep up the good work, and use this feedback to refine your skills further. Remember, addressing these issues will help you avoid similar problems in the future. Happy coding! 🚀

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

mateacademy-ai-mentor · 2025-01-22T17:22:06Z

src/index.html

@@ -1,18 +1,71 @@
 <!doctype html>
-<html lang="en">
+<html


The <html> tag is not properly closed. It should be <html> instead of <html /++2++/>.

mateacademy-ai-mentor · 2025-01-22T17:22:06Z

src/index.html

+      </p>
+      <p class="card__product-code">Product code: 195434</p>
+      <div class="card__review">
+        <div class="stars card__starts">


There is a typo in the class name card__starts. It should be card__stars to match the naming convention and likely intended meaning.

mateacademy-ai-mentor · 2025-01-22T17:22:07Z

src/styles/card.scss

@@ -0,0 +1,86 @@
+.card {


Consider using SCSS nesting for better organization. For example, nest styles for .card__photo, .card__description, etc., within the .card block.

mateacademy-ai-mentor · 2025-01-22T17:22:07Z

src/styles/card.scss

@@ -0,0 +1,86 @@
+.card {


The task requires stars--N modifiers to highlight the first N stars. Ensure these modifiers are implemented in your SCSS.

Please fix this AI comment

mateacademy-ai-mentor · 2025-01-22T17:22:07Z

src/styles/price.scss

@@ -0,0 +1,10 @@
+.price__discription {


There is a typo in the class name .price__discription. It should be .price__description to match the intended meaning.

mateacademy-ai-mentor · 2025-01-22T17:22:07Z

src/styles/stars.scss

@@ -0,0 +1,22 @@
+.stars {


Consider using SCSS nesting to organize the styles better. For example, nest the .stars__star styles within the .stars block.

mateacademy-ai-mentor · 2025-01-22T17:22:07Z

src/styles/stars.scss

@@ -0,0 +1,22 @@
+.stars {


The task requires stars--N modifiers to highlight the first N stars. Ensure these modifiers are implemented in your SCSS.

vadiimvooo

Looks like there is a problem with deploy, please fix it. Feel free to ask for help in fe_chat

vadiimvooo · 2025-01-22T20:27:26Z

src/styles/stars.scss

+    &--1,
+    &--2,
+    &--3,
+    &--4 {
+      background-image: url(../images/star-active.svg);
+    }
+    &--5 {
+      background-image: url(../images/star.svg);
+    }


use scss loop to generate selectors.

vadiimvooo · 2025-01-22T20:27:57Z

src/styles/price.scss

You don't need separate file for price as it part of card

vadiimvooo

There are still issues with your deploy link. Try to delete .parcel-cache and dist folders and make deploy once again. Please feel free to ask for help in fe_chat.

vadiimvooo · 2025-01-23T15:59:46Z

src/index.html

+      data-qa="card"
+    >
+      <img
+        src="/src/images/imac.jpeg"


Suggested change

src="/src/images/imac.jpeg"

src="images/imac.jpeg"

vadiimvooo · 2025-01-23T15:59:53Z

src/index.html

    <link
      rel="stylesheet"
-      href="./styles/index.scss"
+      href="./styles/main.scss"


Suggested change

href="./styles/main.scss"

href="styles/main.scss"

vadiimvooo · 2025-01-23T16:00:25Z

src/index.html

+          <div class="stars__star stars__star--1"></div>
+          <div class="stars__star stars__star--2"></div>
+          <div class="stars__star stars__star--3"></div>
+          <div class="stars__star stars__star--4"></div>
+          <div class="stars__star stars__star--5"></div>


Suggested change

<div class="stars__star stars__star--1"></div>

<div class="stars__star stars__star--2"></div>

<div class="stars__star stars__star--3"></div>

<div class="stars__star stars__star--4"></div>

<div class="stars__star stars__star--5"></div>

<div class="stars__star"></div>

<div class="stars__star"></div>

<div class="stars__star"></div>

<div class="stars__star"></div>

<div class="stars__star"></div>

vadiimvooo · 2025-01-23T16:00:37Z

src/index.html

+      </p>
+      <p class="card__product-code">Product code: 195434</p>
+      <div class="card__review">
+        <div class="stars card__stars">


Suggested change

<div class="stars card__stars">

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

vadiimvooo · 2025-01-23T16:00:51Z

src/index.html

+        </div>
+        <p class="card__review-amount">Reviews: 5</p>
+      </div>
+      <div class="price card__price">


Suggested change

<div class="price card__price">

<div class="card__price">

vadiimvooo · 2025-01-23T16:01:10Z

src/index.html

+        <p class="price__description">Price:</p>
+        <p class="price__value">$2,199</p>


Suggested change

<p class="price__description">Price:</p>

<p class="price__value">$2,199</p>

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

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

Please fix styles as well

vadiimvooo · 2025-01-23T16:01:44Z

src/index.html

+        <input
+          type="button"
+          value="BUY"
+          class="card__button"
+        />


It's not necessary to use input here, just add styles for a tag

vadiimvooo · 2025-01-23T16:02:09Z

src/styles/card.scss

@@ -0,0 +1,86 @@
+.card {


Please fix this AI comment

vadiimvooo · 2025-01-23T16:03:44Z

src/styles/stars.scss

+      background-image: url(../images/star.svg);
+    }
+  }
+}


Suggested change

}

}

@for $i from 0 through 5 {

.stars--#{$i} > .stars__star:nth-child(-n + #{$i}) {

background-image: url(../images/star-active.svg);

}

}

VitaliyBondarenko1982

Good job.
Almost done. Try to pass tests.
Check vertical sizes for all elements.
Total card height should be 408px as in design.

make paddings for .card
don't use horizontal margins for card elements
for make space betweent elements - use same vertical margin (margin-bottom will be good).
some tags has default margins (h1, h2... p, ). Reset them

add task solution

0f1d108

mateacademy-ai-mentor suggested changes Jan 22, 2025

View reviewed changes

add task solution

8c831f8

viktoriamyhailiak requested a review from mateacademy-ai-mentor January 22, 2025 14:45

mateacademy-ai-mentor reviewed Jan 22, 2025

View reviewed changes

viktoriamyhailiak requested a review from mateacademy-ai-mentor January 22, 2025 14:51

mateacademy-ai-mentor reviewed Jan 22, 2025

View reviewed changes

viktoriamyhailiak requested a review from mateacademy-ai-mentor January 22, 2025 16:28

add task solution

83fa422

mateacademy-ai-mentor approved these changes Jan 22, 2025

View reviewed changes

add task solution

1ce283f

vadiimvooo suggested changes Jan 22, 2025

View reviewed changes

add a solution

f92ea45

viktoriamyhailiak requested a review from vadiimvooo January 23, 2025 13:30

vadiimvooo suggested changes Jan 23, 2025

View reviewed changes

viktoriamyhailiak added 2 commits January 24, 2025 17:09

add a solution

c5028cd

add a solution

b64bec8

viktoriamyhailiak requested a review from vadiimvooo January 24, 2025 15:15

VitaliyBondarenko1982 suggested changes Jan 24, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution #5203

add task solution #5203

viktoriamyhailiak commented Jan 22, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor Jan 22, 2025

vadiimvooo Jan 23, 2025

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor Jan 22, 2025

mateacademy-ai-mentor Jan 22, 2025

vadiimvooo left a comment

vadiimvooo Jan 22, 2025

vadiimvooo Jan 22, 2025

vadiimvooo left a comment

vadiimvooo Jan 23, 2025

vadiimvooo Jan 23, 2025

vadiimvooo Jan 23, 2025

vadiimvooo Jan 23, 2025

vadiimvooo Jan 23, 2025

vadiimvooo Jan 23, 2025

vadiimvooo Jan 23, 2025

vadiimvooo Jan 23, 2025

vadiimvooo Jan 23, 2025

vadiimvooo Jan 23, 2025

VitaliyBondarenko1982 left a comment

		<p class="price__description">Price:</p>
		<p class="price__value">$2,199</p>

-}
+}
+@for $i from 0 through 5 {
+  .stars--#{$i} > .stars__star:nth-child(-n + #{$i}) {
+    background-image: url(../images/star-active.svg);
+  }
+}

add task solution #5203

Are you sure you want to change the base?

add task solution #5203

Conversation

viktoriamyhailiak commented Jan 22, 2025

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

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

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

vadiimvooo left a 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

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

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