Trwałe zapamiętanie motywu strony
Treść zadania
W dokumencie przygotowano kontener <div id="pudelkoMotywu">Aplikacja</div>, przycisk <button id="btnUstawCiemny">Ustaw ciemny motyw</button> oraz akapit <p id="stanMotywu"></p>.
Po kliknięciu przycisku dodaj klasę 'ciemny' do kontenera #pudelkoMotywu, zapisz w magazynie localStorage.setItem('motyw', 'ciemny') i wpisz do akapitu: Zapisano motyw: ciemny.
Co będzie oceniane
- Dodanie klasy 'ciemny' do #pudelkoMotywu.
- Zapis wartości pod kluczem 'motyw' w localStorage.
- Wpisanie 'Zapisano motyw: ciemny' do #stanMotywu.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Aktywacja ciemnego motywu i zapis do pamięci — klasa #pudelkoMotywu = ciemny; tekst #stanMotywu = Zapisano motyw: ciemny
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Dodaj klasę 'ciemny', zapisz w localStorage i zaktualizuj #stanMotywu po kliknięciu #btnUstawCiemny
Wskazówki
Wskazówka 1
Zapisanie wybranego stylu w pamięci lokalnej pozwala przywrócić go automatycznie przy kolejnej wizycie użytkownika.
Wskazówka 2
Zarejestruj kliknięcie przycisku, dodaj klasę za pomocą classList.add do kontenera, zapisz wartość 'ciemny' pod kluczem 'motyw' i wpisz potwierdzenie do akapitu.