Interaktywny menedżer listy z przełączaniem stanu
Treść zadania
Aplikacja to-do posiada pole <input type="text" id="wpisZadania" value="Napisać raport">, przycisk <button id="btnZapiszZadanie">Dodaj zadanie</button> oraz listę <ul id="rejestrZadan"></ul>.
Napisz obsługę:
1. Po kliknięciu przycisku utwórz element <li> z tekstem z pola i dołącz do #rejestrZadan.
2. Do każdego nowo utworzonego li dodaj nasłuchiwanie zdarzenia kliknięcia, które za pomocą this.classList.toggle('zrobione') przełącza klasę wykonania zadania.
3. Wyczyść pole wejściowe po dodaniu.
Co będzie oceniane
- Utworzenie li i dołączenie do #rejestrZadan.
- Rejestracja obsługi kliknięcia na elemencie li przełączającej klasę 'zrobione'.
- Wyczyszczenie pola #wpisZadania po dodaniu.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (2)
- Dodanie zadania do listy i wyczyszczenie pola — licznik #rejestrZadan li = 1; tekst #rejestrZadan li = Napisać raport; wartosc #wpisZadania =
- Kliknięcie w dodane zadanie nadaje mu klasę zrobione — klasa #rejestrZadan li:first-child = zrobione
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Zaprogramuj dodawanie zadań do #rejestrZadan z możliwością przełączania klasy 'zrobione'
Wskazówki
Wskazówka 1
Zdarzenie kliknięcia możesz zarejestrować bezpośrednio na obiekcie nowego węzła przed lub po jego wstawieniu do drzewa dokumentu.
Wskazówka 2
Wewnątrz funkcji obsługującej dodanie nowego zadania utwórz element li, dodaj do niego zdarzenie przełączające klasę zrobione za pomocą toggle, zresetuj wartość pola wejściowego i dołącz element do listy.