Завершить все таски в todo list по нажатию кнопки

const addTask = document.getElementById('add-task');
const inputTask = document.getElementById('task-input');
const allTasks = document.querySelector('.all-tasks');
const delAll = document.getElementById('delete-all-tasks');
const completeAll = document.getElementById('done-all-tasks');


let tasks = [];
let todoTasks = [];


// if (!localStorage.tasks) {
//     tasks = []
// } else {
//     tasks = JSON.parse(localStorage.getItem('tasks'))
// }


function Task(description) {
  this.description = description;
  this.completed = false;
}


function createTask(task, index) {
  return `
        <div class="create-task ${task.completed ? 'checked' : ''}">
             <div class="task">${task.description}</div>
             <div class="action">           
                  <input onclick="completedTask(${index})" class="complete" type="checkbox" 
                        ${task.completed ? 'checked' : ''}>
                  <span onclick="editTask(${index})" class="edit"><i class="fa-solid fa-pen-to-square"></i></span>
                  <span onclick="deletedTask(${index})" class="delete"><i class="fa-solid fa-trash"></i></span>
             </div>
        </div>            
    `
}


function filterTasks() {
  const activeTask = tasks.length && tasks.filter(item => item.completed === false);
  const completedTask = tasks.length && tasks.filter(item => item.completed === true);
  tasks = [...activeTask, ...completedTask];
}


function showTasks() {
  allTasks.innerHTML = "";
  if (tasks.length === 0) {
    delAll.classList.add("hide");
  } else {
    delAll.classList.remove("hide");
  }
  if (tasks.length > 0) {
    filterTasks();
    tasks.forEach((item, index) => {
      allTasks.innerHTML += createTask(item, index);
    });
    todoTasks = document.querySelectorAll('.create-task');

  }
}

showTasks();


// function storage() {
//     localStorage.setItem('tasks', JSON.stringify(tasks));
// }


function completedTask(index) {
  tasks[index].completed = !tasks[index].completed;
  if (tasks[index].completed) {
    todoTasks[index].classList.add('checked')
    setTimeout(() => {
      //alertify.success('Task done!')
    }, 150)
  } else {
    todoTasks[index].classList.remove('checked')
    setTimeout(() => {
      //alertify.warning('Task not done!')
    }, 150)
  }
  // storage();
  showTasks();
}


function deletedTask(index) {
  todoTasks[index].classList.add('deleted')
  setTimeout(() => {
    tasks.splice(index, 1);
    // storage();
    showTasks();
  }, 500)
  setTimeout(() => {
    //alertify.success('Task deleted!')
  }, 700)

}


function editTask(index) {
  let currTask = todoTasks[index];
  if (!currTask.classList.contains('edit')) {
    currTask.classList.add('edit');
    currTask.querySelector('.task').innerHTML = `<input type="txt" value="${tasks[index].description}">`;
  } else {
    let newTask = currTask.querySelector('.task > input').value;
    tasks[index].description = newTask;
    currTask.querySelector('.task').innerText = newTask;
    setTimeout(() => {
      //alertify.success('Task edited!')
    }, 100)
    //   storage();
    showTasks();
  }
}


addTask.addEventListener("click", () => {
  if (inputTask.value === '') {
    //alertify.error('Enter a task!')
  } else {
    setTimeout(() => {
      //alertify.success('Task added!')
    }, 100)
    tasks.push(new Task(inputTask.value));
  }
  // storage();
  showTasks();
  inputTask.value = '';

});


delAll.addEventListener("click", () => {
  setTimeout(() => {
    //alertify.success('All tasks deleted!')
  }, 100)
  tasks = [];
  // storage();
  showTasks();
});

completeAll.addEventListener('click', () => {
  for(let i = 0; i < tasks.length; ++i) {
    if (!tasks[i].completed) {
      tasks[i].completed = true;
      todoTasks[i].classList.add('checked')
    }
  }
  showTasks();
})

body {
  background: #EEEEEE;
}

