fix task solution

mate-academy · Aug 20, 2023 · 03b8da4 · 03b8da4
1 parent 8a5e09e
commit 03b8da4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 28 deletions.
diff --git a/src/index.html b/src/index.html
@@ -1,4 +1,3 @@
-<!-- #region head -->
 <!doctype html>
 <html lang="en">
   <head>
@@ -8,49 +7,48 @@
     <title>Stars</title>
     <link rel="stylesheet" href="./style.css">
   </head>
-  <!-- #endregion -->
   <body>
-    <div class="stars">
+    <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">
-      <div class="stars__star stars--1"></div>
+    <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>
     </div>
-    <div class="stars">
-      <div class="stars__star stars--2"></div>
-      <div class="stars__star stars--2"></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>
       <div class="stars__star"></div>
     </div>
-    <div class="stars">
-      <div class="stars__star stars--3"></div>
-      <div class="stars__star stars--3"></div>
-      <div class="stars__star stars--3"></div>
+    <div class="stars stars--3">
+      <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">
-      <div class="stars__star stars--4"></div>
-      <div class="stars__star stars--4"></div>
-      <div class="stars__star stars--4"></div>
-      <div class="stars__star stars--4"></div>
+    <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="stars">
-      <div class="stars__star stars--5"></div>
-      <div class="stars__star stars--5"></div>
-      <div class="stars__star stars--5"></div>
-      <div class="stars__star stars--5"></div>
-      <div class="stars__star stars--5"></div>
+    <div class="stars stars--5">
+      <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>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -22,10 +22,22 @@ body {
   margin-right: 4px;
 }
 
-.stars--1,
-.stars--2,
-.stars--3,
-.stars--4,
-.stars--5 {
+.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);
 }