fix - otimizando codigo

Author: wesleyanjoszero

Lista/css/style.css

@@ -9,35 +9,14 @@ body {
     background-color: #f2f2f2;
 }
 
-.title {
-    text-transform: uppercase;
-    text-shadow: 2px 2px 2px #0002;
-}
-
-.title a {
-    color: #d07335;
-}
-
 .content-center {
     width: 100%;
     max-width: 300px;
     margin: auto;
     padding: 25px;
     background-color: #fff;
     border-radius: 15px;
-    box-shadow: 6px 6px 6px #0004;
-}
-
-.content-center .text-center {
-    text-align: center;
-}
-
-.content-center img {
-    width: 70%;
-}
-
-.content-center form {
-    margin: 20px;
+    box-shadow: 5px 5px 5px #0004;
 }
 
 .content-center input,
@@ -57,12 +36,6 @@ body {
     border-bottom-color: #d07335;
 }
 
-.content-center button {
-    background-color: #d07335;
-    color: #fff;
-    border-radius: 5px;
-}
-
 .content-center button:hover {
     background-color: #b55b28;
     cursor: pointer;
@@ -72,68 +45,6 @@ body {
     background-color: #c14e0e;
 }
 
-header a {
-    color: #666;
-    text-decoration: none;
-}
-
-header a:visited {
-    color: #000;
-}
-
-header a:hover {
-    text-decoration: underline;
-}
-
-header h1 {
-    font-size: 2.5em;
-    text-align: center;
-    margin: 50px auto;
-}
-
-footer {
-    font-size: 0.8em;
-    text-align: center;
-    margin: 20px auto;
-}
-
-
-.content-tab {
-    width: 100%;
-    text-align: center;
-    max-width: 500px;
-    background-color: #fff;
-    margin: auto;
-    padding: 20px;
-    border-radius: 15px;
-    box-shadow: 5px 5px 5px #0004;
-}
-
-.content-tab table {
-    width: 100%;
-    border-collapse: collapse;
-}
-
-.content-tab td {
-    padding: .75em;
-    border-top: 1px solid #dee2e6;
-}
-
-.content-tab tbody tr:nth-child(odd) {
-    background-color: rgba(0, 0, 0, .05);
-}
-
-.content-tab tbody tr:hover {
-    background-color: rgba(0, 0, 0, .15);
-    cursor: pointer;
-}
-
-#valueA {
-    width: 100%;
-    padding: 10px;
-}
-
-
 .todo {
     list-style: none;
     padding: 0;
@@ -167,7 +78,3 @@ footer {
     width: 100%;
     padding: 10px;
 }
-
-.up {
-    text-transform: uppercase;
-}

Lista/js/script.js

@@ -1,7 +1,9 @@
 let data = []
 
-function renderTodo() {
+function renderTodo() 
+{
     document.querySelector('.todo').innerHTML = ''
+    
     data.forEach(task => {
         let li = document.createElement('li')
         li.innerHTML = 
@@ -10,28 +12,25 @@ function renderTodo() {
         <label for="task-${task.id}">${task.title}</label>
         <button type="button">X</button>
         `
+    
         li.querySelector('input').addEventListener('change', e => {
-            
             if (e.target.checked) {
                 li.classList.add('complete')
             } else {
                 li.classList.remove('complete')
             }
-    
         })
+    
         li.querySelector('button').addEventListener('click', e => {
-            let btn = e.target
-            let li = btn.parentNode
-            let input = li.querySelector('input')
-            let id = input.id
-            let idArray = id.split('-')
-            let todoId = idArray[1]
+            let btn = e.target.parentNode.querySelector('input').id.split('-')[1]
             let title = li.querySelector('label').innerText
+
             if (confirm(`Deseja realmente excluir a tarefa ${title} ?`)) {
-                data = data.filter(task => task.id !== parseInt(todoId))
+                data = data.filter(task => task.id !== parseInt(btn))
                 renderTodo()
             }
         })
+
         document.querySelector('.todo').append(li)
     })
 }
@@ -42,6 +41,7 @@ document.querySelector('#new-task').addEventListener('keyup', e => {
             id: data.length + 1,
             title: e.target.value
         })
+
         e.target.value = ''
         renderTodo()
     }