adding animation

Author: devbyali

app.js

@@ -47,7 +47,11 @@ function deleteTodo(e) {
   //delete
   if (item.classList[0] === "trash-btn") {
     const todo = item.parentElement;
-    todo.remove();
+    //Animation
+    todo.classList.add("fall");
+    todo.addEventListener("transitionend", function () {
+      todo.remove();
+    });
   }
   //check mark
   if (item.classList[0] === "complete-btn") {

style.css

@@ -68,6 +68,7 @@ form button:hover {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  transition: all 0.5s ease;
 }
 
 .todo li {
@@ -96,3 +97,13 @@ form button:hover {
 .fa-check {
   pointer-events: none;
 }
+
+.completed {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+.fall {
+  transform: translateY(8rem) rotateZ(20deg);
+  opacity: 0;
+}