add task solution #5004
add task solution #5004
Conversation
azhadko98
commented
Oct 30, 2024
azhadko98
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Your implementation is almost there, but there are a few critical issues that need addressing to meet the task requirements. 🚀 The main points to focus on are: ensuring each BEM block has its own file, avoiding the use of the * selector for better performance, and adhering to the specified class naming conventions. Once these are resolved, your code will be in great shape! Keep up the good work and don't hesitate to reach out if you need further guidance. 😊
✨ 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
| @@ -13,6 +13,49 @@ | |||
| /> | |||
| </head> | |||
| <body> | |||
| <h1>Stars</h1> | |||
| <div class="stars-container"> | |||
There was a problem hiding this comment.
| <div class="stars-container"> |
src/index.html
Outdated
| @@ -13,6 +13,49 @@ | |||
| /> | |||
| </head> | |||
| <body> | |||
| <h1>Stars</h1> | |||
| <div class="stars-container"> | |||
| <div class="stars-block stars--0"> | |||
There was a problem hiding this comment.
| <div class="stars-block stars--0"> | |
| <div class="stars stars--0"> |
src/index.html
Outdated
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars-block stars--1"> | ||
| <div class="stars__star stars__star--active"></div> |
There was a problem hiding this comment.
| <div class="stars__star stars__star--active"></div> | |
| <div class="stars__star"></div> |
src/style.css
Outdated
| .stars-container { | ||
| display: flex; | ||
| flex-direction: column; | ||
| } |
There was a problem hiding this comment.
| .stars-container { | |
| display: flex; | |
| flex-direction: column; | |
| } |
src/style.css
Outdated
| .stars-block { | ||
| display: flex; | ||
| margin-bottom: 4px; | ||
| } |
There was a problem hiding this comment.
| .stars-block { | |
| display: flex; | |
| margin-bottom: 4px; | |
| } | |
| .stars-block { | |
| display: flex; | |
| } |
src/style.css
Outdated
| .stars__star { | ||
| width: 16px; | ||
| height: 16px; | ||
| border-radius: 0.5px; |
There was a problem hiding this comment.
| border-radius: 0.5px; |
src/style.css
Outdated
| height: 16px; | ||
| border-radius: 0.5px; | ||
| background-image: url('../src/images/star.svg'); | ||
| background-size: contain; |
There was a problem hiding this comment.
| background-size: contain; | |
| background-position: center; |
src/style.css
Outdated
| .stars__star--active { | ||
| background-image: url('../src/images/star-active.svg'); | ||
| } |
There was a problem hiding this comment.
| .stars__star--active { | |
| background-image: url('../src/images/star-active.svg'); | |
| } | |
| .stars--1 .stars__star:nth-child(-n + 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'); | |
| } |
src/style.css
Outdated
| @@ -1 +1,27 @@ | |||
| /* add styles here */ | |||
There was a problem hiding this comment.
| /* add styles here */ |
src/style.css
Outdated
| .stars__star { | ||
| width: 16px; | ||
| height: 16px; | ||
| background-image: url('../src/images/star.svg'); |
There was a problem hiding this comment.
| background-image: url('../src/images/star.svg'); | |
| background-image: url('./images/star.svg'); |
src/style.css
Outdated
| .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(../src/images/star-active.svg); |
There was a problem hiding this comment.
| background-image: url(../src/images/star-active.svg); | |
| background-image: url('./images/star-active.svg'); |
