Płynne rozmycie optyczne suwakiem blur
Treść zadania
W formularzu mamy suwak <input type="range" id="suwakBlur" min="0" max="10" value="0"> oraz obrazek <img id="podgladGrafiki" src="widok.jpg" alt="Krajobraz">. Na zdarzenie input suwaka ustaw właściwość style.filter obrazka w formacie 'blur(Xpx)', gdzie X to bieżąca wartość z suwaka (np. dla wartości 4 przypisz 'blur(4px)').
Co będzie oceniane
- Nasłuchiwanie zdarzenia input na #suwakBlur.
- Prawidłowe sklejanie łańcucha 'blur(' + wartość + 'px)'.
- Ustawienie filtru na elemencie #podgladGrafiki.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (1)
- Ustawienie rozmycia o promieniu 5px — atrybut #podgladGrafiki = blur(5px)
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Steruj filtrem 'blur(...px)' obrazka #podgladGrafiki na zdarzenie input suwaka
Wskazówki
Wskazówka 1
Funkcja filtru rozmycia przyjmuje wartość promienia wraz z jednostką pikseli wewnątrz nawiasu okrągłego.
Wskazówka 2
W zdarzeniu suwaka połącz ciąg znaków otwierający funkcję rozmycia z odczytaną wartością kontrolki, dopisz jednostkę pikseli oraz nawias zamykający, po czym przypisz całość do stylu filtru obrazka.