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

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

add task solution #4865

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f16021c
add task solution
taniavozniuk Sep 26, 2024
e33c23b
finalization
taniavozniuk Sep 26, 2024
fe50cdf
solution
taniavozniuk Sep 26, 2024
c5c3037
add solution
taniavozniuk Sep 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ Follow

❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:

- [DEMO LINK](https://<your_account>.github.io/layout_stars/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_stars/report/html_report/)
- [DEMO LINK](https://taniavozniuk.github.io/layout_stars/)
- [TEST REPORT LINK](https://taniavozniuk.github.io/layout_stars/report/html_report/)

❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.

Expand Down
45 changes: 44 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,49 @@
/>
</head>
<body>
<h1>Stars</h1>
<div class="stars-container">
<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>
Comment on lines +17 to +22
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. For example, if these stars represent a rating, consider wrapping each group in a figure tag with a figcaption describing the rating.

</div>
Comment on lines +16 to +23
Copy link

Choose a reason for hiding this comment

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

Add an empty line between sibling blocks of HTML to improve readability. For example, add an empty line after line 23.

<div class="stars stars--1">
<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>
Comment on lines +24 to +29
Copy link

Choose a reason for hiding this comment

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

Add an empty line between sibling blocks of HTML to improve readability. For example, add an empty line after line 29.

</div>
<div class="stars stars--2">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
Comment on lines +30 to +35
Copy link

Choose a reason for hiding this comment

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

Add an empty line between sibling blocks of HTML to improve readability. For example, add an empty line after line 35.

<div class="stars__star"></div>
</div>
<div class="stars stars--3">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
Comment on lines +36 to +41
Copy link

Choose a reason for hiding this comment

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

Add an empty line between sibling blocks of HTML to improve readability. For example, add an empty line after line 41.

<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<div class="stars stars--4">
<div class="stars__star"></div>
<div class="stars__star"></div>
Comment on lines +42 to +47
Copy link

Choose a reason for hiding this comment

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

Add an empty line between sibling blocks of HTML to improve readability. For example, add an empty line after line 47.

<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<div class="stars stars--5">
<div class="stars__star"></div>
Comment on lines +48 to +53
Copy link

Choose a reason for hiding this comment

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

Add an empty line between sibling blocks of HTML to improve readability. For example, add an empty line after line 53.

<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
Comment on lines +16 to +58
Copy link

Choose a reason for hiding this comment

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

Add empty lines between multiline sibling blocks of HTML to improve readability.

</div>
</body>
</html>
31 changes: 30 additions & 1 deletion src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,30 @@
/* add styles here */
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}

Comment on lines +1 to +5
Copy link

Choose a reason for hiding this comment

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

The box-sizing: border-box; should be applied globally to all elements for consistency. Move it to a universal selector * at the top of your stylesheet.

Comment on lines +1 to +5
Copy link

Choose a reason for hiding this comment

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

The body selector is a tag name selector, which is discouraged by the checklist. However, for the body tag, it is commonly accepted to use the tag itself for styling since it's the document's body element. Just ensure that this is the only tag selector used besides html.

.stars {
display: flex;
}

.stars__star {
width: 16px;
height: 16px;
background-image: url(./images/star.svg);
background-position: center;
margin-right: 4px;
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.

Consider using a consistent unit for margins. If you're using px for widths and heights, you might want to use px for margins as well for consistency, unless there's a specific reason for using 4px here.

}
Comment on lines +14 to +17
Copy link

Choose a reason for hiding this comment

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

The background-image URL should be extracted into a custom property since it's reused in multiple places. This will make it easier to manage and update the image path if needed.


Comment on lines +11 to +18
Copy link

Choose a reason for hiding this comment

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

Avoid using tag names for styling. It's better to style elements using classes to ensure that the styles are more modular and avoid potential conflicts with other styles.

For example, instead of styling .stars__star, if there are other star elements in your project that should not have these styles, consider using a more specific class name.

.stars--0 .stars__star:nth-child(-n + 0) {
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.

The selector .stars--0 .stars__star:nth-child(-n + 0) will never match any elements because nth-child(-n + 0) selects no elements. You can remove this rule if it's not intended to apply any styles.

}

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