Laboratorium: Interakcje z użytkownikiem

Zadania

Posługując się projektem przygotowanym w ramach poprzedniego zadania należy wprowadzić na stronach witryny interakcje z użytkownikiem z wykorzystaniem języka JavaScript.

1) Wybór daty z kalendarza (ang. datepicker) - strona główna, obszar hero image, formularz rezerwacji biletu (call-to-action)

Aby ułatwić użytkownikom wybór dnia dla rezerwacji biletu wprowadzony zostanie kalendarz widoczny po kliknięciu pola daty. Wykorzystany zostanie komponent z biblioteki jQuery UI. Plik index.html należy zmodyfikować w następujący sposób:

1.1 W sekcji nagłówkowej należy dołączyć arkusz stylów biblioteki:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

1.2 W końcowej części pliku należy dołączyć plik JavaScript biblioteki (po dołączeniu jquery.min.js):

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

1.3 Element input przeznaczony na datę rezerwacji należy uzupełnić o atrybut id="datepicker".

1.4 Blok kodu JavaScript w końcowej części pliku należy uzupełnić o inicjalizację komponentu do wybierania daty:

$("#datepicker").datepicker();

Po tych operacjach kliknięcie w pole daty powinno spowodować wyświetlenie kalendarza.

2) Karuzela

W obszarze hero image należy zastąpić statyczną informację o premierze jednego filmu karuzelą, która zawiera informację o dwóch nadchodzących produkcjach. Należy wykorzystać komponent karuzeli z biblioteki Bootstrap (http://getbootstrap.com/javascript/#carousel). Oba filmy powinny posiadać formularz rezerwacji biletu. W obu formularzach powinien działać wybór daty z kalendarza.

3) Siła hasła w formularzu rejestracji

Aby zachęcić użytkowników do wybierania trudnych do odgadnięcia haseł wiele witryn wyświetla miernik siły hasła w formularzu rejestracji. Należy zaprojektować tego typu miernik dla budowanej witryny. Powinien on wyświetlać się bezpośrednio pod polem hasła w formularzu rejestracji. Należy wykorzystać komponent progress bar z biblioteki Bootstrap, aby zaprezentować siłę hasła (http://getbootstrap.com/components/#progress-striped). Miernik powinien rozróżniać następujące stany:

3.1 Słabe hasło:

• domyślny stan

3.2 Średnie hasło:

• przynajmniej 6 znaków
• zawiera litery i cyfry

3.3 Silne hasło:

• przynajmniej 8 znaków
• duże i małe litery oraz cyfry

3.4 Bardzo silne hasło:

• przynajmniej 10 znaków
• duże i małe litery, cyfry oraz znaki, które są ani literą ani cyfrą (np. !@#$%^&)

Wymagania odnośnie hasła powinny być weryfikowane z wykorzystaniem języka JavaScript w miarę, jak użytkownik wpisuje hasło (zdarzenie keyup). Gdy hasło uzyskuje kolejny poziom, należy w skrypcie JavaScript zmodyfikować atrybuty elementu progress bar tak, aby odzwierciedlał aktualny stan.

4) Siła hasła - plug-in jQuery

Opracowany w poprzednim kroku miernik siły hasła należy przekształcić do postaci plug-ina jQuery, aby ułatwić jego wykorzystania również w innych miejscach witryny. Następnie należy opracować stronę z formularzem zmiany hasła i zastosować w nim przygotowany miernik w postaci plug-ina jQuery. Oczekiwany sposób użycia plug-ina:

$("input#password").passwordStrength();