Develop #4996

BTakhaiev · 2025-01-10T21:32:09Z

❗️ Replace <your_account> with your GitHub username and copy the links to the Pull Request description:

❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.

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! However, there are a few critical issues that need to be addressed before we can proceed:

Undefined Variables: Several SCSS variables such as $main-button-color, $font-size-base, $main-text-color, $second-text-color, and $card-padding are used but not defined. This will lead to compilation errors. Please ensure all variables are defined in a central variables file or earlier in the relevant SCSS files.
BEM Methodology: The code does not consistently follow BEM conventions. For example, class names like .conteiner should be corrected to .container to adhere to proper spelling and BEM conventions.
Data Attributes: The task requires specific data-qa attributes to be added to certain elements, which are currently missing. Please add data-qa="card" to the first card and data-qa="card-hover" to the "Buy" link inside the first card.
Grid Layout and Media Queries: The SCSS should include media queries to adjust the grid layout for different screen sizes as specified in the task requirements. This is currently missing.
Hover Effects: Ensure that all specified hover effects are implemented with smooth transitions over 300ms.

Please address these issues to meet the task requirements. Once resolved, 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! ✨

🔄 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-10T21:34:11Z

src/index.html

+        <button class="card__button">buy</button>
+      </div>
+
+      <div class="card">
+        <div class="card__img">
+          <a
+            href="#"
+            class="card__img-img"
+          ></a>
+        </div>
+
+        <h1 class="card__header">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h1>
+
+        <p class="card__product-code">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="card__response-starsLine stars">
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+          </div>
+
+          <p class="card__response-reviews">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-price">Price:</p>
+          <p class="card__price-tag">$2,199</p>
+        </div>
+
+        <button class="card__button">buy</button>
+      </div>
+
+      <div class="card">
+        <div class="card__img">
+          <a
+            href="#"
+            class="card__img-img"
+          ></a>
+        </div>
+
+        <h1 class="card__header">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h1>
+
+        <p class="card__product-code">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="card__response-starsLine stars">
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+            <a
+              href="#"
+              class="stars__line"
+            ></a>
+          </div>
+
+          <p class="card__response-reviews">Reviews: 5</p>
+        </div>
+
+        <div class="card__price">
+          <p class="card__price-price">Price:</p>
+          <p class="card__price-tag">$2,199</p>
+        </div>
+
+        <button class="card__button">buy</button>
+      </div>


The product card elements are repeated multiple times with the same content. Consider using a templating engine or JavaScript to dynamically generate these cards to avoid redundancy and improve maintainability.

mateacademy-ai-mentor · 2025-01-10T21:34:11Z

src/styles/blocks/card.scss

+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  padding: $card-padding;


The variable $card-padding is used here, but it is not defined within this file. Ensure that $card-padding is defined in a variables file or earlier in this file to avoid compilation errors.

mateacademy-ai-mentor · 2025-01-10T21:34:12Z

src/styles/blocks/card.scss

