add task solution #5069

Maks-Chervyakov · 2024-12-15T16:08:18Z

No description provided.

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 Compilation: The HTML file is linking directly to an SCSS file. Browsers cannot interpret SCSS, so you need to compile your SCSS into CSS and link the resulting CSS file in your HTML.
Variable Definitions: Ensure that all SCSS variables ($white, $gray-elements, $main-accent, $secondary, $blue-accent) are defined in your variables.scss file or imported correctly. This is crucial for maintaining the styling consistency across your project.
Image Paths: Verify that the star-active.svg and star.svg images exist in the ../images/ directory and that the paths are correct in your SCSS files.

Once these issues are resolved, your project will be in great shape! Keep up the great work, and feel free to reach out if you have any questions or need further assistance. 🌟

✨ 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-15T16:09:53Z

src/index.html

    <link
      rel="stylesheet"
      href="./styles/index.scss"
    />


The stylesheet link is pointing to an SCSS file (index.scss). Browsers cannot directly interpret SCSS files. You should compile the SCSS file to a CSS file and link to the resulting CSS file instead.

mateacademy-ai-mentor · 2024-12-15T16:09:53Z

src/styles/card.scss

+  font-family: Roboto, sans-serif;
+  box-sizing: border-box;
+  padding: 32px 16px 16px;
+  background: $white;


The variable $white is used here. Ensure that it is defined in your SCSS files or imported from another file.

mateacademy-ai-mentor · 2024-12-15T16:09:53Z

src/styles/card.scss

+  box-sizing: border-box;
+  padding: 32px 16px 16px;
+  background: $white;
+  border: 1px solid $gray-elements;


The variable $gray-elements is used here. Ensure that it is defined in your SCSS files or imported from another file.

mateacademy-ai-mentor · 2024-12-15T16:09:54Z

src/styles/card.scss

+    font-weight: 500;
+    font-size: 12px;
+    line-height: 18px;
+    color: $main-accent;


The variable $main-accent is used here. Ensure that it is defined in your SCSS files or imported from another file.

mateacademy-ai-mentor · 2024-12-15T16:09:54Z

src/styles/card.scss

+    font-weight: 400;
+    font-size: 10px;
+    line-height: 1.4;
+    color: $secondary;


The variable $secondary is used here. Ensure that it is defined in your SCSS files or imported from another file.

mateacademy-ai-mentor · 2024-12-15T16:09:54Z

src/styles/card.scss

