Hurtownia kawy z kalkulatorem zamówienia

Część praktyczna egzaminu z kwalifikacji E.14 „Tworzenie aplikacji internetowych i baz danych oraz administrowanie bazami” (formuła 2012, poprzedniczka INF.03) z sesji styczeń 2022 (zadanie 02) trwa 150 minut. Zadanie nie obejmuje bazy danych - składa się z grafiki, witryny i skryptu działającego w przeglądarce. Obraz logo.png trzeba przeskalować z zachowaniem proporcji do wysokości dokładnie 110 px. Z grafiki ksztalty.png zdający wycina z zachowaniem przezroczystości filiżankę i imbryk, a w edytorze grafiki wektorowej składa z nich nowy obraz: imbryk po prawej stronie, obrócony tak, jakby nalewał do filiżanki, oraz brązowy napis „Poczęstuj się kawą” krojem szeryfowym, opisany na niewidocznym kole. Umieszczenie tekstu na kole dokumentuje zrzut całego ekranu edytor.png, a gotowy obraz kawa zapisuje się w formacie z przezroczystością, o wysokości nie większej niż 400 px.

Witryna składa się z plików index.html, zamowienia.html i blog.html (ten ostatni zawiera tylko napis „Strona w trakcie budowy”). Strony główna i zamówień mają wspólny układ: menu i logo na górze, baner z nagłówkiem „Sklep z kawą”, bloki lewy i prawy oraz stopkę. Menu zawiera cztery odnośniki, w tym do zewnętrznej strony o gatunkach kawy, a blok prawy - nagłówek „Oferta” i listę punktowaną czterech gatunków. Na stronie głównej w bloku lewym jest obraz kawa, a na stronie zamówień - dwa pola numeryczne (numer kawy, waga w dekagramach) i przycisk „Zamów”. Arkusz styl.css ustala krój Garamond, kolory tła Olive, SaddleBrown i Wheat, wymiary bloków, odstęp między literami nagłówka, wygląd odnośników ze zmianą koloru i dolnym obramowaniem po najechaniu kursorem oraz przekreślenie elementu „bezkofeinowa”.

Skrypt JavaScript uruchamiany przyciskiem „Zamów” pobiera numer kawy i wagę, ustala cenę za dekagram według tabeli (numery 1, 2 i 4; inny numer oznacza cenę 0 zł) i wyświetla pod przyciskiem tekst „Koszt zamówienia wynosi: <koszt> zł”.

Ocenie podlegają: przygotowanie grafiki, wygląd i działanie witryny (układ bloków, odnośniki, pola numeryczne, wywołanie skryptu, połączenie z arkuszem stylów), styl CSS oraz skrypt obliczający koszt.