Kompleksowa galeria z zapamiętaniem wyboru w pamięci
Treść zadania
Aplikacja galerii zawiera główne zdjęcie <img id="widokGlowny" src="pusty.jpg" alt="Podgląd">, akapit opisu <p id="opisWyboru">Brak wyboru</p> oraz miniatury:<img class="miniatura-foto" id="f1" src="gory.jpg" alt="Krajobraz górski">
<img class="miniatura-foto" id="f2" src="morze.jpg" alt="Widok morza">
Napisz obsługę:
1. Po kliknięciu dowolnej miniatury .miniatura-foto:
- ustaw #widokGlowny.src = this.src,
- ustaw #opisWyboru.textContent = this.alt,
- zapisz w pamięci localStorage.setItem('ostatnieFoto', this.alt).
Co będzie oceniane
- Pobranie i iteracja po miniaturach .miniatura-foto.
- Podmiana src widoku głównego i treści akapitu #opisWyboru.
- Zapis wartości alt do localStorage pod kluczem 'ostatnieFoto'.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (2)
- Kliknięcie miniatury gór aktualizuje widok, podpis i pamięć — atrybut #widokGlowny = gory.jpg; tekst #opisWyboru = Krajobraz górski
- Kliknięcie miniatury morza aktualizuje widok i podpis — atrybut #widokGlowny = morze.jpg; tekst #opisWyboru = Widok morza
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Podmieniaj widok główny, podpis i zapisuj w localStorage po kliknięciu .miniatura-foto
Wskazówki
Wskazówka 1
Zintegruj odczyt właściwości klikniętej miniatury z uaktualnieniem elementów interfejsu oraz trwałą persystencją w pamięci lokalnej.
Wskazówka 2
Przejdź po miniaturach, w zdarzeniu kliknięcia podmień właściwości źródła widoku głównego i treść akapitu na opis alternatywny klikniętego elementu, po czym wywołaj metodę zapisu do magazynu przeglądarki.