Aktualizujemy kod JavaScript o funkcjonalności DOM - pierwsza wersja aplikacji todo-app-dom

Zacznijmy implementować funkcjonalności DOM, co jak zawsze możemy zrobić na kilka sposobów... Nie będę wdawał się w szczegóły, tylko zaproponuję podożęnie przykładem uniwersalnej funkcji updateTasksInLocalStorage(), którą wywoływaliśmy w każdej z funkcji modyfikującej listę zadań i stworzyć podobną uniwersalną funkcję modyfikującą listę HTML w ten sposób, że będzie ona każdorazowo uzupełniać listę o aktualne zadania (niezależnie od tego, czy je dodaliśmy, czy usunęliśmy).

PS. Pamiętasz jeszcze, co się dzieje w tym kodzie? 😂😏

Ten sposób jest wg mnie najłatwiejszy oraz wymaga mniej kodu, niemniej jednak może być mniej optymalny w przypadku długich list oraz wchodzimy w dość poważny temat związany z architekturą aplikacji i zarządzania jej stanem, a dokładniej chodzi tu o pojedyncze źródło prawdy (single source of truth).

W programowaniu często nie ma tak, że któraś z opcji jest najlepsza; podobnie też jest z językami programowania - każde podejście, każdy język i technologia mają swoje plusy i minusy oraz jedne są po prostu lepsze w pewnego rodzaju sytuacjach, w innych natomiast nie sprawdziłyby się tak dobrze.

Dlatego skupimy się na wdrożeniu najprostszej pod względem kodu opcji, żeby aplikacja zadziałała jak najszybciej.

• Otwórz nasz plik HTML todo-app.html w przeglądarce,
• Przejdź do konsoli do zadkładki snippets i stwórz tam nowy plik o nazwie todo-app-dom. Skopiuj i wklej tam kod naszej aplikacji z kursu Local Storage.

Początek pozostawiamy bez zmian:

console.clear();

function getTasksFromLocalStorage() {
  const storedTasksStringified = localStorage.getItem("tasks");

  const storedTasks = JSON.parse(storedTasksStringified);

  return storedTasks;
}

let tasks = getTasksFromLocalStorage() || [];

// => tutaj zaczniemy pisać nowy kod => funkcję renderTasks()
// + dopiszemy jedną linijkę do funkcji showTasks()

// ...dalszy kod dotychczasowej aplikacji bez zmian

PS. Jeśli właśnie odkryłeś/aś, że patrzysz na ten kod i nie pamiętasz, jak działa, to wróć do kursu Local Storage i zrób sobie powtórkę!

Ok, więc na początek czyścimy konsolę, potem deklarujemy funkcję pobierającą zadania zapisane w localStorage i zwracającą je oraz deklarujemy zmienną tasks, do której przypisujemy pobrane zadania. Dalszy kod aplikacji nas nie będzie interesował i na razie pozostanie bez zmian (oprócz showTasks()).

Teraz musimy te pobrane zadania wyświetlić (wyrenderować) na ekranie, a dokładniej - musimy dodać każde zadanie jako element listy HTML. Najpierw więc musimy uzyskać dostęp do listy zadań w HTML, co już wcześniej robiliśmy:

// ...powyższy kod z poprzedniego akapitu...

// po deklaracji globalnej zmiennej tasks:
// let tasks = getTasksFromLocalStorage() || [];
// zadeklaruj globalną zmienną przechowującą HTMLową listę zadań:
const tasksList = document.getElementById("tasks-list");

// teraz mamy dostęp i możemy korzystać z HTMLowej listy w dalszym kodzie!

Dodajmy teraz pomocniczą funkcję appendTaskToTheTasksList() tworząca nowy element listy, pobierającą zadanie jako argument i dodającą zadanie do listy - funkcja ta na razie będzie identyczna do funkcji addTask(), którą stworzyliśmy wcześniej w tym kursie:

// ...powyższy kod z poprzedniego akapitu...

function appendTaskToTheTasksList(task) {
  // utwórz nowy element listy li:
  const li = document.createElement("li");
  // i przypisz do niego wartość zadania:
  li.textContent = task;

  // dodaj element listy do listy:
  // (pamiętaj, że HTMLowa lista jest zmienną globalną, więc mamy do niej dostęp)
  tasksList.appendChild(li);
}