add task solution #4995

osidanych · 2025-01-10T14:56:54Z

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

Hello! 😊 You've done a great job with your code, and it's clear that you've put a lot of effort into meeting the task requirements. However, there are a few critical issues that need to be addressed before we can approve the pull request:

CSS Syntax Issue: The use of the scale property is incorrect. Please update it to transform: scale(1.2); to ensure valid CSS syntax.
Dynamic Content Handling: The product card section is repeated multiple times. If the content is meant to be dynamic, consider using a JavaScript framework or templating engine to generate these cards dynamically. This will help avoid repetition and improve maintainability.

These changes are important to ensure the functionality and maintainability of your code. Once you've addressed these points, feel free to resubmit your pull request. Keep up the great work, and I'm looking forward to seeing your improvements! 🚀

✨ 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-10T14:57:55Z

src/index.html

+        </div>
+
+        <button class="product-card__button">BUY</button>
+      </div>
+
+      <div class="product-card">
+        <img
+          class="product-card__image"
+          src="images/imac.jpeg"
+          alt="Product logo"
+        />
+
+        <h2 class="product-card__name">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+
+        <p class="product-card__code">Product code: 195434</p>
+
+        <div class="product-card__info">
+          <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>
+          <p class="product-card__review">Reviews: 5</p>
+        </div>
+
+        <div class="product-card__price">
+          <p class="product-card__price-title">Price:</p>
+          <p class="product-card__price-value">$2,199</p>
+        </div>
+
+        <button class="product-card__button">BUY</button>
+      </div>
+
+      <div class="product-card">
+        <img
+          class="product-card__image"
+          src="images/imac.jpeg"
+          alt="Product logo"
+        />
+
+        <h2 class="product-card__name">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+
+        <p class="product-card__code">Product code: 195434</p>
+
+        <div class="product-card__info">
+          <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>
+          <p class="product-card__review">Reviews: 5</p>
+        </div>
+
+        <div class="product-card__price">
+          <p class="product-card__price-title">Price:</p>
+          <p class="product-card__price-value">$2,199</p>
+        </div>
+
+        <button class="product-card__button">BUY</button>
+      </div>
+
+      <div class="product-card">
+        <img
+          class="product-card__image"
+          src="images/imac.jpeg"
+          alt="Product logo"
+        />
+
+        <h2 class="product-card__name">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+
+        <p class="product-card__code">Product code: 195434</p>
+
+        <div class="product-card__info">
+          <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>
+          <p class="product-card__review">Reviews: 5</p>
+        </div>
+
+        <div class="product-card__price">
+          <p class="product-card__price-title">Price:</p>
+          <p class="product-card__price-value">$2,199</p>
+        </div>
+
+        <button class="product-card__button">BUY</button>
+      </div>


The product card section is repeated multiple times with the same content. If this is intentional for static content, it's fine. However, if the data is dynamic, consider using a JavaScript framework or templating engine to generate these cards dynamically to avoid repetition and improve maintainability.

mateacademy-ai-mentor · 2025-01-10T14:57:55Z

src/styles/index.scss

