completed task #4932

SaXoNG · 2024-12-20T13:56:59Z

DEMO LINK
TEST REPORT LINK
All components follow BEM and use SCSS
Repeated sizes and special colors are put to variables
Grid is used for the columns
Cards are shown in 1, 2, 3, or 4 columns based on screen resolution
All changes on :hover are smooth
Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor

Thank you for your hard work on this project! 😊 While you've done a great job overall, there are a few critical issues that need to be addressed before we can approve the pull request:

Undefined Variables and Mixins: There are several instances where variables like $catalog__card-width, $page-design-color, and $nav-links-color, as well as the square mixin, are used but not confirmed to be defined in your SCSS files. This will lead to compilation errors and needs to be fixed.
Image Paths: Please ensure that all image paths are correct and that the images exist at those locations. Incorrect paths will result in images not displaying correctly.
Duplicate Content: The product cards are repeated multiple times with identical content. Consider using a JavaScript template or loop to dynamically generate these cards, which will make your code cleaner and easier to maintain.
Accessibility Improvements: Improve the alt text for images to enhance accessibility. Descriptive alt texts are important for screen readers and should accurately describe the image content.

Once these issues are resolved, your code will be in great shape! Keep up the good 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 · 2024-12-20T14:01:29Z

src/index.html

+      </div>
+      <div class="catalog__card card">
+        <img
+          class="card__image"
+          src="images/imac.jpeg"
+          alt="logo"
+        />
+        <div class="card__title">
+          APPLE A1419 iMac 27" Retina
+          <br />
+          5K Monoblock (MNED2UA/A)
+        </div>
+        <div class="card__product-code">Product code: 195434</div>
+        <div class="card__rating-field">
+          <div class="stars stars--4">
+            <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>
+          </div>
+          <div class="card__rating-text">Reviews: 5</div>
+        </div>
+        <div class="card__price-field">
+          <div class="card__price-field-text">Price:</div>
+          <div class="card__price-field-number">$2,199</div>
+        </div>
+        <a
+          class="card__buy-link"
+          href="#buy"
+        >
+          BUY
+        </a>
+      </div>
+      <div class="catalog__card card">
+        <img
+          class="card__image"
+          src="images/imac.jpeg"
+          alt="logo"
+        />
+        <div class="card__title">
+          APPLE A1419 iMac 27" Retina
+          <br />
+          5K Monoblock (MNED2UA/A)
+        </div>
+        <div class="card__product-code">Product code: 195434</div>
+        <div class="card__rating-field">
+          <div class="stars stars--4">
+            <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>
+          </div>
+          <div class="card__rating-text">Reviews: 5</div>
+        </div>
+        <div class="card__price-field">
+          <div class="card__price-field-text">Price:</div>
+          <div class="card__price-field-number">$2,199</div>
+        </div>
+        <a
+          class="card__buy-link"
+          href="#buy"
+        >
+          BUY
+        </a>
+      </div>
+      <div class="catalog__card card">
+        <img
+          class="card__image"
+          src="images/imac.jpeg"
+          alt="logo"
+        />
+        <div class="card__title">
+          APPLE A1419 iMac 27" Retina
+          <br />
+          5K Monoblock (MNED2UA/A)
+        </div>
+        <div class="card__product-code">Product code: 195434</div>
+        <div class="card__rating-field">
+          <div class="stars stars--4">
+            <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>
+          </div>
+          <div class="card__rating-text">Reviews: 5</div>
+        </div>
+        <div class="card__price-field">
+          <div class="card__price-field-text">Price:</div>
+          <div class="card__price-field-number">$2,199</div>
+        </div>
+        <a
+          class="card__buy-link"
+          href="#buy"
+        >
+          BUY
+        </a>
+      </div>


The product cards from line 154 to 384 are identical in content. Consider using a template or a loop in your JavaScript to dynamically generate these cards to avoid repetition and make future updates easier.

mateacademy-ai-mentor · 2024-12-20T14:01:29Z

src/index.html

+        href="#logo"
+      >
+        <img
+          src="images/logo.png"


Ensure that the image path 'images/logo.png' is correct and the image is available at this location. Otherwise, the logo might not display correctly.

