Dodajemy zadanie do określonego indeksu za pomocą przycisku i zmodyfikowanej funkcji addTaskAtIndex()

Mamy jeszcze jedną funkcję pochodzącą z naszej konsolowej aplikacji, która nie została zmodyfikowana, by współdziałała z HTMLem - addTaskAtIndex(), dodająca zadanie w określonym miejscu (indeksie). Niemniej jednak jest bardzo przydatna, w związku z czym także ją zaimplementujemy.

Zastanówmy się, uwzględniając wszystko, co dotychczas zrobiliśmy, jak możemy to zrobić?

1. Najpierw zmodyfikujemy funkcję addTaskAtIndex() w podobny sposób, w jaki zmodyfikowaliśmy funkcję addTask(), czyli tak, by zamiast pobierać zadanie jako argument, będzie otwierała okno dialogowe prompt i pobierała treść wprowadzoną przez użytkownika:

// usuń argument newTask z nawiasów,
// ponieważ będzie wprowadzany przez użytkownika:
function addTaskAtIndex(index) {
  // deklarujemy zmienną newTask,
  // która przyjmuje wartość zwracaną przez wbudowaną funkcję prompt():
  const newTask = prompt("Wpisz nowe zadanie:");

  tasks.splice(index, 0, newTask);

  console.log("Do Twoich zadań zostało dodane nowe zadanie:", newTask);

  updateTasksInLocalStorage();

  renderTasks();
}

2. Podczas tworzenia elementu listy zadań, za co jest odpowiedzialna funkcja appendTaskToTheTasksList(), oprócz samego zadania oraz przycisku usunięcia działania, dodamy także przycisk dodaj przed, który będzie służył do dodania zadania przed wybranym zadaniem, czyli innymi słowy dodamy nowe zadanie pod tym samym indeksem, pod którym obecnie znajduje się inne zadanie (czyli to, co już w tej chwili robi funkcja addTaskAtIndex()). Na pierwszy rzut oka może się to wydawać dziwne: przycisk nazwaliśmy dodaj przed, a dodajemy właśnie w tym konkretnym miejscu, niemniej jednak chodzi o podkreślenie faktu dodania nowego zadania nie tyle pod danym indeksem, ile przed zadaniem, które w tej chwili jest pod tym indeksem, ale po chwili przesunie się o jedną pozycję (indeks).
3. Do przycisku dodaj przed przypiszemy wywołanie funkcji addTaskAtIndex() i przekażemy jej indeks jako argument:

function appendTaskToTheTasksList(task, index) {
  //====================> DOTYCHCZASOWY KOD: ============================//
  const li = document.createElement("li");

  li.textContent = task + " ";

  const deleteButton = document.createElement("button");
  deleteButton.textContent = "usuń";

  deleteButton.onclick = function() {
    deleteTask(index);
  }

  li.appendChild(deleteButton);

  //====================> NOWY KOD: ============================//

  // utwórz przycisk dodania zadania pod tym indeksem:
  const addAtIndexButton = document.createElement("button");
  // przypisz do niego nazwę:
  addAtIndexButton.textContent = "dodaj przed";

  // przypisz do niego funkcję dodania zadania pod konkretnym indeksem
  // (to jest nasza zmodyfikowana funkcja addTaskAtIndex())
  addAtIndexButton.onclick = function() {
    addTaskAtIndex(index);
  }
  // dodaj przycisk do nowego elementu listy
  li.appendChild(addAtIndexButton);

  //================> KONIEC NOWEGO KODU =======================//
  tasksList.appendChild(li);
}

Zapisz zmiany w pliku, uruchom go po raz kolejny w konsoli i sprawdź, jak działa!