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 #4631

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

add task solution #4631

wants to merge 4 commits into from

Conversation

labelsavchuk
Copy link

VenomMB
VenomMB suggested changes Sep 11, 2024
View reviewed changes
Copy link

@VenomMB VenomMB 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, leave some comments

src/index.html Outdated
Comment on lines 38 to 63
<div class="item__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</div>
<div class="item__code">Product code: 195434</div>
<div class="review">
<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>
<div class="review__count">Reviews: 5</div>
</div>
<div class="item__price">
<div class="item__price-header">Price:</div>
<div class="item__price-value">$2,199</div>
</div>
</div>
<a
href="#1"
class="card__btn"
data-qa="hover"
>
Buy
</a>
Copy link

Choose a reason for hiding this comment

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

add empty line between blocks

src/index.html
<img
src="./images/imac.jpeg"
alt="i-mac"
class="card__photo"
Copy link

Choose a reason for hiding this comment

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

add more informative alt

Copy link

Choose a reason for hiding this comment

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

not fixed.

Copy link

Choose a reason for hiding this comment

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

add more informative alt

Not fixed
image

src/styles/index.scss Outdated
background: $btn-color;

&:hover {
background: #fff;
Copy link

Choose a reason for hiding this comment

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

move to variable

src/styles/index.scss Outdated
Comment on lines 68 to 86
&__price {
display: flex;
justify-content: space-between;
line-height: 18px;
margin-bottom: 16px;
color: $secondary;
}
&__price-value {
font-size: 16px;
font-weight: 700;
text-align: right;
color: #060b35;
}

&__price-header {
font-size: 12px;
text-align: left;
color: #616070;
}
Copy link

Choose a reason for hiding this comment

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

Suggested change
&__price {
display: flex;
justify-content: space-between;
line-height: 18px;
margin-bottom: 16px;
color: $secondary;
}
&__price-value {
font-size: 16px;
font-weight: 700;
text-align: right;
color: #060b35;
}
&__price-header {
font-size: 12px;
text-align: left;
color: #616070;
}
&__price {
display: flex;
justify-content: space-between;
line-height: 18px;
margin-bottom: 16px;
color: $secondary;
&-value {
font-size: 16px;
font-weight: 700;
text-align: right;
color: #060b35;
}
&-header {
font-size: 12px;
text-align: left;
color: #616070;
}
}

VolodymyrKirichenko
VolodymyrKirichenko suggested changes Oct 14, 2024
View reviewed changes
Copy link

@VolodymyrKirichenko VolodymyrKirichenko left a comment

Choose a reason for hiding this comment

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

Looks good, but let's improve it a bit! 🥹

src/index.html
<img
src="./images/imac.jpeg"
alt="i-mac"
class="card__photo"
Copy link

Choose a reason for hiding this comment

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

not fixed.

src/index.html Outdated
Comment on lines 22 to 25
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
Copy link

@VolodymyrKirichenko VolodymyrKirichenko Oct 14, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

use only the fonts u need. u only use a couple of fonts, but u import them all

src/styles/index.scss Outdated
@@ -1,3 +1,129 @@
$bc-image: url(/src/images/star-active.svg);
Copy link

Choose a reason for hiding this comment

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

do u need this variable?But why?u used it only once

src/styles/index.scss Outdated
Comment on lines 16 to 19
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 10px;
line-height: 14px;
Copy link

Choose a reason for hiding this comment

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

do u need it?
I see that u set the fonts globally on the body tag

Suggested change
font-family: Roboto, sans-serif;
font-weight: 400;
font-size: 10px;
line-height: 14px;

src/styles/index.scss Outdated

box-sizing: border-box;
width: 200px;
border: 1px solid #f3f3f3;
Copy link

Choose a reason for hiding this comment

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

use variables for all colors

src/styles/index.scss Outdated
Comment on lines 102 to 107
background-image: url(/src/images/star.svg);
background-position: center;
height: 16px;
margin-right: 4px;
width: 16px;
background-repeat: no-repeat;
Copy link

Choose a reason for hiding this comment

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

Suggested change
background-image: url(/src/images/star.svg);
background-position: center;
height: 16px;
margin-right: 4px;
width: 16px;
background-repeat: no-repeat;
background: ............;
height: 16px;
margin-right: 4px;
width: 16px;

u can use just background for it

BudnikOleksii
BudnikOleksii suggested changes Oct 14, 2024
View reviewed changes
Copy link

@BudnikOleksii BudnikOleksii left a comment

Choose a reason for hiding this comment

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

Good work 👍
But don't forget about the checklist

src/index.html
<img
src="./images/imac.jpeg"
alt="i-mac"
class="card__photo"
Copy link

Choose a reason for hiding this comment

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

add more informative alt

Not fixed
image

src/index.html Outdated
Comment on lines 39 to 58
<div class="item__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</div>

<div class="item__code">Product code: 195434</div>

<div class="review">
<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>
<div class="review__count">Reviews: 5</div>
</div>

<div class="item__price">
<div class="item__price-header">Price:</div>
<div class="item__price-value">$2,199</div>
Copy link

Choose a reason for hiding this comment

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

Use semantic tags where possible instead of only divs

src/styles/index.scss Outdated
line-height: 14px;
}

.card {
Copy link

Choose a reason for hiding this comment

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

Create a separate file per each styles block
image

src/styles/index.scss Outdated
}
}

.item {
Copy link

Choose a reason for hiding this comment

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

What item is it?
Names should be descriptive

src/styles/index.scss Outdated
Comment on lines 105 to 106

&.stars--4 :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.

It should be the same functionality as in the stars task, if modifier is --3 you should show 3 active stars as well

src/styles/index.scss Outdated
}
}

.review {
Copy link

Choose a reason for hiding this comment

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

there 2 BEM blocks card and stars each in it own file
image

BudnikOleksii
BudnikOleksii approved these changes Oct 15, 2024
View reviewed changes
Copy link

@BudnikOleksii BudnikOleksii left a comment

Choose a reason for hiding this comment

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

Looks good 👍

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

@BudnikOleksii BudnikOleksii BudnikOleksii approved these changes

@VenomMB VenomMB Awaiting requested review from VenomMB

@VolodymyrKirichenko VolodymyrKirichenko Awaiting requested review from VolodymyrKirichenko

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
@labelsavchuk @BudnikOleksii @VenomMB @VolodymyrKirichenko