add some style to label and to checkbox

Author: simoneas02

apps/localStorage-and-event-delegation/assets/script/index.js

@@ -25,7 +25,7 @@ const createElement = item => `
           <input class="list__item__checkbox" name="item" type="checkbox" ${
             item.done ? 'checked' : ''
           } />
-          <label for="item">${item.text}</label>
+          <label class="list__item__label" for="item">${item.text}</label>
         </li>
       `;
 

apps/localStorage-and-event-delegation/assets/style/index.css

@@ -72,6 +72,11 @@ body {
   display: inline-block;
 }
 
+.list__item__checkbox:checked + .list__item__label {
+  color: #9c1f33;
+  font-weight: 500;
+}
+
 .form {
   margin: 20px 0;
   display: flex;
@@ -90,9 +95,10 @@ body {
 
 .form__submite {
   text-transform: uppercase;
-  background: #f7f7f7;
-  color: #9c9c9c;
+  background: #9c1f33;
+  color: #f7f7f7;
   font-size: 0.8em;
   padding: 10px;
   border-radius: 0 5px 5px 0;
+  border: 0.5px solid rgba(0, 0, 0, 0.2);
 }

apps/localStorage-and-event-delegation/index.html

@@ -68,11 +68,11 @@ <h1 class="content__title">Fancy foods</h1>
         <ul class="list">
           <li class="list__item">
             <input class="list__item__checkbox" name="item" type="checkbox" />
-            <label for="item">Beef Bourguignon</label>
+            <label class="list__item__label" for="item">Beef Bourguignon</label>
           </li>
           <li class="list__item">
             <input class="list__item__checkbox" name="item" type="checkbox" />
-            <label for="item">Salad Nicoise</label>
+            <label class="list__item__label" for="item">Salad Nicoise</label>
           </li>
         </ul>