Nakładanie filtru grayscale na grafikę
Treść zadania
W dokumencie przygotowano zdjęcie <img id="zdjecie" src="krajobraz.jpg" alt="Widok gór"> oraz przycisk <button id="btnCzarnoBialy">Skala szarości</button>. Po kliknięciu przycisku nałóż na zdjęcie filtr skali szarości przypisując do właściwości style.filter wartość 'grayscale(100%)'.
Co będzie oceniane
- Pobranie referencji do obrazka #zdjecie i przycisku #btnCzarnoBialy.
- Obsługa kliknięcia przycisku.
- Ustawienie style.filter na 'grayscale(100%)'.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Nałożenie filtru grayscale po kliknięciu przycisku — atrybut #zdjecie = grayscale(100%)
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Nałóż filtr 'grayscale(100%)' na #zdjecie po kliknięciu #btnCzarnoBialy
Wskazówki
Wskazówka 1
Filtry graficzne CSS definiuje się w JavaScript za pomocą właściwości filter obiektu stylu.
Wskazówka 2
Zarejestruj zdarzenie kliknięcia i wewnątrz funkcji przypisz łańcuch znaków z funkcją filtru skali szarości o wartości stu procent do stylu filtru obrazka.