Konfigurator stylów CSS w JavaScript

Część praktyczna egzaminu z kwalifikacji EE.09 „Programowanie, tworzenie i administrowanie stronami internetowymi i bazami danych” (formuła 2017, poprzedniczka INF.03) z sesji styczeń 2022 (zadanie 06) trwa 150 minut. Zadanie zaczyna się od bazy danych auta, do której zdający importuje plik auta.sql z archiwum pliki6.zip i dokumentuje import zrzutem całego ekranu w formacie JPEG. Tabele samochody, wypozyczenia i klienci tworzą relację wiele do wielu, a samochody i klasa - relację wiele do jednego. Cztery zapytania zapisane w pliku kwerendy.txt: tworzy użytkownika Agnieszka z hasłem, liczy średnią roczników samochodów marki opel, wybiera marki samochodów i imiona klientów przez tabelę wypozyczenia (relacja między trzema tabelami) oraz usuwa kolumnę cena z tabeli klasa. Wyniki dokumentują zrzuty kw1-kw4.

Plik gibraltar.jpg trzeba przeskalować z zachowaniem proporcji do szerokości dokładnie 300 px. Strona konfigurator.html z tytułem „Style w JavaScript” i arkuszem styl6.css ma obok siebie blok lewy i prawy, a pod nimi stopkę. W lewym bloku znajduje się konfigurator: trzy przyciski kolorów tła (Indigo, SteelBlue, Olive), lista rozwijalna kolorów czcionki, pole rozmiaru czcionki z wartością 100%, zaznaczone pole „Rysuj ramkę” i trzy pola radio typu punktora. Prawy blok zawiera obraz, listę punktowaną i akapit z tekstem z pliku Lorem Ipsum.txt. Styl ustala m.in. krój Georgia, bloki w kolorze Maroon o wysokości 600 px (szerokość 30% i 70%), przewijanie prawego bloku tylko w razie potrzeby, obraz i listę obok siebie oraz przyciski w kolorach odpowiadających ich podpisom.

Skrypt JavaScript reaguje na zdarzenia kontrolek i zmienia styl prawego bloku: kolor tła po kliknięciu przycisku, kolor czcionki po wyborze z listy, rozmiar czcionki po opuszczeniu pola edycyjnego, ramkę obrazu zależnie od stanu pola checkbox (obsługa w funkcji) oraz rodzaj punktorów listy po wyborze pola radio.

Ocenie podlegają operacje na bazie danych, zawartość i działanie witryny, styl CSS oraz skrypt JavaScript.