Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add task solution #5275

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

add task solution #5275

wants to merge 4 commits into from

Conversation

Alya-ya
Copy link

@Alya-ya Alya-ya commented Feb 4, 2025

  • DEMO LINK

  • TEST REPORT LINK

  • there 2 BEM blocks card and stars each in their own file

  • SCSS Nesting is used for elements, modifiers and pseudo-classes

  • SCSS Variables are used for main values and placed in a separate file

  • all stars--N modifiers work as expected (Highlight first N stars)

  • Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor
mateacademy-ai-mentor approved these changes Feb 4, 2025
View reviewed changes
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job on the implementation! 🎉 Your code meets the task requirements, and the structure is well-organized. While there are a few minor improvements suggested, such as placing SCSS variables in a separate file and ensuring the card block is explicitly defined, these do not significantly impact the functionality. Keep up the good work, and consider these suggestions for future enhancements! 😊

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

volodymyr-soltys97
volodymyr-soltys97 suggested changes Feb 4, 2025
View reviewed changes
Copy link

@volodymyr-soltys97 volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job
Let's improve your code
This part of the task is incomplete
image

src/index.html Outdated
Comment on lines 33 to 35
<h1 class="product-card__content">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This tag used for title of the full page, so will be better if you use another tag here

Suggested change
<h1 class="product-card__content">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
<h3 class="product-card__content">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>

src/index.html Outdated
Comment on lines 40 to 45
<ul class="stars__product-rating">
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the modifier class

Suggested change
<ul class="stars__product-rating">
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<ul class="stars stars--4">
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>
<li class="stars__star"></li>

src/styles/blocks/body.scss Outdated
Comment on lines 1 to 4
$primary-color: #00acdc;
$secondary-color: #fff;
$color-text: #616070;
$primary-color-text: #060b35;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Move variables to the separate file, for example variables.scss

src/styles/blocks/product-card.scss Outdated
Comment on lines 74 to 79
text-align: center;
text-decoration: none;
}

&__buy:hover {
display: flex;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use scss nesting, fix it everywhere

anastasiiavorobiova
anastasiiavorobiova suggested changes Feb 4, 2025
View reviewed changes
Copy link

@anastasiiavorobiova anastasiiavorobiova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work! Almost done!

src/styles/blocks/product-card.scss Outdated
.product-card {
width: 200px;
box-sizing: border-box;
height: 406px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
height: 406px;

The height should depend on the content

src/styles/blocks/product-card.scss Outdated
Comment on lines 5 to 6
top: 1px;
left: 1px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
top: 1px;
left: 1px;

src/styles/blocks/product-card.scss Outdated
Comment on lines 34 to 35
width: 98px;
height: 14px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
width: 98px;
height: 14px;

src/styles/blocks/product-card.scss Outdated
width: 98px;
height: 14px;
margin-top: 4px;
left: 17px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
left: 17px;

src/styles/blocks/product-card.scss Outdated
display: flex;
align-items: center;
justify-content: center;
width: 166px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
width: 166px;
width: 100%;

src/styles/blocks/stars.scss Outdated
margin-right: 4px;
}

&--4 &__star:nth-child(-n + 4) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using all classes from the previous task

volodymyr-soltys97
volodymyr-soltys97 approved these changes Feb 4, 2025
View reviewed changes
Copy link

@volodymyr-soltys97 volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good job 👍

src/styles/blocks/stars.scss
Comment on lines +33 to +37
&--4 &__star:nth-child(-n + 4),
&--1 &__star:nth-child(-n + 1),
&--2 &__star:nth-child(-n + 2),
&--3 &__star:nth-child(-n + 3),
&--5 &__star:nth-child(-n + 5) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
&--4 &__star:nth-child(-n + 4),
&--1 &__star:nth-child(-n + 1),
&--2 &__star:nth-child(-n + 2),
&--3 &__star:nth-child(-n + 3),
&--5 &__star:nth-child(-n + 5) {
&--1 &__star:nth-child(-n + 1),
&--2 &__star:nth-child(-n + 2),
&--3 &__star:nth-child(-n + 3),
&--4 &__star:nth-child(-n + 4),
&--5 &__star:nth-child(-n + 5) {

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mateacademy-ai-mentor mateacademy-ai-mentor mateacademy-ai-mentor approved these changes

@volodymyr-soltys97 volodymyr-soltys97 volodymyr-soltys97 approved these changes

@anastasiiavorobiova anastasiiavorobiova Awaiting requested review from anastasiiavorobiova

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@Alya-ya @volodymyr-soltys97 @anastasiiavorobiova @mateacademy-ai-mentor