Efekt sepii i resetowanie filtrów
Treść zadania
W module fotograficznym umieszczono grafikę <img id="fotografia" src="portret.jpg" alt="Portret"> oraz dwa przyciski: <button id="btnSepia">Sepia</button> i <button id="btnResetFiltr">Oryginał</button>.
Napisz skrypt, w którym:
- kliknięcie #btnSepia ustawia style.filter = 'sepia(100%)',
- kliknięcie #btnResetFiltr ustawia style.filter = 'none'.
Co będzie oceniane
- Obsługa kliknięcia przycisku #btnSepia i ustawienie 'sepia(100%)'.
- Obsługa kliknięcia przycisku #btnResetFiltr i ustawienie 'none'.
- Prawidłowe modyfikowanie właściwości style.filter.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (2)
- Włączenie efektu sepii — atrybut #fotografia = sepia(100%)
- Zresetowanie filtru do none — atrybut #fotografia = none
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Ustawiaj filtr 'sepia(100%)' lub 'none' na #fotografia w zależności od kliknięcia
Wskazówki
Wskazówka 1
Do usunięcia filtrów CSS i przywrócenia naturalnego wyglądu elementu służy specjalna wartość resetująca.
Wskazówka 2
Zbuduj dwie funkcje obsługujące kliknięcia obu przycisków: w pierwszej przypisz łańcuch sepii ze stuprocentowym nasyceniem, a w drugiej wartość oznaczającą brak filtru.