add catalog layout #5140

tarasholotiuk · 2025-02-21T13:33:53Z

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! There are a few critical issues that need to be addressed before we can approve the pull request:

Missing data-qa Attribute: The data-qa="card-hover" attribute is missing from the link Buy inside the first card. This is crucial for testing purposes and needs to be added.
SCSS Variables: The task requires the use of SCSS variables for repeated sizes and special colors. This is important for maintainability and scalability, so please ensure these are implemented.
BEM Naming Convention: Double-check that all components follow the BEM naming convention correctly. This is essential for maintaining a consistent and understandable codebase.
Unrelated Files: The file additionalPrompt is not related to the task and should be removed to keep the repository clean and focused.

These issues are important for the functionality and core requirements of the task. Once you address these, your code will be in great shape! 😊 Keep up the great work, and I'm looking forward to 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-02-21T13:36:34Z

src/index.html

+            </a>
+          </li>
+          <li><a href="/samsung">Samsung</a></li>
+          <li><a href="/smartfones">Smartphones</a></li>


The href attribute for 'Smartphones' is misspelled as '/smartfones'. Ensure the URL is correct to avoid broken links.

mateacademy-ai-mentor · 2025-02-21T13:36:34Z

src/index.html

+          <li><a href="/smartfones">Smartphones</a></li>
+          <li>
+            <a
+              href="/laptops&computers"


The href attribute for 'Laptops & Computers' contains an ampersand ('&'). Consider using a URL-encoded value ('%26') or a hyphen ('-') to avoid potential issues with URL parsing.

mateacademy-ai-mentor · 2025-02-21T13:36:34Z

src/index.html

+          </h2>
+          <p class="card__product-code">Product code: 195434</p>
+          <div class="card__rate">
+            <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="card__reviews">Reviews: 5</p>
+          </div>
+          <div class="card__price">
+            <p class="card__price-label">Price:</p>
+            <p class="card__price-price">$2,199</p>
+          </div>
+          <a
+            href="#"
+            class="card__link-buy"
+          >
+            BUY
+          </a>
+        </div>
+      </div>
+      <div
+        class="card"
+        data-qa="card"
+      >
+        <div class="card__image-wrapper">
+          <img
+            class="card__image"
+            src="./images/imac.jpeg"
+            alt="imac-photo"
+          />
+        </div>
+        <div class="card__content">
+          <h2 class="card__title">
+            APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+          </h2>
+          <p class="card__product-code">Product code: 195434</p>
+          <div class="card__rate">
+            <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="card__reviews">Reviews: 5</p>
+          </div>
+          <div class="card__price">
+            <p class="card__price-label">Price:</p>
+            <p class="card__price-price">$2,199</p>
+          </div>
+          <a
+            href="#"
+            class="card__link-buy"
+          >
+            BUY
+          </a>
+        </div>
+      </div>
+      <div
+        class="card"
+        data-qa="card"
+      >
+        <div class="card__image-wrapper">
+          <img
+            class="card__image"
+            src="./images/imac.jpeg"
+            alt="imac-photo"
+          />
+        </div>
+        <div class="card__content">
+          <h2 class="card__title">
+            APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+          </h2>
+          <p class="card__product-code">Product code: 195434</p>
+          <div class="card__rate">
+            <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="card__reviews">Reviews: 5</p>
+          </div>
+          <div class="card__price">
+            <p class="card__price-label">Price:</p>
+            <p class="card__price-price">$2,199</p>
+          </div>
+          <a
+            href="#"
+            class="card__link-buy"
+          >
+            BUY
+          </a>
+        </div>
+      </div>


The product cards are repeated with identical content. Consider using a templating engine or JavaScript to dynamically generate these cards to avoid redundancy and improve maintainability.

mateacademy-ai-mentor · 2025-02-21T13:36:35Z

src/styles/card.scss