mateacademy-ai-mentor · 2024-12-20T14:01:29Z

src/index.html

+      >
+        <img
+          class="card__image"
+          src="images/imac.jpeg"


Ensure that the image path 'images/imac.jpeg' is correct and the image is available at this location. Otherwise, the product image might not display correctly.

mateacademy-ai-mentor · 2024-12-20T14:01:29Z

src/index.html

+      >
+        <img
+          src="images/logo.png"
+          alt="logo"


Consider providing a more descriptive alt text for the logo image to improve accessibility. Instead of 'logo', use something like 'Company Logo'.

mateacademy-ai-mentor · 2024-12-20T14:01:30Z

src/index.html

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


Consider providing a more descriptive alt text for the product image to improve accessibility. Instead of 'logo', use something like 'Image of APPLE A1419 iMac 27" Retina'.

mateacademy-ai-mentor · 2024-12-20T14:01:30Z

src/styles/blocks/header.scss

+}
+
+.nav__link:hover {
+  color: $page-design-color;


The variable $page-design-color is used here, but ensure that it is defined elsewhere in your SCSS files. If not, this will cause a compilation error.

mateacademy-ai-mentor · 2024-12-20T14:01:30Z

src/styles/blocks/stars.scss

+  height: 16px;
+  width: 16px;
+  margin-right: 4px;
+  background-image: url(../images/star.svg);


Ensure that the image path '../images/star.svg' is correct and the image is available at this location. Otherwise, the star icons might not display correctly.

mateacademy-ai-mentor · 2024-12-20T14:01:30Z

src/styles/blocks/stars.scss

+.stars--3 .stars__star:nth-child(-n + 3),
+.stars--4 .stars__star:nth-child(-n + 4),
+.stars--5 .stars__star:nth-child(-n + 5) {
+  background-image: url(../images/star-active.svg);


Ensure that the image path '../images/star-active.svg' is correct and the image is available at this location. Otherwise, the active star icons might not display correctly.

mateacademy-ai-mentor · 2024-12-20T14:01:31Z

src/styles/index.scss

+@import './utils/reset';
+@import './utils/normalize';
+@import './utils/variables';
+@import './utils/colors';
+@import './utils/mixins';
+@import './blocks/catalog';
+@import './blocks/header';
+@import './blocks/stars';


Ensure that all the imported SCSS files ('reset', 'normalize', 'variables', 'colors', 'mixins', 'catalog', 'header', 'stars') exist in the specified paths. Missing files will cause compilation errors.

mateacademy-ai-mentor · 2024-12-20T14:01:31Z

src/styles/utils/_mixins.scss

@@ -0,0 +1,3 @@
+@mixin square($size) {
+  grid-template-columns: repeat($size, $catalog__card-width);


Ensure that the variable $catalog__card-width is defined elsewhere in your SCSS files. If not, this will cause a compilation error when the mixin is used.

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.

completed task

141714b

mateacademy-ai-mentor suggested changes Dec 20, 2024

View reviewed changes

SaXoNG requested a review from mateacademy-ai-mentor December 20, 2024 14:53

mateacademy-ai-mentor reviewed Dec 20, 2024

View reviewed changes

SaXoNG added 2 commits December 21, 2024 00:06

add correct logo alt

801a3ed

add correct alt for cards

0923f9f

etojeDenys approved these changes Dec 21, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

completed task #4932

completed task #4932

SaXoNG commented Dec 20, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 20, 2024

mateacademy-ai-mentor Dec 20, 2024

mateacademy-ai-mentor Dec 20, 2024

mateacademy-ai-mentor Dec 20, 2024

mateacademy-ai-mentor Dec 20, 2024

mateacademy-ai-mentor Dec 20, 2024

mateacademy-ai-mentor Dec 20, 2024

mateacademy-ai-mentor Dec 20, 2024

mateacademy-ai-mentor Dec 20, 2024

mateacademy-ai-mentor Dec 20, 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

		@@ -0,0 +1,3 @@
		@mixin square($size) {
		grid-template-columns: repeat($size, $catalog__card-width);

completed task #4932

Are you sure you want to change the base?

completed task #4932

Conversation

SaXoNG commented Dec 20, 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

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

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment