add task solution #3499
add task solution #3499
Conversation
reznik-denis
commented
Aug 19, 2023
reznik-denis
commented
- DEMO LINK
- TEST REPORT LINK
|
Не розумію чому не проходять тести, потрібна допомога, я так зрозумів в завданні хочуть щоб клас модифікатор стояв на блоці один, і в залежності від числа в ньому кількість елементів замінялась на активні зірки, я знаю як це зробити через js але як це зробити лише за допомогою css не можу зрозуміти, перепробував різні варіанти, почитав гугл, подивився уроки і ніде нічого не знайшов, як взяти число із батьківського класу і засунути його в формулу для nth-child не розумію. |
src/index.html
Outdated
| <div class="stars__star"></div> | ||
| </div> | ||
| <div class="stars"> | ||
| <div class="stars__star stars--1"></div> |
There was a problem hiding this comment.
do not add modifier for star's what need to be active, add it for parent element and control the active stars through scss
src/style.css
Outdated
| .stars--1, | ||
| .stars--2, | ||
| .stars--3, | ||
| .stars--4, | ||
| .stars--5 { |
There was a problem hiding this comment.
you should use nth-child pseudo-class here to control active stars
There was a problem hiding this comment.
Зробив, та мені наче попередній варіант був кращий, сподіваюсь що саме цього і хотіли, бо тести пройшли
src/index.html
Outdated
| @@ -1,3 +1,4 @@ | |||
| <!-- #region head --> | |||
src/index.html
Outdated
| @@ -7,7 +8,49 @@ | |||
| <title>Stars</title> | |||
| <link rel="stylesheet" href="./style.css"> | |||
| </head> | |||
| <!-- #endregion --> | |||
answered for this question in comments, please read them |
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| <div class="stars__star"></div> | ||
| </div> |
src/style.css
Outdated
| .stars--1 > .stars__star:nth-child(-n + 1) { | ||
| background-image: url(./images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--2 > .stars__star:nth-child(-n + 2) { | ||
| background-image: url(./images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--3 > .stars__star:nth-child(-n + 3) { | ||
| background-image: url(./images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--4 > .stars__star:nth-child(-n + 4) { | ||
| background-image: url(./images/star-active.svg); | ||
| } | ||
|
|
||
| .stars--5 > .stars__star:nth-child(-n + 5) { | ||
| background-image: url(./images/star-active.svg); | ||
| } |
