Treść zadania:
Zadanie E.04 – JavaScript – Rejestracja uczestników warsztatów
Czas przeznaczony na wykonanie zadania: 60 minut
Maksymalna liczba punktów: 15
W pliku index.html znajduje się gotowy formularz oraz pusta tabela wyników. Plik style.css jest już podłączony i nie wolno go zmieniać.
Twoim zadaniem jest napisanie kodu w pliku skrypt.js.
Wygląd i działanie po załadowaniu strony:
przycisk „Dodaj uczestnika” jest nieaktywny (disabled)
tabela „Lista zapisanych osób” jest pusta
pod formularzem widoczny jest napis: Liczba zapisanych: 0 osób | Średni wiek: –
Wymagania funkcjonalne:
Po wpisaniu danych w polach formularza i spełnieniu wszystkich warunków walidacyjnych przycisk „Dodaj uczestnika” staje się aktywny.
Warunki walidacyjne (wszystkie muszą być spełnione jednocześnie):
Imię i nazwisko → minimum 5 znaków (łącznie z spacją)
Wiek → liczba całkowita od 16 do 80 włącznie
Miasto → wybrana jakaś opcja z listy rozwijanej (nie może pozostać wartość domyślna „— wybierz miasto —”)
Checkbox „Wyrażam zgodę…” musi być zaznaczony
Po kliknięciu „Dodaj uczestnika”:
dane zostają dodane do tabeli (nowy wiersz <tr>)
kolumny w kolejności: Lp. | Imię i nazwisko | Wiek | Miasto | Data dodania
data dodania wyświetlana w formacie: DD.MM.RRRR GG:MM
formularz zostaje wyczyszczony (oprócz checkboxa – on ma wrócić do stanu niezaznaczonego)
przycisk „Dodaj uczestnika” ponownie staje się nieaktywny
aktualizuje się informacja na dole: Liczba zapisanych: X osób | Średni wiek: Y lat
(średni wiek z dwoma miejscami po przecinku, np. 24.50)
Przycisk „Wyczyść listę”:
usuwa wszystkie wiersze z tabeli (oprócz nagłówka)
zeruje licznik osób i średni wiek (–)
czyści formularz
wyłącza przycisk dodawania
Dodatkowe wymagania punktowane (5 pkt):
W kolumnie Lp. numery są automatycznie nadawane od 1 wzwyż (nawet po czyszczeniu listy numery zaczynają się od nowa)
Jeśli tabela jest pusta → pod tabelą pojawia się akapit z klasą info o treści: „Brak zapisanych uczestników”
Po dodaniu pierwszej osoby ten akapit znika
Pole „Wiek” blokuje wpisywanie liter (tylko cyfry) – można to zrobić za pomocą atrybutu type="number" + dodatkowej walidacji
Średni wiek jest liczony na bieżąco po każdym dodaniu / wyczyszczeniu
HTML:
<form id="formularz">
<input type="text" id="imie_nazwisko" placeholder="Imię i nazwisko">
<input type="number" id="wiek" placeholder="Wiek" min="16" max="80">
<select id="miasto">
<option value="">— wybierz miasto —</option>
<option value="Warszawa">Warszawa</option>
<option value="Kraków">Kraków</option>
<option value="Wrocław">Wrocław</option>
<option value="Gdańsk">Gdańsk</option>
<option value="Poznań">Poznań</option>
</select>
<label>
<input type="checkbox" id="zgoda"> Wyrażam zgodę na przetwarzanie danych
</label>
<button type="button" id="dodaj" disabled>Dodaj uczestnika</button>
</form>
<h2>Lista zapisanych osób</h2>
<table id="tabela">
<thead>
<tr>
<th>Lp.</th>
<th>Imię i nazwisko</th>
<th>Wiek</th>
<th>Miasto</th>
<th>Data dodania</th>
</tr>
</thead>
<tbody></tbody>
</table>
<p id="podsumowanie">Liczba zapisanych: 0 osób | Średni wiek: –</p>
<button id="wyczysc">Wyczyść listę</button>