+.product-card:hover {
+  scale: (1.2);


The scale property is not valid CSS. To scale an element, use transform: scale(1.2); instead.

mateacademy-ai-mentor

Great job on addressing previous issues! 🎉 However, there are still a few points that need attention to enhance your code's quality and maintainability:

Dynamic Content Handling: The product card section is repeated multiple times in the HTML file. If the content is meant to be dynamic, consider using a JavaScript framework or templating engine to generate these cards dynamically. This will help avoid repetition and improve maintainability.
SCSS Variables: While your SCSS file uses variables for some colors, ensure that all repeated sizes and special colors are put into variables as per the checklist requirement.
CSS Syntax: The use of the scale property is incorrect. Please update it to transform: scale(1.2); to ensure valid CSS syntax.
BEM and SCSS Consistency: Ensure that all components follow BEM and use SCSS consistently across all components.

Your effort is commendable, and the decision to approve is made to help you move forward with your learning. Please review the comments to improve your code. Addressing these issues will be crucial for future projects to avoid similar problems. 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 · 2025-01-10T15:03:28Z

src/index.html

+        </div>
+
+        <button class="product-card__button">BUY</button>
+      </div>
+
+      <div class="product-card">
+        <img
+          class="product-card__image"
+          src="images/imac.jpeg"
+          alt="Product logo"
+        />
+
+        <h2 class="product-card__name">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+
+        <p class="product-card__code">Product code: 195434</p>
+
+        <div class="product-card__info">
+          <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>
+          <p class="product-card__review">Reviews: 5</p>
+        </div>
+
+        <div class="product-card__price">
+          <p class="product-card__price-title">Price:</p>
+          <p class="product-card__price-value">$2,199</p>
+        </div>
+
+        <button class="product-card__button">BUY</button>
+      </div>
+
+      <div class="product-card">
+        <img
+          class="product-card__image"
+          src="images/imac.jpeg"
+          alt="Product logo"
+        />
+
+        <h2 class="product-card__name">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+
+        <p class="product-card__code">Product code: 195434</p>
+
+        <div class="product-card__info">
+          <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>
+          <p class="product-card__review">Reviews: 5</p>
+        </div>
+
+        <div class="product-card__price">
+          <p class="product-card__price-title">Price:</p>
+          <p class="product-card__price-value">$2,199</p>
+        </div>
+
+        <button class="product-card__button">BUY</button>
+      </div>
+
+      <div class="product-card">
+        <img
+          class="product-card__image"
+          src="images/imac.jpeg"
+          alt="Product logo"
+        />
+
+        <h2 class="product-card__name">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+
+        <p class="product-card__code">Product code: 195434</p>
+
+        <div class="product-card__info">
+          <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>
+          <p class="product-card__review">Reviews: 5</p>
+        </div>
+
+        <div class="product-card__price">
+          <p class="product-card__price-title">Price:</p>
+          <p class="product-card__price-value">$2,199</p>
+        </div>
+
+        <button class="product-card__button">BUY</button>
+      </div>


The product card section is repeated multiple times. If the content is meant to be dynamic, consider using a JavaScript framework or templating engine to generate these cards dynamically. This will help avoid repetition and improve maintainability.

mateacademy-ai-mentor · 2025-01-10T15:03:29Z

src/styles/index.scss

+.product-card:hover {
+  transform: scale(1.2);


The use of the scale property is incorrect. Please update it to transform: scale(1.2); to ensure valid CSS syntax.

vadiimvooo

Good job, but please try to fix comments and pass all tests. Feel free to ask for help in fe_chat.

vadiimvooo · 2025-01-10T19:12:55Z

src/styles/index.scss

+  align-items: center;
+  justify-content: space-between;
+  padding: 0 50px;
+  text-align: center;


Suggested change

text-align: center;

Redundant style, please remove it

vadiimvooo · 2025-01-10T19:13:17Z

src/styles/index.scss

+    display: block;
+    width: 40px;
+    height: 40px;
+    padding: 10px 0;


Suggested change

padding: 10px 0;

You don't need to use padding as you have align-items on header

vadiimvooo · 2025-01-10T19:14:29Z

src/styles/index.scss

+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  height: 60px;


Suggested change

height: 60px;

Redundant style, please remove it

vadiimvooo · 2025-01-10T19:15:31Z

src/styles/index.scss

+  text-transform: uppercase;
+  font-weight: 500;
+  margin-left: 20px;
+  display: inline-block;
+  align-items: center;
+  position: relative;


Suggested change

text-transform: uppercase;

font-weight: 500;

margin-left: 20px;

display: inline-block;

align-items: center;

position: relative;

text-transform: uppercase;

margin-left: 20px;

vadiimvooo · 2025-01-10T19:15:40Z

src/styles/index.scss

+.main {
+  display: grid;
+  padding: 50px 40px;
+  grid-template-columns: repeat(1, auto);


Suggested change

grid-template-columns: repeat(1, auto);

grid-template-columns: repeat(1, 200px);

The same for other media queries

vadiimvooo · 2025-01-10T19:17:26Z

src/styles/index.scss

+    padding-top: 32px;
+    padding-left: 19px;
+    padding-right: 19px;


use paddings on card instead of using it on each element inside

vadiimvooo · 2025-01-10T19:18:01Z

src/styles/index.scss

+    margin-bottom: 40px;
+  }
+  &__name {
+    width: 166px;


This element should be 100% width by default so you can remove width at all

Same for other p tags

add task solution

ced1e1c

mateacademy-ai-mentor suggested changes Jan 10, 2025

View reviewed changes

correct the mistake

a7ae25e

osidanych requested a review from mateacademy-ai-mentor January 10, 2025 15:02

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

View reviewed changes

vadiimvooo suggested changes Jan 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution #4995

add task solution #4995

osidanych commented Jan 10, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

vadiimvooo left a comment

vadiimvooo Jan 10, 2025

vadiimvooo Jan 10, 2025

vadiimvooo Jan 10, 2025

vadiimvooo Jan 10, 2025

vadiimvooo Jan 10, 2025

vadiimvooo Jan 10, 2025

vadiimvooo Jan 10, 2025

vadiimvooo Jan 10, 2025

vadiimvooo Jan 10, 2025

vadiimvooo Jan 10, 2025

vadiimvooo Jan 10, 2025

	grid-template-columns: repeat(1, auto);
	grid-template-columns: repeat(1, 200px);

add task solution #4995

Are you sure you want to change the base?

add task solution #4995

Conversation

osidanych commented Jan 10, 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

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

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

Choose a reason for hiding this comment