h1 {
  font-size: 50px;
  text-align: center;
  font-family: cursive;
}

h2 {
  font-size: 25px;
  text-align: center;
  font-family: cursive;
}

.todo {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.add-todo {
  display: flex;
  width: 500px;
  height: 40px;
  align-items: center;
  background-color: #212121;
  border-radius: 20px;
  padding: 10px;
}

.input-task {
  width: 80%;
}

.input-task input {
  width: 425px;
  height: 28px;
  border-radius: 20px;
  font-family: cursive;
  font-size: 15px;
}

input::-webkit-input-placeholder {
  padding-left: 5px;
}

.add-task-button {
  width: 95px;
  display: flex;
  justify-content: flex-end;
  color: aqua;
}

.add-task-button button {
  width: 50px;
  height: 35px;
  font-size: 22px;
  background-color: aqua;
  color: black;
  border-radius: 10px;
  cursor: pointer;
}

.add-task-button button:hover {
  background-color: lightgreen;
}

.create-task {
  display: flex;
  width: 500px;
  height: 50px;
  background-color: lightgreen;
  border-radius: 10px;
  border: 2px solid black;
  margin-bottom: 15px;
  padding: 10px;
  font-family: cursive;
}

.create-task.checked {
  background-color: grey;
  opacity: 0.5;
  text-decoration: line-through;
}

.create-task.deleted {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 0s 1s;
}

.create-task.hide {
  display: none;
}

.task {
  width: 80%;
  display: flex;
  align-items: center;
  color: black;
}

.action {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.action input {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

input[type='checkbox'] {
  margin: 10px;
  border-radius: 50px;
}

input[type='txt'] {
  padding: 10px;
  width: 50%;
  font-size: 15px;
  border-radius: 10px;
  background-color: #E0E0E0;
}

.action span {
  color: hsl(0, 73%, 41%);
  cursor: pointer;
  height: 25px;
  font-size: 25px;
  margin-bottom: 14px;
}

.action span:hover {
  color: darkred;
}

.action span.edit {
  color: #1A237E;
  padding-right: 8px;
}

.action span.edit:hover {
  color: darkcyan;
}

.del-all-tasks-button button {
  background-color: #B71C1C;
  color: black;
  cursor: pointer;
  font-family: cursive;
  height: 30px;
  border-radius: 5px;
  margin: 10px;
}

.del-all-tasks-button button:hover {
  background-color: darkred;
}

.del-all-tasks-button button.hide {
  display: none;
}

.don-all-tasks-button button {
  background-color: #00E676;
  color: black;
  cursor: pointer;
  font-family: cursive;
  height: 30px;
  border-radius: 5px;
  margin-left: 400px;
  margin-top: -400px;
}

.don-all-tasks-button button:hover {
  background-color: #81C784;
}

<!Doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" href="img/icon.png" type="image/x-icon">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/adaptive.css">
  <link rel="stylesheet" href="alertify/css/alertify.min.css" />
  <link rel="stylesheet" href="alertify/css/themes/default.min.css" />
  <link rel="stylesheet" href="alertify/css/themes/adaptive_default.min.css" />
  <script src="https://kit.fontawesome.com/02f0ec4094.js" crossorigin="anonymous"></script>
  <title>ToDo List</title>
</head>

<body>
  <h1>ToDo List</h1>
  <div class="todo">
    <div class="add-todo">
      <div class="input-task">
        <input type="text" id="task-input" placeholder="What needs to be done today?">
      </div>
      <div class="add-task-button">
        <button id="add-task"><i class="fas fa-plus"></i></button>
      </div>
    </div>
    </br>
    <h2>Tasks for the day:</h2>
    <div class="all-tasks"></div>
    <div class="del-all-tasks-button">
      <button id="delete-all-tasks">Clear All</button>
    </div>
    <div class="don-all-tasks-button">
      <button id="done-all-tasks">Complete All</button>
    </div>
  </div>
  <script src="alertify/js/alertify.min.js"></script>
  <script src="js/script.js"></script>
</body>

</html>