+    &:hover {
+      background-color: #fff;
+      color: #00acdc;
+      border-radius: 5px;


The border-radius property is being set again in the hover state of &__link-buy, but it remains the same as the default state. You can remove this line to avoid redundancy.

mateacademy-ai-mentor · 2025-02-21T13:36:35Z

src/styles/header.scss

+a:hover {
+  color: #00acdc;
+}


The hover effect for links is applied to all anchor tags (a:hover). This could lead to unintended styling if there are other links on the page that should not have this hover effect. Consider increasing the specificity by targeting only the navigation links, for example, nav a:hover.

mateacademy-ai-mentor

Great job on your progress! 🎉 While your code is mostly well-structured, there are a few areas to improve for better maintainability and scalability. Make sure to implement SCSS variables for repeated sizes and colors, as this will enhance your code's consistency and ease of updates. Also, double-check that all class names adhere to the BEM naming convention, especially the use of classes like is-active. Lastly, ensure the data-qa attribute is consistently applied where needed. Keep up the good work, and use this feedback to refine your skills further! 🚀

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

mateacademy-ai-mentor · 2025-02-21T13:55:01Z

src/index.html

+          <a
+            href="#"
+            class="card__link-buy"
+            data-qa="card-hover"


The data-qa="card-hover" attribute is correctly added to the first card's Buy link. Ensure this attribute is consistently applied to other similar elements if required by the task.

mateacademy-ai-mentor · 2025-02-21T13:55:01Z

src/index.html

+            <a
+              class="is-active"


Ensure that the class names follow the BEM naming convention. The class is-active should be checked if it aligns with the BEM methodology.

mateacademy-ai-mentor · 2025-02-21T13:55:01Z

src/styles/card.scss

+  width: 200px;
+  height: 408px;
+  padding: 32px 16px 16px;
+  background: #fff;


Consider using SCSS variables for colors like #fff, #f3f3f3, #060b35, #616070, #34568b, and #00acdc to improve maintainability and consistency across your styles.

mateacademy-ai-mentor · 2025-02-21T13:55:01Z

src/styles/card.scss

+  width: 200px;
+  height: 408px;


Consider using SCSS variables for repeated sizes like 200px, 408px, 32px, 16px, etc., to enhance maintainability and scalability.

mateacademy-ai-mentor · 2025-02-21T13:55:01Z

src/styles/header.scss

+  height: 60px;
+  align-items: center;
+  text-decoration: none;
+  color: #060b35;


Consider using SCSS variables for colors like #060b35 and #00acdc to improve maintainability and consistency across your styles.

mateacademy-ai-mentor · 2025-02-21T13:55:01Z

src/styles/header.scss

+
+body {
+  font-family: Roboto, sans-serif;
+  font-size: 12px;


Consider using SCSS variables for repeated sizes like 12px, 60px, 40px, etc., to enhance maintainability and scalability.

mateacademy-ai-mentor · 2025-02-21T13:55:02Z

src/styles/stars.scss

+    width: 16px;
+    height: 16px;


Consider using SCSS variables for repeated sizes like 16px to enhance maintainability and scalability.

mateacademy-ai-mentor · 2025-02-21T13:55:02Z

src/styles/stars.scss

+  }
+
+  &__star:not(:last-child) {
+    margin-right: 4px;


Consider using SCSS variables for repeated values like 4px to improve maintainability and consistency across your styles.

add catalog layout

eef35f8

mateacademy-ai-mentor suggested changes Feb 21, 2025

View reviewed changes

fix some errors

4f10e59

tarasholotiuk requested a review from mateacademy-ai-mentor February 21, 2025 13:52

mateacademy-ai-mentor approved these changes Feb 21, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add catalog layout #5140

add catalog layout #5140

tarasholotiuk commented Feb 21, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

mateacademy-ai-mentor Feb 21, 2025

add catalog layout #5140

Are you sure you want to change the base?

add catalog layout #5140

Conversation

tarasholotiuk commented Feb 21, 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

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