+    transition: 0.2s ease-in-out;
+    border: 1px solid $blue-accent;
+    &:hover {
+      color: $blue-accent;


The variable $blue-accent is used here. Ensure that it is defined in your SCSS files or imported from another file.

mateacademy-ai-mentor · 2024-12-15T16:09:54Z

src/styles/card.scss

+    border: 1px solid $blue-accent;
+    &:hover {
+      color: $blue-accent;
+      background: $white;


The variable $white is used here. Ensure that it is defined in your SCSS files or imported from another file.

mateacademy-ai-mentor · 2024-12-15T16:09:54Z

src/styles/index.scss

 }
+
+@import 'variables';


Ensure that the variables.scss file contains all the necessary variable definitions used in your SCSS files, such as $white, $gray-elements, $main-accent, $secondary, and $blue-accent.

mateacademy-ai-mentor · 2024-12-15T16:09:54Z

src/styles/stars.scss

+    height: 16px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url(../images/star.svg);


Ensure that the star.svg image exists in the ../images/ directory and the path is correct.

mateacademy-ai-mentor · 2024-12-15T16:09:55Z

src/styles/stars.scss

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


Ensure that the star-active.svg image exists in the ../images/ directory and the path is correct.

mateacademy-ai-mentor

Your code meets the task requirements and constraints, and I'm approving your Pull Request to help you move forward with your learning journey. 🚀

Review Summary:

HTML File: The structure is mostly well-formed, but remember to compile your SCSS into CSS, as browsers cannot interpret SCSS directly. This is crucial for the functionality of your webpage.
SCSS Files:
- Ensure all SCSS variables ($white, $gray-elements, $main-accent, $secondary, $blue-accent) are defined in your variables.scss file or imported correctly. This is essential for maintaining styling consistency.
- Verify that image paths for imac.jpeg, star.svg, and star-active.svg are correct and that the images exist in the specified directory.
Configuration Files: Your .linthtmlrc.json is well-configured, and no critical issues were found.
Final Conclusion: Your code is in good shape overall, with SCSS nesting and BEM blocks correctly implemented. Ensure to address the critical issues mentioned to avoid similar problems in the future.

Keep up the great work, and use this feedback to refine your skills! 😊

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

mateacademy-ai-mentor · 2024-12-15T16:17:33Z

src/index.html

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


The HTML file is linking to an SCSS file (index.scss). Browsers cannot interpret SCSS directly. You need to compile your SCSS into CSS and link the resulting CSS file here.

mateacademy-ai-mentor · 2024-12-15T16:17:33Z

src/styles/card.scss

+  font-family: Roboto, sans-serif;
+  box-sizing: border-box;
+  padding: 32px 16px 16px;
+  background: $white;


Ensure that the SCSS variable $white is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

mateacademy-ai-mentor · 2024-12-15T16:17:33Z

src/styles/card.scss

+  box-sizing: border-box;
+  padding: 32px 16px 16px;
+  background: $white;
+  border: 1px solid $gray-elements;


Ensure that the SCSS variable $gray-elements is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

mateacademy-ai-mentor · 2024-12-15T16:17:33Z

src/styles/card.scss

+    font-weight: 500;
+    font-size: 12px;
+    line-height: 18px;
+    color: $main-accent;


Ensure that the SCSS variable $main-accent is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

mateacademy-ai-mentor · 2024-12-15T16:17:33Z

src/styles/card.scss

+    font-weight: 400;
+    font-size: 10px;
+    line-height: 1.4;
+    color: $secondary;


Ensure that the SCSS variable $secondary is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

mateacademy-ai-mentor · 2024-12-15T16:17:34Z

src/styles/card.scss

+    transition: 0.2s ease-in-out;
+    border: 1px solid $blue-accent;
+    &:hover {
+      color: $blue-accent;


Ensure that the SCSS variable $blue-accent is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

mateacademy-ai-mentor · 2024-12-15T16:17:34Z

src/styles/card.scss

+    border: 1px solid $blue-accent;
+    &:hover {
+      color: $blue-accent;
+      background: $white;


Ensure that the SCSS variable $white is defined in your variables.scss file or imported correctly. This is crucial for maintaining styling consistency.

mateacademy-ai-mentor · 2024-12-15T16:17:34Z

src/styles/card.scss

+  &__image {
+    width: 100%;
+    height: 134px;
+    background-image: url(../images/imac.jpeg);


Verify that the image imac.jpeg exists in the ../images/ directory and that the path is correct in your SCSS file.

mateacademy-ai-mentor · 2024-12-15T16:17:34Z

src/styles/stars.scss

+    height: 16px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url(../images/star.svg);


Verify that the image star.svg exists in the ../images/ directory and that the path is correct in your SCSS file.

mateacademy-ai-mentor · 2024-12-15T16:17:34Z

src/styles/stars.scss

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


Verify that the image star-active.svg exists in the ../images/ directory and that the path is correct in your SCSS file.

vadiimvooo

Good job, a few changes to fix.

vadiimvooo · 2024-12-15T20:32:42Z

src/index.html

+      class="card"
+      data-qa="card"
+    >
+      <div class="card__image"></div>


Use img tag to display card image instead of doing it with background property

VitaliyBondarenko1982

Looks good.
Do not forget add demo links to PR description in next tasks.

add task solution

f7f657e

mateacademy-ai-mentor suggested changes Dec 15, 2024

View reviewed changes

try fix

d7d9d40

Maks-Chervyakov requested a review from mateacademy-ai-mentor December 15, 2024 16:16

mateacademy-ai-mentor approved these changes Dec 15, 2024

View reviewed changes

vadiimvooo suggested changes Dec 15, 2024

View reviewed changes

fix product image

97ef753

Maks-Chervyakov requested a review from vadiimvooo December 16, 2024 11:02

VitaliyBondarenko1982 approved these changes Dec 16, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution #5069

add task solution #5069

Maks-Chervyakov commented Dec 15, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

mateacademy-ai-mentor Dec 15, 2024

vadiimvooo left a comment

vadiimvooo Dec 15, 2024

Maks-Chervyakov Dec 16, 2024

VitaliyBondarenko1982 left a comment

		}

		@import 'variables';

add task solution #5069

Are you sure you want to change the base?

add task solution #5069

Conversation

Maks-Chervyakov commented Dec 15, 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

Review Summary:

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

VitaliyBondarenko1982 left a comment

Choose a reason for hiding this comment