add task solution #4837
add task solution #4837
Conversation
leraMeleshchenko
commented
Nov 9, 2024
leraMeleshchenko
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
It looks like there are a few critical issues that need to be addressed before we can approve this pull request:
-
Undefined SCSS Variables: Several SCSS variables such as
$header-blue-color,$card-dark-text, and$card-grey-textare used but not defined in the relevant files. This will lead to compilation errors. Please ensure these variables are defined in a file that is imported into the SCSS files where they are used. -
Incorrect Import Path: There seems to be a typo in the import path './untils/variables'. It should likely be './utils/variables'. Please verify and correct the directory name to prevent import errors.
-
SCSS Compilation: The HTML file is linking directly to an SCSS file (
styles/reset.scss). Browsers cannot interpret SCSS, so make sure to compile your SCSS files to CSS before linking them in your HTML. -
Redundant HTML Content: The product card content is repeated multiple times with the same data. Consider using a template engine or JavaScript to dynamically generate these cards to reduce redundancy and improve maintainability.
Please address these issues to ensure the functionality and maintainability of the code. Once these are resolved, the pull request should be ready for approval. Keep up the great work! 🚀
✨ 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.
src/index.html
Outdated
| <link | ||
| rel="stylesheet" | ||
| href="styles/reset.scss" |
There was a problem hiding this comment.
The link tag is referencing a SCSS file (styles/reset.scss). Ensure that this SCSS file is compiled to CSS before being linked in the HTML, as browsers do not understand SCSS directly.
| </button> | ||
| </div> | ||
|
|
||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="imac image" | ||
| /> | ||
|
|
||
| <p class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </p> | ||
| <p class="card__product-code">Product code: 195434</p> | ||
| <div class="card__stars"> | ||
| <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__name-price">Price:</p> | ||
| <p class="card__num-price">$2,199</p> | ||
| </div> | ||
| <button | ||
| class="card__button" | ||
| type="button" | ||
| > | ||
| Buy | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="imac image" | ||
| /> | ||
|
|
||
| <p class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </p> | ||
| <p class="card__product-code">Product code: 195434</p> | ||
| <div class="card__stars"> | ||
| <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__name-price">Price:</p> | ||
| <p class="card__num-price">$2,199</p> | ||
| </div> | ||
| <button | ||
| class="card__button" | ||
| type="button" | ||
| > | ||
| Buy | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="imac image" | ||
| /> | ||
|
|
||
| <p class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </p> | ||
| <p class="card__product-code">Product code: 195434</p> | ||
| <div class="card__stars"> | ||
| <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__name-price">Price:</p> | ||
| <p class="card__num-price">$2,199</p> | ||
| </div> | ||
| <button | ||
| class="card__button" | ||
| type="button" | ||
| > | ||
| Buy | ||
| </button> |
There was a problem hiding this comment.
The product card content is repeated multiple times with the same data. Consider using a template engine or JavaScript to dynamically generate these cards to avoid redundancy and improve maintainability.
| font-size: 12px; | ||
| line-height: 18px; | ||
| margin-bottom: 4px; | ||
| color: $card-dark-text; |
There was a problem hiding this comment.
The variable $card-dark-text is used for the color property, but it's not defined in this file. Ensure that this variable is defined in a file that is imported into this SCSS file, or define it here to avoid compilation errors.
| font-weight: 400; | ||
| font-size: 10px; | ||
| line-height: 14px; | ||
| color: $card-grey-text; |
There was a problem hiding this comment.
The variable $card-grey-text is used for the color property, but it's not defined in this file. Make sure this variable is defined in a file that is imported into this SCSS file, or define it here to prevent compilation errors.
| font-weight: 700; | ||
| font-size: 14px; | ||
| line-height: 16px; | ||
| background-color: $header-blue-color; |
There was a problem hiding this comment.
The variable $header-blue-color is used for the background-color property, but it's not defined in this file. Ensure that this variable is defined in a file that is imported into this SCSS file, or define it here to avoid compilation errors.
| display: flex; | ||
| /* stylelint-disable-next-line font-family-name-quotes */ | ||
| font-family: 'Roboto', sans-serif; | ||
| color: $card-dark-text; |
There was a problem hiding this comment.
The variable $card-dark-text is used for the color property, but it's not defined in this file. Make sure this variable is defined in a file that is imported into this SCSS file, or define it here to prevent compilation errors.
| align-items: center; | ||
|
|
||
| &:hover { | ||
| color: $header-blue-color; |
There was a problem hiding this comment.
The variable $header-blue-color is used for the color property in the hover state, but it's not defined in this file. Ensure that this variable is defined in a file that is imported into this SCSS file, or define it here to avoid compilation errors.
| } | ||
|
|
||
| .is-active { | ||
| color: $header-blue-color; |
There was a problem hiding this comment.
The variable $header-blue-color is used for the color property, but it's not defined in this file. Make sure this variable is defined in a file that is imported into this SCSS file, or define it here to prevent compilation errors.
| width: 100%; | ||
| height: 4px; | ||
| border-radius: 8px; | ||
| background-color: $header-blue-color; |
There was a problem hiding this comment.
The variable $header-blue-color is used for the background-color property, but it's not defined in this file. Ensure that this variable is defined in a file that is imported into this SCSS file, or define it here to avoid compilation errors.
| body { | ||
| margin: 0; | ||
| } | ||
| @import './untils/variables'; |
There was a problem hiding this comment.
Ensure that the path './untils/variables' is correct. It seems like there might be a typo in the directory name 'untils', which should likely be 'utils'. Verify the directory structure to prevent import errors.
There was a problem hiding this comment.
Thank you for your submission! 🎉 While there are some issues that need attention, such as the incorrect import path ('./untils/variables' should be './utils/variables') and the repeated HTML content, your effort is commendable. The SCSS variables need to be correctly imported to avoid undefined errors, and consider using a template engine or JavaScript to handle repetitive HTML content. These improvements will enhance the functionality and maintainability of your code. Keep up the good work, and make sure to address these points to further your learning journey! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <link | ||
| rel="stylesheet" | ||
| href="styles/reset.css" |
There was a problem hiding this comment.
The HTML file is linking to an SCSS file (styles/index.scss). Browsers cannot interpret SCSS, so make sure to compile your SCSS files to CSS before linking them in your HTML.
| </button> | ||
| </div> | ||
|
|
||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="imac image" | ||
| /> | ||
|
|
||
| <p class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </p> | ||
| <p class="card__product-code">Product code: 195434</p> | ||
| <div class="card__stars"> | ||
| <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__name-price">Price:</p> | ||
| <p class="card__num-price">$2,199</p> | ||
| </div> | ||
| <button | ||
| class="card__button" | ||
| type="button" | ||
| > | ||
| Buy | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="imac image" | ||
| /> | ||
|
|
||
| <p class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </p> | ||
| <p class="card__product-code">Product code: 195434</p> | ||
| <div class="card__stars"> | ||
| <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__name-price">Price:</p> | ||
| <p class="card__num-price">$2,199</p> | ||
| </div> | ||
| <button | ||
| class="card__button" | ||
| type="button" | ||
| > | ||
| Buy | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="card"> | ||
| <img | ||
| class="card__img" | ||
| src="./images/imac.jpeg" | ||
| alt="imac image" | ||
| /> | ||
|
|
||
| <p class="card__title"> | ||
| APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) | ||
| </p> | ||
| <p class="card__product-code">Product code: 195434</p> | ||
| <div class="card__stars"> | ||
| <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__name-price">Price:</p> | ||
| <p class="card__num-price">$2,199</p> | ||
| </div> | ||
| <button | ||
| class="card__button" | ||
| type="button" | ||
| > | ||
| Buy | ||
| </button> |
There was a problem hiding this comment.
The product card content is repeated multiple times with the same data. Consider using a template engine or JavaScript to dynamically generate these cards to reduce redundancy and improve maintainability.
| font-size: 12px; | ||
| line-height: 18px; | ||
| margin-bottom: 4px; | ||
| color: $card-dark-text; |
There was a problem hiding this comment.
The variable $card-dark-text is used here but not defined in this file. Ensure it is imported from variables.scss where it is defined.
| font-weight: 400; | ||
| font-size: 10px; | ||
| line-height: 14px; | ||
| color: $card-grey-text; |
There was a problem hiding this comment.
The variable $card-grey-text is used here but not defined in this file. Ensure it is imported from variables.scss where it is defined.
|
|
||
| &__name-price { | ||
| font-size: 12px; | ||
| color: $card-grey-text; |
There was a problem hiding this comment.
The variable $card-grey-text is used here but not defined in this file. Ensure it is imported from variables.scss where it is defined.
| display: flex; | ||
| /* stylelint-disable-next-line font-family-name-quotes */ | ||
| font-family: 'Roboto', sans-serif; | ||
| color: $card-dark-text; |
There was a problem hiding this comment.
The variable $card-dark-text is used here but not defined in this file. Ensure it is imported from variables.scss where it is defined.
| align-items: center; | ||
|
|
||
| &:hover { | ||
| color: $header-blue-color; |
There was a problem hiding this comment.
The variable $header-blue-color is used here but not defined in this file. Ensure it is imported from variables.scss where it is defined.
| } | ||
|
|
||
| .is-active { | ||
| color: $header-blue-color; |
There was a problem hiding this comment.
The variable $header-blue-color is used here but not defined in this file. Ensure it is imported from variables.scss where it is defined.
| width: 100%; | ||
| height: 4px; | ||
| border-radius: 8px; | ||
| background-color: $header-blue-color; |
There was a problem hiding this comment.
The variable $header-blue-color is used here but not defined in this file. Ensure it is imported from variables.scss where it is defined.
| body { | ||
| margin: 0; | ||
| } | ||
| @import './untils/variables'; |
There was a problem hiding this comment.
There is a typo in the import path './untils/variables'. It should likely be './utils/variables'. Please verify and correct the directory name to prevent import errors.
