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 stars #5292

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

add stars #5292

wants to merge 2 commits into from

Conversation

MishaLehotskyi
Copy link

volodymyr-soltys97
volodymyr-soltys97 suggested changes Jan 23, 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
Remove the margin right for the last stars
image

src/index.html Outdated
@@ -13,6 +13,49 @@
/>
</head>
<body>
<h1>Stars</h1>
<header class="conteiner">
Copy link

Choose a reason for hiding this comment

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

Redundant wrapper

Suggested change
<header class="conteiner">

src/index.html Outdated
Comment on lines 23 to 24
</div>
<div class="stars stars--1">
Copy link

Choose a reason for hiding this comment

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

Add the blank line between the blocks

Suggested change
</div>
<div class="stars stars--1">
</div>
<div class="stars stars--1">

src/style.css Outdated
Comment on lines 6 to 9
.conteiner {
display: flex;
flex-direction: column;
}
Copy link

Choose a reason for hiding this comment

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

Suggested change
.conteiner {
display: flex;
flex-direction: column;
}
.stars {
display: flex;
}

src/style.css Outdated
Comment on lines 11 to 21
.stars__star {
background-position: center;
border-radius: 0.5px;
display: flex;
margin-right: 4px;
background-repeat: no-repeat;
height: 16px;
line-height: 0;
width: 16px;
background-image: url(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.

Suggested change
.stars__star {
background-position: center;
border-radius: 0.5px;
display: flex;
margin-right: 4px;
background-repeat: no-repeat;
height: 16px;
line-height: 0;
width: 16px;
background-image: url(images/star-active.svg);
}
.stars__star {
background-position: center;
margin-right: 4px;
background-repeat: no-repeat;
height: 16px;
width: 16px;
background-image: url(images/star-active.svg);
}

src/style.css Outdated
Comment on lines 30 to 58
.stars--0 .stars__star:nth-child(1),
.stars--0 .stars__star:nth-child(2),
.stars--0 .stars__star:nth-child(3),
.stars--0 .stars__star:nth-child(4),
.stars--0 .stars__star:nth-child(5) {
background-image: url(images/star.svg);
}

.stars--1 .stars__star:nth-child(2),
.stars--1 .stars__star:nth-child(3),
.stars--1 .stars__star:nth-child(4),
.stars--1 .stars__star:nth-child(5) {
background-image: url(images/star.svg);
}

.stars--2 .stars__star:nth-child(3),
.stars--2 .stars__star:nth-child(4),
.stars--2 .stars__star:nth-child(5) {
background-image: url(images/star.svg);
}

.stars--3 .stars__star:nth-child(4),
.stars--3 .stars__star:nth-child(5) {
background-image: url(images/star.svg);
}

.stars--4 .stars__star:nth-child(5) {
background-image: url(images/star.svg);
}
Copy link

Choose a reason for hiding this comment

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

Suggested change
.stars--0 .stars__star:nth-child(1),
.stars--0 .stars__star:nth-child(2),
.stars--0 .stars__star:nth-child(3),
.stars--0 .stars__star:nth-child(4),
.stars--0 .stars__star:nth-child(5) {
background-image: url(images/star.svg);
}
.stars--1 .stars__star:nth-child(2),
.stars--1 .stars__star:nth-child(3),
.stars--1 .stars__star:nth-child(4),
.stars--1 .stars__star:nth-child(5) {
background-image: url(images/star.svg);
}
.stars--2 .stars__star:nth-child(3),
.stars--2 .stars__star:nth-child(4),
.stars--2 .stars__star:nth-child(5) {
background-image: url(images/star.svg);
}
.stars--3 .stars__star:nth-child(4),
.stars--3 .stars__star:nth-child(5) {
background-image: url(images/star.svg);
}
.stars--4 .stars__star:nth-child(5) {
background-image: url(images/star.svg);
}
.stars--1 .star:nth-child(1),
.stars--2 .star:nth-child(-n + 2),
.stars--3 .star:nth-child(-n + 3),
.stars--4 .star:nth-child(-n + 4),
.stars--5 .star:nth-child(-n + 5) {
background-image: url('images/star-active.svg');
}

volodymyr-soltys97
volodymyr-soltys97 approved these changes Jan 26, 2025
View reviewed changes
src/index.html
@@ -13,6 +13,68 @@
/>
</head>
<body>
<h1>Stars</h1>
<header>
Copy link

Choose a reason for hiding this comment

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

Redundant

Suggested change
<header>

src/index.html
Comment on lines +18 to +26
<div class="stars stars--0">

<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>
Copy link

Choose a reason for hiding this comment

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

Suggested change
<div class="stars stars--0">
<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="stars stars--0">
<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>

src/style.css
}

.stars {
position: relative;
Copy link

Choose a reason for hiding this comment

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

Redundant

Suggested change
position: relative;

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

@volodymyr-soltys97 volodymyr-soltys97 Awaiting requested review from volodymyr-soltys97

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

Successfully merging this pull request may close these issues.
3 participants
@MishaLehotskyi @volodymyr-soltys97 @Khval14