to do logic

Author: zhuk1707

blocks/to-do-list.css

@@ -42,7 +42,6 @@
     display: flex;
     justify-content: space-between;
     gap: 20px;
-    margin-bottom: 20px;
   }
 
   &__input {
@@ -61,21 +60,31 @@
     }
   }
 
-  &__list:not(:last-child) {
-    margin-bottom: 10px;
-  }
-
   &__item {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     background-color: rgba(175, 175, 175, 0.1);
     padding: 10px 20px;
     border-radius: 15px;
+
+    &:first-child {
+      margin-top: 20px;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 10px;
+    }
+
+    &.completed .to-do__text {
+      text-decoration: line-through;
+      color: #b6b6b6;
+    }
   }
 
   &__text {
     margin-right: 5px;
+    padding-top: 3px;
   }
 
   /**/
@@ -87,7 +96,7 @@
 
   /**/
   &__button {
-    &_accept {
+    &_complete {
       @include icon-button;
       &:hover {
         color: #29ff29;
@@ -98,8 +107,8 @@
     &_edit {
       @include icon-button;
       &:hover {
-        color: #80acff;
-        background-color: rgba(128, 172, 255, 0.2);
+        color: #2474ff;
+        background-color: rgba(36, 116, 255, 0.2);
       }
     }
 

blocks/to-do-list.css.map

@@ -15,41 +15,13 @@ <h1 class="main__title">To Do List</h1>
             <div class="main__to-do to-do">
                 <form class="to-do__form">
                     <input type="text" class="to-do__input"
-                           placeholder="Write here...">
+                           placeholder="Write here..." name="activity"
+                           id="activity" required>
                     <button class="to-do__submit-button" type="submit">Add
                     </button>
                 </form>
                 <div class="to-do__list">
-                    <div class="to-do__item">
-                        <div class="to-do__text">text</div>
-                        <div class="to-do__buttons">
-                            <button type="button" class="to-do__button_accept">
-                                <i class="fa-solid fa-check"></i>
-                            </button>
-                            <button type="button" class="to-do__button_edit">
-                                <i class="fa-regular fa-pen-to-square"></i>
-                            </button>
-                            <button type="button" class="to-do__button_delete">
-                                <i class="fa-regular fa-trash-can"></i>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-                <div class="to-do__list">
-                    <div class="to-do__item">
-                        <div class="to-do__text">text</div>
-                        <div class="to-do__buttons">
-                            <button type="button" class="to-do__button_accept">
-                                <i class="fa-solid fa-check"></i>
-                            </button>
-                            <button type="button" class="to-do__button_edit">
-                                <i class="fa-regular fa-pen-to-square"></i>
-                            </button>
-                            <button type="button" class="to-do__button_delete">
-                                <i class="fa-regular fa-trash-can"></i>
-                            </button>
-                        </div>
-                    </div>
+
                 </div>
             </div>
         </div>

blocks/to-do-list.scss

@@ -0,0 +1,64 @@
+// Create buttons and append it to each list item
+
+function createAndAppendButtons(arr, index = 0) {
+  const buttons = document.createElement('div')
+  buttons.className = 'to-do__buttons'
+
+  const btnComplete = document.createElement('button')
+  btnComplete.className = 'to-do__button_complete'
+  const btnContentCheck = document.createElement('i')
+  btnContentCheck.className = 'fa-solid fa-check'
+  btnComplete.appendChild(btnContentCheck)
+  buttons.appendChild(btnComplete)
+
+  const btnDelete = document.createElement('button')
+  btnDelete.className = 'to-do__button_delete'
+  const btnContentDelete = document.createElement('i')
+  btnContentDelete.className = 'fa-regular fa-trash-can'
+  btnDelete.appendChild(btnContentDelete)
+  buttons.appendChild(btnDelete)
+
+  arr[index].appendChild(buttons)
+}
+
+const nodeList = Array.from(document.querySelectorAll('.to-do__item')) 
+for (let i = 0; i <nodeList.length; i++) {
+  createAndAppendButtons(nodeList, i)
+}
+
+//Add button handlers
+const list = document.querySelector('.to-do__list')
+list.addEventListener('click', function (ev) {
+  if (ev.target.closest('.to-do__button_complete')) {
+    ev.target.parentElement.parentElement.parentElement.classList.toggle('completed')
+  }
+  if (ev.target.closest('.to-do__button_delete')) {
+    console.log(false)
+    const div = ev.target.parentElement.parentElement.parentElement
+    div.remove()
+  }
+}, false)
+
+const form = document.querySelector('.to-do__form')
+
+form.addEventListener('submit', (e) => {
+  e.preventDefault()
+
+  const listItem = document.createElement('div')
+  listItem.className = 'to-do__item'
+
+  const listText = document.createElement('div')
+  listText.className = 'to-do__text'
+
+  const input = document.querySelector('.to-do__input').value
+
+  const text = document.createTextNode(input)
+
+  listItem.appendChild(listText)
+  listText.appendChild(text)
+
+  createAndAppendButtons([listItem])
+  list.appendChild(listItem)
+  document.querySelector('.to-do__input').value = ''
+})
+