Przełączanie motywu z użyciem classList.toggle
Treść zadania
W strukturze strony mamy kontener <div id="kontenerGlowny">Treść strony</div> oraz przycisk <button id="btnPrzelaczMotyw">Tryb ciemny</button>. Napisz kod, który przy każdym kliknięciu przycisku przełącza klasę 'ciemny-motyw' na kontenerze za pomocą metody classList.toggle().
Co będzie oceniane
- Pobranie referencji do #kontenerGlowny i #btnPrzelaczMotyw.
- Użycie metody classList.toggle z nazwą 'ciemny-motyw'.
- Poprawne dodanie i usunięcie klasy przy kolejnych kliknięciach.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (2)
- Pierwsze kliknięcie dodaje klasę ciemny-motyw — klasa #kontenerGlowny = ciemny-motyw
- Drugie kliknięcie zdejmuje klasę ciemny-motyw — licznik #kontenerGlowny.ciemny-motyw = 0
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Przełączaj klasę 'ciemny-motyw' na #kontenerGlowny po kliknięciu #btnPrzelaczMotyw
Wskazówki
Wskazówka 1
Metoda przełączania dodaje klasę, jeśli jej nie ma, lub usuwa ją, gdy już występuje na danym elemencie.
Wskazówka 2
Zarejestruj obsługę zdarzenia na przycisku i wywołaj metodę przełączania klasy z argumentem będącym nazwą klasy ciemnego motywu na kontenerze.