Wskaźnik siły hasła na zdarzenie input
Treść zadania
W formularzu znajduje się pole <input type="password" id="hasloTestowane"> oraz etykieta <span id="wskaznikSily">Brak hasła</span>.
Na zdarzenie input pola hasła oceń jego długość:
1. Jeśli długość < 6: tekst 'Słabe', style.color = 'red'.
2. Jeśli długość >= 6 i długość < 10: tekst 'Średnie', style.color = 'orange'.
3. Jeśli długość >= 10: tekst 'Mocne', style.color = 'green'.
Co będzie oceniane
- Obsługa zdarzenia input na #hasloTestowane.
- Właściwe progi długości (<6, 6..9, >=10).
- Ustawienie tekstu i koloru dla każdego progu.
- Kod uruchamia się bez błędu i przechodzi wszystkie testy automatyczne.
Testy automatyczne (2)
- Wpisanie krótkiego hasła 'abc' oznacza je jako słabe na czerwono — tekst #wskaznikSily = Słabe; atrybut #wskaznikSily = color: red
- Wpisanie długiego hasła 'bardzodlugiehaslo' oznacza je jako mocne na zielono — tekst #wskaznikSily = Mocne; atrybut #wskaznikSily = color: green
Zaliczenie: wszystkie testy muszą przejść. Testy uruchamia się przyciskiem „Sprawdź testy” pod kodem.
// Oceniaj siłę hasła na bieżąco w zdarzeniu input i zmieniaj treść oraz kolor #wskaznikSily
Wskazówki
Wskazówka 1
Zdarzenie input pozwala na natychmiastową reakcję interfejsu przy każdym naciśnięciu klawisza.
Wskazówka 2
Zbadaj właściwość length wartości pola tekstowego w drabinie warunków if-else if, uaktualniając jednocześnie tekst oraz styl koloru znacznika etykiety.