TodoList

W szkole na laboratoriach z przedmiotu ’Aplikacje internetowe 1′ dostałem zadanie zrobienia prostej TodoList jako nauka javascript i DOM.
Lista miała obsługiwać:

• Dodawanie zadań,
• Usuwanie zadań,
• Oznaczanie zadań jako ukończone,
• Wyszukiwanie zadania po podanej frazie,
• Obsługa localStorage.
  

Na samym poczatku zbudowałem layout strony w HTML:

Do stylowania użyłem Bootstrap 4.1.3, a dla ikonek plusa oraz śmietnika Font Awesome.

Na poczatek stworzyłem sobie klase Todo oraz tablice todos która będzie przechowywać zadania. Odrazu dodałem też obsługe localStorage żeby nie bawic się z tym później a juz móc używać 🙂

Nie znalazłem jakiegoś ładniejszego rozwiązania na dodawanie elementów do strony, dlatego zastosowałem wielki blok html do którego podaje wartości poszczeólnych elementów.
Każdy element ma id bazujące na czasie stworzenia zadania jest to moim zdaniem wystarczająco unikalne. Ten id jest używany jako atrybut id dla danego elementu listy aby w pszyszłości łatwiej mozna było znaleźć o jaki element nam chodzi w trakcie np. usuwania.

Dla przycisków usuwania oraz oznaczania zadania jako ukończone użyłem jednego addEventListener jest to dobra praktyka jeżeli mamy na stronie wiele elementów tego samego rodszaju i obsługujących tę samą funkcje.
Dzięki temu przy np. 100 zadaniach w liście mamy tylko jedno nasłuchiwanie na całą liste zamiast 2 nasłuchiwań dla każdego elementu listy czyli w tym przypadku byłoby ich w sumie 200!!!

Kolejną rzeczą z listy jest wyszukiwanie:

Zastosowałem metody toLowerCase() aby dla przypadku gdy ktoś szuka np. ’Test’ znalazł też wszystkie zadania niezależnie od wielkości liter więc np. ’tEsT’ czy ’test’.
W założeniach było także wymaganie że lista ma się odświeżać przy wyszukiwani jeśli podana fraza jest dłuższa 2 znaki.

Ostatnią i najtrudniejsza dla mnie do zaimplementowania rzeczą była edycja zadań.
Dla uproszczenia pozwoliłem na edycje jedynie pola tekstowego.

Pozwalam na edycje jednoczesnie tylko i wyłacznie jednego wpisu. Po kliknięciu poza oknem do wprowadzanai zmian, zawartość listy jest aktualizowana.
Po wszystkim resetuje pomocnicze zmienne.

W taki właśnie sposób stworzyłem swoją liste na zaliczenie jednego z laboratoriów.
Mam nadzieje, że coś ciekawego wyniosłeś z tego materiału!

Dziękuję za Twoją uwagę 😄