+  }
+
+  &__header {
+    font-size: $font-size-base;


The variable $font-size-base is used here, but it is not defined within this file. Ensure that $font-size-base is defined in a variables file or earlier in this file to avoid compilation errors.

mateacademy-ai-mentor · 2025-01-10T21:34:12Z

src/styles/blocks/card.scss

+    font-size: $font-size-base;
+    line-height: 18px;
+    font-weight: 500;
+    color: $main-text-color;


The variable $main-text-color is used here, but it is not defined within this file. Ensure that $main-text-color is defined in a variables file or earlier in this file to avoid compilation errors.

mateacademy-ai-mentor · 2025-01-10T21:34:12Z

src/styles/blocks/card.scss

+    font-size: 10px;
+    line-height: 14px;
+    font-weight: 400;
+    color: $second-text-color;


The variable $second-text-color is used here, but it is not defined within this file. Ensure that $second-text-color is defined in a variables file or earlier in this file to avoid compilation errors.

mateacademy-ai-mentor · 2025-01-10T21:34:12Z

src/styles/blocks/card.scss

+      font-size: 16px;
+      line-height: 18px;
+      font-weight: 700;
+      color: $main-text-color;


The variable $main-text-color is used here again, but it is not defined within this file. Ensure that $main-text-color is defined in a variables file or earlier in this file to avoid compilation errors.

mateacademy-ai-mentor · 2025-01-10T21:34:12Z

src/styles/blocks/card.scss

+
+  &__button {
+    margin-top: 16px;
+    background-color: $main-button-color;


The variable $main-button-color is used here, but it is not defined within this file. Ensure that $main-button-color is defined in a variables file or earlier in this file to avoid compilation errors.

mateacademy-ai-mentor · 2025-01-10T21:34:12Z

src/styles/blocks/card.scss

+    width: 166px;
+
+    text-transform: uppercase;
+    font-size: $font-size-base;


The variable $font-size-base is used here again, but it is not defined within this file. Ensure that $font-size-base is defined in a variables file or earlier in this file to avoid compilation errors.

mateacademy-ai-mentor · 2025-01-10T21:34:12Z

src/styles/blocks/card.scss

+  }
+
+  &__button:active {
+    border: 1px solid $main-button-color;


The variable $main-button-color is used here again, but it is not defined within this file. Ensure that $main-button-color is defined in a variables file or earlier in this file to avoid compilation errors.

mateacademy-ai-mentor · 2025-01-10T21:34:12Z

src/styles/blocks/card.scss

+  &__button:active {
+    border: 1px solid $main-button-color;
+    background-color: #fff;
+    color: $main-button-color;


The variable $main-button-color is used here again, but it is not defined within this file. Ensure that $main-button-color is defined in a variables file or earlier in this file to avoid compilation errors.

BTakhaiev · 2025-01-11T22:30:49Z

❗️ Replace <your_account> with your GitHub username and copy the links to the Pull Request description:

DEMO LINK

TEST REPORT LINK

❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.

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

Great progress! 🎉 Your code has significantly improved, addressing many of the previous issues. However, there are still some areas that need attention to ensure full compliance with the task requirements:

BEM Methodology: Ensure all class names consistently follow BEM conventions, including correcting the spelling of container.
Data Attributes: While the data-qa attribute is correctly added to the 'Buy' button, ensure all required elements have the appropriate data-qa attributes.
Hover Effects: Apply smooth transitions (300ms) to all specified elements, including .card, .card__button, .card__header, and a elements.
SCSS Variables: Define all used variables, such as $transition, $main-button-color, $font-size-base, $main-text-color, $second-text-color, and $card-padding, to avoid compilation errors.

Your efforts are commendable, and this approval is to help you move forward in your learning journey. Please review the comments to further refine your code. Keep up the great work and continue to learn 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-11T22:36:13Z

src/index.html

+        </nav>
+      </header>
+    </div>
+    <main class="container">


The class name container should be used instead of conteiner to adhere to proper spelling and BEM conventions. This was mentioned in the previous review and needs to be corrected.

mateacademy-ai-mentor · 2025-01-11T22:36:14Z

src/index.html

+
+        <button
+          class="card__button"
+          data-qa="card-hover"


The data-qa attribute card-hover is correctly added to the 'Buy' button inside the first card. Ensure this is consistent with the task requirements.

mateacademy-ai-mentor · 2025-01-11T22:36:14Z

src/styles/blocks/card.scss

+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  padding: $card-padding;


The variable $card-padding is used here but is not defined anywhere in the SCSS files. This will lead to a compilation error. Please ensure that this variable is defined in a central variables file or earlier in the relevant SCSS files.

mateacademy-ai-mentor · 2025-01-11T22:36:14Z

src/styles/blocks/card.scss

+  flex-direction: column;
+  padding: $card-padding;
+
+  transition: $transition;


The variable $transition is used here but is not defined. Ensure that it is defined to avoid compilation errors.

mateacademy-ai-mentor · 2025-01-11T22:36:14Z

src/styles/blocks/card.scss

+  }
+
+  &__header {
+    font-size: $font-size-base;


The variable $font-size-base is used here but is not defined. Please define this variable to prevent compilation errors.

mateacademy-ai-mentor · 2025-01-11T22:36:15Z

src/styles/blocks/card.scss

+  }
+}
+
+.card:hover {


The hover effect on the .card should include a smooth transition over 300ms as specified in the task requirements. Ensure that the transition is applied correctly.

mateacademy-ai-mentor · 2025-01-11T22:36:15Z

src/styles/blocks/card.scss

+  transform: scale(120%);
+}
+
+.card:hover .card__header {


The hover effect on .card__header should include a smooth transition over 300ms. Ensure that the transition is applied correctly.

mateacademy-ai-mentor · 2025-01-11T22:36:15Z

src/styles/blocks/card.scss

+  color: #34568b;
+}
+
+.card__button:hover {


The hover effect on .card__button should include a smooth transition over 300ms. Ensure that the transition is applied correctly.

mateacademy-ai-mentor · 2025-01-11T22:36:15Z

src/styles/blocks/header.scss

+  a {
+    text-decoration: none;
+    color: #060b35;
+    transition: $transition;


The variable $transition is used here but is not defined. Ensure that it is defined to avoid compilation errors.

mateacademy-ai-mentor · 2025-01-11T22:36:15Z

src/styles/blocks/header.scss

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


The hover effect on the a elements should include a smooth transition over 300ms as specified in the task requirements. Ensure that the transition is applied correctly.

vadiimvooo

Good job, but there are a few comments to fix. Please feel free to ask for help in fe_chat

vadiimvooo · 2025-01-12T10:08:29Z

src/styles/blocks/header.scss

+    align-items: center;
+    justify-content: center;
+  }
+  a {


use line-height for link to make height of header

vadiimvooo · 2025-01-12T10:09:05Z

src/styles/blocks/header.scss

+
+  .img {
+    display: block;
+    margin-left: 50px;


use padding: 0 50px on header instead of placing it in img or nav

vadiimvooo · 2025-01-12T10:09:33Z

src/styles/blocks/header.scss

+    margin-top: 10px;
+    margin-bottom: 10px;


just use align-items center for header instead of hardcoding margins

vadiimvooo · 2025-01-12T10:09:56Z

src/styles/blocks/header.scss

+    align-items: center;
+    justify-content: center;
+  }
+  a {


use class selectors instead of tags

vadiimvooo · 2025-01-12T10:10:42Z

src/styles/blocks/header.scss

+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -22.5px;


you can set the value to 0 when you provide line-height for link

vadiimvooo · 2025-01-12T10:11:31Z

src/styles/blocks/card.scss

+.container {
+  display: grid;
+  grid-template-columns: repeat(1, 200px);
+  gap: 46px 48px;
+  padding: 40px 50px;
+}


Suggested change

.container {

display: grid;

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

gap: 46px 48px;

padding: 40px 50px;

}

.container {

display: grid;

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

gap: 46px 48px;

padding: 40px 50px;

justify-content: center;

}

You have to center container

BTakhaiev added 3 commits January 8, 2025 14:13

add interface

01cc1cf

add catalog

1cef828

add catalog 2

8a99985

mateacademy-ai-mentor suggested changes Jan 10, 2025

View reviewed changes

BTakhaiev added 2 commits January 12, 2025 00:13

error correction

26c2cdb

error correction 2

83a7eb6

BTakhaiev requested a review from mateacademy-ai-mentor January 11, 2025 22:34

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

View reviewed changes

vadiimvooo suggested changes Jan 12, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Develop #4996

Develop #4996

BTakhaiev commented Jan 10, 2025 •

edited

Loading

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

mateacademy-ai-mentor Jan 10, 2025

BTakhaiev commented Jan 11, 2025

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Jan 11, 2025

mateacademy-ai-mentor Jan 11, 2025

mateacademy-ai-mentor Jan 11, 2025

mateacademy-ai-mentor Jan 11, 2025

mateacademy-ai-mentor Jan 11, 2025

mateacademy-ai-mentor Jan 11, 2025

mateacademy-ai-mentor Jan 11, 2025

mateacademy-ai-mentor Jan 11, 2025

mateacademy-ai-mentor Jan 11, 2025

mateacademy-ai-mentor Jan 11, 2025

vadiimvooo left a comment

vadiimvooo Jan 12, 2025

vadiimvooo Jan 12, 2025

vadiimvooo Jan 12, 2025

vadiimvooo Jan 12, 2025

vadiimvooo Jan 12, 2025

vadiimvooo Jan 12, 2025

vadiimvooo Jan 12, 2025

Develop #4996

Are you sure you want to change the base?

Develop #4996

Conversation

BTakhaiev commented Jan 10, 2025 • edited Loading

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

BTakhaiev commented Jan 11, 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

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

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

BTakhaiev commented Jan 10, 2025 •

edited

Loading