Kompleksowy selektor filtrów fotograficznych
Treść zadania
Aplikacja fotograficzna zawiera obrazek <img id="foto" src="obraz.jpg" alt="Podgląd">, akapit <p id="opisFiltra">Zastosowano: brak filtra</p> oraz trzy przyciski:
1. <button id="btnNegatyw">Negatyw</button> — ustawia style.filter = 'invert(100%)' oraz tekst w akapicie na 'Zastosowano: negatyw'.
2. <button id="btnSzary">Szary</button> — ustawia style.filter = 'grayscale(100%)' oraz tekst w akapicie na 'Zastosowano: skala szarości'.
3. <button id="btnNormalny">Normalny</button> — ustawia style.filter = 'none' oraz tekst w akapicie na 'Zastosowano: brak filtra'.
Co będzie oceniane
- Obsługa kliknięć wszystkich trzech przycisków filtrów.
- Prawidłowe przypisanie filtrów invert(100%), grayscale(100%) i none.
- Spójna aktualizacja tekstu akapitu #opisFiltra dla każdego stanu.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (3)
- Zastosowanie filtru negatywu — atrybut #foto = invert(100%); tekst #opisFiltra = Zastosowano: negatyw
- Zastosowanie skali szarości — atrybut #foto = grayscale(100%); tekst #opisFiltra = Zastosowano: skala szarości
- Przywrócenie normalnego wyglądu — atrybut #foto = none; tekst #opisFiltra = Zastosowano: brak filtra
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Zaprogramuj trzy przyciski filtrów wraz z aktualizacją akapitu #opisFiltra
Wskazówki
Wskazówka 1
Skojarz każde z kliknięć przycisków z dwoma działaniami: zmianą właściwości wizualnej oraz aktualizacją opisu tekstowego dla użytkownika.
Wskazówka 2
Zdefiniuj obsługę dla każdego z trzech przycisków, pamiętając o jednoczesnym przypisaniu odpowiedniej reguły filtru do stylu zdjęcia i uaktualnieniu zawartości tekstowej wskazanego akapitu informacyjnego.