Rozwiązanie buduje stronę firmy montującej panele podłogowe: baza przewozy z osobami i zadaniami (baza i strona dotyczą w tym arkuszu różnych tematów - to dwie niezależne części) i cztery zapytania - wzorzec LIKE, wzorzec z sortowaniem, grupowanie GROUP BY z licznikiem i aliasem oraz usunięcie kolumny ALTER TABLE, potem grafika z napisem na przezroczystym tle i trzy zdjęcia paneli przeskalowane do 500 × 70 px, trzy strony HTML - index.html z rodzajami paneli, oferta.html z tabelą o scalonych komórkach i koszty.html z kalkulatorem - i style w style.css, z gradientami w nagłówku i stopce. PHP tu nie ma: skrypt działa w przeglądarce, w JavaScripcie - mnoży szerokość przez długość, dobiera stawkę do zaznaczonego rodzaju panelu i sprawdza, czy pola są wypełnione.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest najpierw pisany najprościej, z atrybutem onclick, warunkami if i innerHTML, a na końcu zostaje przerobiony na wersję z prawdziwych projektów: słuchacz zdarzenia, stawki w obiekcie zamiast drabinki warunków, sprawdzenie liczb i textContent.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, osobny skrypt)” jest drugi sposób rozwiązania tego samego arkusza: kolory w zmiennych CSS, kalkulator ułożony siatką CSS zamiast <br>, stawki w obiekcie zamiast drabinki if i skrypt w osobnym pliku z nasłuchiwaczem zdarzenia i sprawdzeniem danych od pierwszej linii - obie wersje są zgodne z kluczem.
Baza i zdjęcia pochodzą z prawdziwego archiwum pliki12 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. Kalkulator w podglądzie działa naprawdę - wpisz wymiary, zaznacz rodzaj panelu i kliknij „Oblicz”.
Jak liczą się punkty. Klucz ma 40 kryteriów (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów - można stracić 10 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 6 z 40 kryteriów (pkt)
Utwórz bazę danych o nazwie przewozy, z zestawem polskich znaków (np. utf8_unicode_ci).
Rozpakuj pliki12.7z z pulpitu (hasło P@neLePodLoGowe!+, ze znakami na końcu) do folderu z numerem zdającego: baza.sql i trzy zdjęcia paneli. W phpMyAdmin: Nowa, nazwa przewozy, porównywanie z polskimi znakami, np. utf8_unicode_ci albo utf8mb4_polish_ci.
Do utworzonej bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum.
Wybierz bazę przewozy w lewym drzewie, potem Import → baza.sql → Wykonaj. Powstają dwie tabele z ilustracji 1: osoby (6 osób z imieniem, nazwiskiem i telefonem) i zadania (7 zadań z datą). Relacja 1..n: zadania.osoba_id → osoby.id_osoba - jedna osoba może mieć wiele zadań.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie PNG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Print Screen i zapis jako import.png - tu wszystkie zrzuty są w PNG. Na zrzucie widać komunikat o udanym imporcie i dwie tabele w drzewie bazy.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie imiona i nazwiska osób, których imiona rozpoczynają się od litery A.
SELECT imie, nazwisko - „jedynie imiona i nazwiska”,FROM osoby,WHERE imie LIKE "A%" - LIKE porównuje ze wzorcem: A na początku, a % zastępuje dowolny ciąg znaków (także pusty). „Rozpoczynają się od A” to właśnie A%.Wynik: Anna A. i Arkadiusz G. - dwa wiersze, jak w kluczu. Zapytanie zapisujesz w kwerendy.txt, zrzut jako kw1.png.
WHERE imie = "A%" szuka imienia dosłownie „A%” - znak % działa jako wzorzec tylko z LIKE.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT imie, nazwisko FROM osoby WHERE imie LIKE "A%";
Zapytanie 2: wybierające jedynie nazwy zadań (pole zadanie) i daty, w których w nazwie zadania zawiera się słowo „mebli”, posortowane rosnąco według daty.
SELECT zadanie, data FROM zadania,WHERE zadanie LIKE "%mebli%" - „zawiera się”: % z obu stron, więc słowo może stać w dowolnym miejscu,ORDER BY data - sortowanie rosnące jest domyślne, ASC można dopisać.Wynik: dwa przewozy mebli, z datami 2019-11-06 i 2021-01-26 - jak w kluczu. Zrzut: kw2.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, nazwisko FROM osoby WHERE imie LIKE "A%";
-- Zapytanie 2
SELECT zadanie, data FROM zadania WHERE zadanie LIKE "%mebli%" ORDER BY data;
Zapytanie 3: wybierające jedynie pogrupowane nazwiska osób i odpowiadającą im liczbę zadań. Kolumnie z liczbą zadań należy nadać nazwę (alias) „Liczba zadań”. Należy posłużyć się relacją.
FROM osoby JOIN zadania ON id_osoba = osoba_id - relacja: każde zadanie łączysz z osobą, która je wykonuje,GROUP BY nazwisko - wiersze z tym samym nazwiskiem zwijają się w jeden,COUNT(zadania.id_zadania) - w każdej grupie liczy, ile było zadań,AS "Liczba zadań" - alias ze spacją i polską literą, więc w cudzysłowie.Wynik: A. 2, G. 2, K. 1, W. 2 - cztery wiersze, jak w kluczu. Osoby bez zadań (C. i L.) przy zwykłym JOIN nie pojawiają się; z LEFT JOIN byłyby z liczbą 0 - klucz uznaje obie wersje. Zrzut: kw3.png.
COUNT(*) z LEFT JOIN liczy też wiersz osoby bez zadań - C. i L. dostałyby 1 zamiast 0. Przy LEFT JOIN licz kolumnę z tabeli zadania.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, nazwisko FROM osoby WHERE imie LIKE "A%";
-- Zapytanie 2
SELECT zadanie, data FROM zadania WHERE zadanie LIKE "%mebli%" ORDER BY data;
-- Zapytanie 3
SELECT nazwisko, COUNT(zadania.id_zadania) AS "Liczba zadań" FROM osoby JOIN zadania ON id_osoba = osoba_id GROUP BY nazwisko;
Zapytanie 4: usuwające kolumnę telefon z tabeli osoby.
Zmiana budowy tabeli to ALTER TABLE, a usunięcie kolumny - DROP COLUMN z jej nazwą. Kolumna znika razem z danymi wszystkich wierszy, bez pytania o potwierdzenie. Na zrzucie kw4.png wystarczy komunikat o poprawnym wykonaniu albo podgląd tabeli osoby z trzema kolumnami.
DELETE telefon FROM osoby nie działa - DELETE usuwa wiersze, nie kolumny. Kolumny zmienia się tylko przez ALTER TABLE.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT imie, nazwisko FROM osoby WHERE imie LIKE "A%";
-- Zapytanie 2
SELECT zadanie, data FROM zadania WHERE zadanie LIKE "%mebli%" ORDER BY data;
-- Zapytanie 3
SELECT nazwisko, COUNT(zadania.id_zadania) AS "Liczba zadań" FROM osoby JOIN zadania ON id_osoba = osoba_id GROUP BY nazwisko;
-- Zapytanie 4
ALTER TABLE osoby DROP COLUMN telefon;
Kroki 8-32 · po tym etapie masz 20 z 40 kryteriów (pkt)
Kolor wypełnienia liter obrazu otrzymany z grafiki laminowane.png. Czynność tą udokumentuj zrzutem ekranu o nazwie kolor.png.
Otwórz laminowane.png w GIMP-ie i narzędziem Pipeta (klawisz O) kliknij w brązowe pole deski - pobrany kolor staje się kolorem pierwszoplanowym. Tu wyszedł #a26f3a. Teraz Print Screen z widocznym obrazem i oknem koloru i zapis jako kolor.png. Klucz uzna dowolny odcień brązu (R.2.2).
Przygotowanie grafiki o nazwie montaz_paneli.png: szerokość obrazu 400 px, wysokość 50 px, tło przezroczyste, napis "Montaż paneli podłogowych", pogrubioną czcionką bezszeryfową (sans-serif), w rozmiarze 27.
Plik → Nowy: 400 × 50 px, w opcjach zaawansowanych Wypełnienie: Przezroczystość. Narzędzie Tekst: czcionka bezszeryfowa pogrubiona, np. Arial Bold albo Sans-serif Bold, rozmiar 27 px, kolor - ten pobrany pipetą. Wpisz napis i wyrównaj go do środka obrazu. Eksportuj jako montaz_paneli.png - format PNG zachowuje przezroczystość, JPEG by ją zamienił na biel (R.2.1, R.2.2).
Nowy obraz z domyślnym białym wypełnieniem nie ma przezroczystego tła - na stronie z gradientem widać biały prostokąt, a kryterium R.2.1 nie jest spełnione.
Przygotowanie grafik laminowane.png, winylowe.png, deska.png: Obrazy należy przeskalować dokładnie do szerokości 500 px i wysokości 70 px.
Każde zdjęcie ma 480 × 300 px. Obraz → Skaluj obraz, rozpinasz łańcuch proporcji i wpisujesz 500 i 70 - zdjęcie się spłaszczy, ale arkusz wymaga dokładnie tych wymiarów. Eksportuj jako pod tą samą nazwą. Trzy razy, dla każdego pliku (R.2.3).
Przy zamkniętym łańcuchu po wpisaniu szerokości 500 GIMP sam wylicza wysokość 313 - obraz ma złe wymiary i kryterium R.2.3 przepada.
Cechy witryny: Składa się z podstron o nazwach index.html, oferta.html i koszty.html. Cechy wspólne dla stron: Zapisane w języku HTML5.
Zbuduj całą stronę index.html, a oferta.html i koszty.html powstaną z jej kopii - różnią się tylko blokiem głównym.
index.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny.
Atrybut lang="pl" w znaczniku <html>.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków.
<meta charset="UTF-8"> jako pierwszy element <head>.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Montaż paneli podłogowych”.
<title> w <head> - napis na karcie przeglądarki.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie style.css prawidłowo połączony z kodem strony.
Nazwa w tym arkuszu: style.css, z „e” na końcu.
styl.css zamiast style.css odcina wszystkie style - kryterium R.3.5, a rezultat R.4 jest wtedy oceniany tylko z kodu.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy, poniżej menu, poniżej główny, na dole stopka. Podział zrealizowany za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 3.
<header> - nagłówek strony, <nav> - menu, <main> - treść główna, <footer> - stopka. Klucz wymaga znaczników semantycznych, w tym wprost header i footer (R.2.5). Bloki stoją jeden pod drugim bez żadnego pozycjonowania.
index.html HTML zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: obraz montaz_paneli.png z tekstem alternatywnym "firma usługowa".
<img> z tekstem alternatywnym z arkusza (R.2.7). Przezroczyste tło grafiki pokaże gradient nagłówka, gdy dodasz style.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość Menu: Odnośnik "Strona Główna" prowadzący do strony index.html. Odnośnik "Oferta" prowadzący do strony oferta.html. Odnośnik "Kalkulator kosztów" prowadzący do strony koszty.html.
Trzy znaczniki <a> ze ścieżkami względnymi - same nazwy plików z tego samego folderu (R.3.2). W podglądzie kliknięcia są zablokowane.
index.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość stopki: nagłówek piątego stopnia o treści "Autor strony: ", dalej wstawiony numer zdającego.
Tym razem nie akapit, lecz nagłówek <h5>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Zawartość bloku głównego strony index.html: Nagłówek pierwszego stopnia o treści "Panele podłogowe".
<h1> w bloku <main>.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Panele podłogowe</h1>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Obraz laminowane.png, z tekstem alternatywnym „Laminowane”. Akapit o treści "Panele laminowane".
Obraz i pod nim akapit <p> z podpisem.
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Panele podłogowe</h1>
<img src="laminowane.png" alt="Laminowane">
<p>Panele laminowane</p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Obraz winylowe.png, z tekstem alternatywnym „Winylowe”. Akapit o treści "Panele winylowe".
Ta sama para dla drugiego rodzaju paneli.
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Panele podłogowe</h1>
<img src="laminowane.png" alt="Laminowane">
<p>Panele laminowane</p>
<img src="winylowe.png" alt="Winylowe">
<p>Panele winylowe</p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Obraz deska.png, z tekstem alternatywnym „Deska”. Akapit o treści "Deska podłogowa".
Trzecia para. Klucz sprawdza trzy obrazy z tekstami alternatywnymi i trzy akapity w bloku głównym (R.2.6, R.2.8).
index.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Panele podłogowe</h1>
<img src="laminowane.png" alt="Laminowane">
<p>Panele laminowane</p>
<img src="winylowe.png" alt="Winylowe">
<p>Panele winylowe</p>
<img src="deska.png" alt="Deska">
<p>Deska podłogowa</p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Zawartość bloku głównego strony oferta.html: Nagłówek pierwszego stopnia o treści "Koszt montażu paneli podłogowych".
Zapisz index.html jako oferta.html - nagłówek, menu i stopka zostają - i w <main> zostaw tylko nowy <h1>.
oferta.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Koszt montażu paneli podłogowych</h1>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Tabela o 4 kolumnach i 5 wierszach, z czego niektóre wiersze / kolumny są scalone. Treść i wygląd tabeli przedstawiony jest na ilustracji 4.
Na ilustracji 4 nagłówek tabeli zajmuje dwa wiersze:
rowspan="2" scala komórki w pionie,colspan="2" scala w poziomie,Na ilustracji napisy nie są pogrubione, więc to zwykłe komórki <td> (R.2.9).
Dopisanie w drugim wierszu czterech komórek, mimo scalenia, wypycha tabelę o kolumnę w prawo - komórka scalona rowspan już zajmuje swoje miejsce w wierszu poniżej.
oferta.html HTML zmienione: 11 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Koszt montażu paneli podłogowych</h1>
<table>
<tr>
<td rowspan="2">Rodzaj paneli</td>
<td colspan="2">Rozmiar</td>
<td rowspan="2">Koszt montażu</td>
</tr>
<tr>
<td>Szerokość</td>
<td>Długość</td>
</tr>
</table>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Treść i wygląd tabeli przedstawiony jest na ilustracji 4.
Trzy zwykłe wiersze po cztery komórki, z danymi z ilustracji 4. Razem 5 wierszy i 4 kolumny - jak w arkuszu (R.2.9). Ostatnia kolumna to stawki za m², których użyje skrypt: 12, 14 i 18 zł.
oferta.html HTML zmienione: 18 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Koszt montażu paneli podłogowych</h1>
<table>
<tr>
<td rowspan="2">Rodzaj paneli</td>
<td colspan="2">Rozmiar</td>
<td rowspan="2">Koszt montażu</td>
</tr>
<tr>
<td>Szerokość</td>
<td>Długość</td>
</tr>
<tr>
<td>Laminowane</td>
<td>30</td>
<td>200</td>
<td>12</td>
</tr>
<tr>
<td>Winylowe</td>
<td>20</td>
<td>200</td>
<td>14</td>
</tr>
<tr>
<td>Deska</td>
<td>10</td>
<td>100</td>
<td>18</td>
</tr>
</table>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Zawartość bloku głównego strony koszty.html: Nagłówek pierwszego stopnia o treści "Kalkulator kosztów montażu".
Trzecia kopia, koszty.html, z nowym <h1> w bloku głównym.
koszty.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Obok siebie dwa pola edycyjne typu numerycznego poprzedzone etykietami: „Szerokość pomieszczenia [m]: ", "Długość pomieszczenia [m]: ".
Etykieta <label for> i pole <input type="number"> - dwa razy. Etykiety i pola są elementami liniowymi, więc bez <br> stoją obok siebie w jednym wierszu, jak na ilustracji 5 (R.2.10, R.3.4). Identyfikatory po angielsku: width i length.
koszty.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Paragraf o treści "Typ panelu".
Akapit <p> - jako element blokowy zaczyna nowy wiersz pod polami.
koszty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Jedno pod drugim trzy pola opcji z etykietami o treści: "Panele laminowane", "Panele winylowe", "Deska podłogowa". Pola są zgrupowane tak, że w jednym momencie można zaznaczyć tylko jedno pole.
Pole opcji to <input type="radio">. Grupę tworzy wspólna wartość atrybutu name: wszystkie trzy mają name="panel", więc zaznaczenie jednego odznacza pozostałe (R.3.4). Każde ma własne id - po nim skrypt sprawdzi, które jest zaznaczone. <br> układa je jedno pod drugim. Kliknij kolejne opcje w podglądzie.
Różne wartości name (albo brak name) robią z pól trzy niezależne przełączniki - da się zaznaczyć wszystkie naraz i kryterium R.3.4 przepada.
koszty.html HTML zmienione: 6 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
<input type="radio" name="panel" id="laminated">
<label for="laminated">Panele laminowane</label><br>
<input type="radio" name="panel" id="vinyl">
<label for="vinyl">Panele winylowe</label><br>
<input type="radio" name="panel" id="board">
<label for="board">Deska podłogowa</label><br>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Poniżej przycisk o treści "Oblicz", którego wybranie uruchamia skrypt.
<button> z onclick="calculate()" - kliknięcie wywoła funkcję JavaScript, którą napiszesz w części o skrypcie (R.3.3). Na razie kliknięcie kończy się błędem w konsoli - funkcji jeszcze nie ma.
koszty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
<input type="radio" name="panel" id="laminated">
<label for="laminated">Panele laminowane</label><br>
<input type="radio" name="panel" id="vinyl">
<label for="vinyl">Panele winylowe</label><br>
<input type="radio" name="panel" id="board">
<label for="board">Deska podłogowa</label><br>
<button onclick="calculate()">Oblicz</button>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Pusty paragraf, przeznaczony do wyświetlenia wyników działania skryptu.
Pusty <p id="result"> pod przyciskiem - tu skrypt wpisze wynik albo komunikat o błędzie.
koszty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
<input type="radio" name="panel" id="laminated">
<label for="laminated">Panele laminowane</label><br>
<input type="radio" name="panel" id="vinyl">
<label for="vinyl">Panele winylowe</label><br>
<input type="radio" name="panel" id="board">
<label for="board">Deska podłogowa</label><br>
<button onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
</body>
</html>Kroki 33-44 · po tym etapie masz 31 z 40 kryteriów (pkt)
Domyślnie, dla wszystkich selektorów: krój czcionki Georgia.
Utwórz style.css. Selektor * obejmuje wszystkie elementy (R.4.1). Georgia to czcionka szeryfowa - stąd ozdobne litery na ilustracji 3.
style.css CSS nowy plik * {
font-family: Georgia;
}Dla selektora ciała strony: wyrównanie tekstu do środka.
Właściwość dziedziczą wszystkie bloki: nagłówki, akapity, obrazy i odnośniki w menu stają na środku (R.4.8).
style.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
text-align: center;
}Dla bloku nagłówkowego: marginesy wewnętrzne 30 px, gradient pionowy od koloru #A0522D do koloru #F5DEB3.
Gradient to w CSS obraz tła: background-image: linear-gradient(kolor1, kolor2). Bez podanego kierunku przejście biegnie z góry na dół - czyli jest pionowe (opis w ramce „CSS Linear Gradients” arkusza). Od rdzawego #A0522D u góry do pszenicznego #F5DEB3 na dole (R.4.3, R.4.6).
background-color: linear-gradient(#A0522D, #F5DEB3) nie działa - gradient jest obrazem, więc należy do background-image (albo skrótu background).
style.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
body {
text-align: center;
}
header {
padding: 30px;
background-image: linear-gradient(#A0522D, #F5DEB3);
}Dla bloku menu: kolor tła Wheat, marginesy wewnętrzne 14 px.
Wheat to nazwa koloru w CSS - ten sam pszeniczny odcień, co #F5DEB3, w którym kończy się gradient nagłówka.
style.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
body {
text-align: center;
}
header {
padding: 30px;
background-image: linear-gradient(#A0522D, #F5DEB3);
}
nav {
background-color: Wheat;
padding: 14px;
}Dla bloku głównego: kolor tła Wheat, marginesy wewnętrzne 50 px.
To samo tło, co menu - na ilustracji 3 oba bloki zlewają się w jedno pole.
style.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
body {
text-align: center;
}
header {
padding: 30px;
background-image: linear-gradient(#A0522D, #F5DEB3);
}
nav {
background-color: Wheat;
padding: 14px;
}
main {
background-color: Wheat;
padding: 50px;
}Dla stopki: marginesy wewnętrzne 30 px, gradient pionowy od koloru #F5DEB3 do koloru #A0522D.
Kolory zamienione miejscami: jasny u góry przechodzi w ciemny na dole strony (R.4.3, R.4.6).
style.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
body {
text-align: center;
}
header {
padding: 30px;
background-image: linear-gradient(#A0522D, #F5DEB3);
}
nav {
background-color: Wheat;
padding: 14px;
}
main {
background-color: Wheat;
padding: 50px;
}
footer {
padding: 30px;
background-image: linear-gradient(#F5DEB3, #A0522D);
}Dla selektora odnośnika: kolor tła Sienna, biały kolor czcionki, czcionka pogrubiona, bez podkreślenia, marginesy wewnętrzne 10 px, zewnętrzne 20 px.
Tym razem selektor znacznika a - arkusz wymaga go wprost. „Bez podkreślenia” to text-decoration: none (R.4.2, R.4.5, R.4.6, R.4.7).
style.css CSS zmienione: 8 linii * {
font-family: Georgia;
}
body {
text-align: center;
}
header {
padding: 30px;
background-image: linear-gradient(#A0522D, #F5DEB3);
}
nav {
background-color: Wheat;
padding: 14px;
}
main {
background-color: Wheat;
padding: 50px;
}
footer {
padding: 30px;
background-image: linear-gradient(#F5DEB3, #A0522D);
}
a {
background-color: Sienna;
color: white;
font-weight: bold;
text-decoration: none;
padding: 10px;
margin: 20px;
}Gdy kursor myszy znajdzie się na odnośniku pojawia się podkreślenie tekstu.
Pseudoklasa :hover przywraca podkreślenie, dopóki kursor jest nad odnośnikiem - jak przy „Oferta” na ilustracji 3 (R.4.10).
style.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
text-align: center;
}
header {
padding: 30px;
background-image: linear-gradient(#A0522D, #F5DEB3);
}
nav {
background-color: Wheat;
padding: 14px;
}
main {
background-color: Wheat;
padding: 50px;
}
footer {
padding: 30px;
background-image: linear-gradient(#F5DEB3, #A0522D);
}
a {
background-color: Sienna;
color: white;
font-weight: bold;
text-decoration: none;
padding: 10px;
margin: 20px;
}
a:hover {
text-decoration: underline;
}Wspólne dla selektora tabeli i selektora komórki tabeli: obramowanie o szerokości 1px linią ciągłą koloru Sienna, obramowanie połączone w jedną linię.
Jedna reguła dla dwóch selektorów: table, td. border-collapse: collapse łączy podwójne ramki sąsiednich komórek w jedną linię, jak na ilustracji 4 (R.4.9).
style.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
body {
text-align: center;
}
header {
padding: 30px;
background-image: linear-gradient(#A0522D, #F5DEB3);
}
nav {
background-color: Wheat;
padding: 14px;
}
main {
background-color: Wheat;
padding: 50px;
}
footer {
padding: 30px;
background-image: linear-gradient(#F5DEB3, #A0522D);
}
a {
background-color: Sienna;
color: white;
font-weight: bold;
text-decoration: none;
padding: 10px;
margin: 20px;
}
a:hover {
text-decoration: underline;
}
table, td {
border: 1px solid Sienna;
border-collapse: collapse;
}Dodatkowo dla selektora tabeli: szerokość 70%, marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę.
margin: auto - przy ustalonej szerokości 70% przeglądarka dzieli wolne miejsce po równo na lewo i prawo, więc tabela staje na środku. Samo text-align: center z body tabeli nie przesunie, bo wyrównuje tylko zawartość linii (R.4.4, R.4.7).
style.css CSS zmienione: 4 linie * {
font-family: Georgia;
}
body {
text-align: center;
}
header {
padding: 30px;
background-image: linear-gradient(#A0522D, #F5DEB3);
}
nav {
background-color: Wheat;
padding: 14px;
}
main {
background-color: Wheat;
padding: 50px;
}
footer {
padding: 30px;
background-image: linear-gradient(#F5DEB3, #A0522D);
}
a {
background-color: Sienna;
color: white;
font-weight: bold;
text-decoration: none;
padding: 10px;
margin: 20px;
}
a:hover {
text-decoration: underline;
}
table, td {
border: 1px solid Sienna;
border-collapse: collapse;
}
table {
width: 70%;
margin: auto;
}Dla selektora komórki tabeli: marginesy wewnętrzne 5 px.
Odstęp napisu od ramki komórki (R.4.6).
style.css CSS zmienione: 3 linie * {
font-family: Georgia;
}
body {
text-align: center;
}
header {
padding: 30px;
background-image: linear-gradient(#A0522D, #F5DEB3);
}
nav {
background-color: Wheat;
padding: 14px;
}
main {
background-color: Wheat;
padding: 50px;
}
footer {
padding: 30px;
background-image: linear-gradient(#F5DEB3, #A0522D);
}
a {
background-color: Sienna;
color: white;
font-weight: bold;
text-decoration: none;
padding: 10px;
margin: 20px;
}
a:hover {
text-decoration: underline;
}
table, td {
border: 1px solid Sienna;
border-collapse: collapse;
}
table {
width: 70%;
margin: auto;
}
td {
padding: 5px;
}Uwaga: styl CSS ciała strony, odnośnika, tabeli i komórki tabeli należy zdefiniować wyłącznie przy pomocy selektora tych znaczników. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.
Sprawdź całość na index.html: nagłówek z gradientem, menu i blok główny w kolorze Wheat, stopka z odwróconym gradientem - bloki stoją jeden pod drugim, zgodnie z ilustracją 3 (R.3.1). Style body, a, table i td są zapisane selektorami znaczników, bez klas - klucz uznaje R.4.2, R.4.4, R.4.6 i R.4.8 tylko w tej postaci.
Kroki 45-50 · po tym etapie masz 40 z 40 kryteriów (pkt)
Wykonywany po stronie klienta, na stronie koszty.html po kliknięciu przycisku „Oblicz”.
Skrypt w <script> na końcu <body> strony koszty.html - wykonuje się w przeglądarce. Funkcja ma tę samą nazwę, co w onclick przycisku: calculate. Na razie jest pusta.
koszty.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
<input type="radio" name="panel" id="laminated">
<label for="laminated">Panele laminowane</label><br>
<input type="radio" name="panel" id="vinyl">
<label for="vinyl">Panele winylowe</label><br>
<input type="radio" name="panel" id="board">
<label for="board">Deska podłogowa</label><br>
<button onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
<script>
function calculate() {
}
</script>
</body>
</html>Skrypt pobiera dane z pól edycyjnych i pól opcji.
document.getElementById znajduje pole po identyfikatorze, a .value to jego zawartość - wpisany tekst, np. „4”. Puste pole daje pusty napis "" - z tego skorzystasz przy sprawdzaniu (R.5.2).
koszty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
<input type="radio" name="panel" id="laminated">
<label for="laminated">Panele laminowane</label><br>
<input type="radio" name="panel" id="vinyl">
<label for="vinyl">Panele winylowe</label><br>
<input type="radio" name="panel" id="board">
<label for="board">Deska podłogowa</label><br>
<button onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
<script>
function calculate() {
let width = document.getElementById("width").value;
let length = document.getElementById("length").value;
}
</script>
</body>
</html>Jeżeli oba pola edycyjne zostały wypełnione, skrypt oblicza pole powierzchni pomieszczenia i koszt montażu. W przeciwnym wypadku skrypt wyświetla komunikat "Wprowadź poprawne dane."
&& (i) - oba pola muszą być niepuste. Gdy któregoś brakuje, gałąź else wpisuje komunikat do akapitu result przez innerHTML. Kliknij „Oblicz” w podglądzie przy pustych polach (R.5.6, R.5.8).
|| (lub) zamiast && przepuszcza jedno puste pole - skrypt liczy wtedy pole powierzchni 0.
koszty.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
<input type="radio" name="panel" id="laminated">
<label for="laminated">Panele laminowane</label><br>
<input type="radio" name="panel" id="vinyl">
<label for="vinyl">Panele winylowe</label><br>
<input type="radio" name="panel" id="board">
<label for="board">Deska podłogowa</label><br>
<button onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
<script>
function calculate() {
let width = document.getElementById("width").value;
let length = document.getElementById("length").value;
if (width != "" && length != "") {
} else {
document.getElementById("result").innerHTML = "Wprowadź poprawne dane.";
}
}
</script>
</body>
</html>Oblicza pole powierzchni pomieszczenia.
Szerokość razy długość. Operator * sam zamienia napisy „4” i „3” na liczby, więc wynik to 12 (R.5.4).
koszty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
<input type="radio" name="panel" id="laminated">
<label for="laminated">Panele laminowane</label><br>
<input type="radio" name="panel" id="vinyl">
<label for="vinyl">Panele winylowe</label><br>
<input type="radio" name="panel" id="board">
<label for="board">Deska podłogowa</label><br>
<button onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
<script>
function calculate() {
let width = document.getElementById("width").value;
let length = document.getElementById("length").value;
if (width != "" && length != "") {
let area = width * length;
} else {
document.getElementById("result").innerHTML = "Wprowadź poprawne dane.";
}
}
</script>
</body>
</html>Oblicza koszt montażu uwzględniając pole powierzchni oraz typ panelu i koszt z tabeli 1.
Właściwość checked pola opcji ma wartość true, gdy pole jest zaznaczone. Z grupy zaznaczone może być tylko jedno, więc wystarczy drabinka if ... else if: stawka z tabeli 1 - 12 zł/m² za laminowane, 14 za winylowe, 18 za deskę - razy pole powierzchni (R.5.3, R.5.5).
koszty.html HTML zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
<input type="radio" name="panel" id="laminated">
<label for="laminated">Panele laminowane</label><br>
<input type="radio" name="panel" id="vinyl">
<label for="vinyl">Panele winylowe</label><br>
<input type="radio" name="panel" id="board">
<label for="board">Deska podłogowa</label><br>
<button onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
<script>
function calculate() {
let width = document.getElementById("width").value;
let length = document.getElementById("length").value;
if (width != "" && length != "") {
let area = width * length;
let cost = 0;
if (document.getElementById("laminated").checked) {
cost = area * 12;
} else if (document.getElementById("vinyl").checked) {
cost = area * 14;
} else if (document.getElementById("board").checked) {
cost = area * 18;
}
} else {
document.getElementById("result").innerHTML = "Wprowadź poprawne dane.";
}
}
</script>
</body>
</html>W paragrafie pod przyciskiem wyświetla napis: „Pole powierzchni pomieszczenia: <pole>, koszt montażu <koszt>”, gdzie pola <> oznaczają wartości obliczone skryptem.
Napis składasz operatorem + i wpisujesz do akapitu result. Wpisz w podglądzie 4 i 3, zaznacz „Deska podłogowa” i kliknij „Oblicz”: „Pole powierzchni pomieszczenia: 12, koszt montażu 216” (12 × 18) - jak na ilustracji 5 (R.5.7, R.5.8). Zmienne nazwane po angielsku mówią, co przechowują (R.5.9).
koszty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
<input type="radio" name="panel" id="laminated">
<label for="laminated">Panele laminowane</label><br>
<input type="radio" name="panel" id="vinyl">
<label for="vinyl">Panele winylowe</label><br>
<input type="radio" name="panel" id="board">
<label for="board">Deska podłogowa</label><br>
<button onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
<script>
function calculate() {
let width = document.getElementById("width").value;
let length = document.getElementById("length").value;
if (width != "" && length != "") {
let area = width * length;
let cost = 0;
if (document.getElementById("laminated").checked) {
cost = area * 12;
} else if (document.getElementById("vinyl").checked) {
cost = area * 14;
} else if (document.getElementById("board").checked) {
cost = area * 18;
}
document.getElementById("result").innerHTML = "Pole powierzchni pomieszczenia: " + area + ", koszt montażu " + cost;
} else {
document.getElementById("result").innerHTML = "Wprowadź poprawne dane.";
}
}
</script>
</body>
</html>Krok 51 · po tym etapie masz 40 z 40 kryteriów (pkt)
Przycisk "Oblicz", którego wybranie uruchamia skrypt.
Poprawki z prawdziwych projektów:
RATES zamiast drabinki if: pola opcji dostają value, a querySelector('input[name="panel"]:checked') od razu zwraca zaznaczone. Nowy rodzaj paneli to jedna linia w obiekcie i jedno pole w HTML.Number() zamienia tekst na liczbę, a warunek odrzuca wymiary nie większe od zera i brak wyboru.addEventListener zamiast onclick w HTML i textContent zamiast innerHTML.Wersja z egzaminu zostaje w komentarzu pod nową. Na egzaminie wystarczy wersja wcześniejsza - klucz sprawdza .value, .checked i komunikat dla pustego pola (R.5.2, R.5.3, R.5.6), a dodatkowych zabezpieczeń nie wymaga.
koszty.html HTML zmienione: 24 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Montaż paneli podłogowych</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="montaz_paneli.png" alt="firma usługowa">
</header>
<nav>
<a href="index.html">Strona Główna</a>
<a href="oferta.html">Oferta</a>
<a href="koszty.html">Kalkulator kosztów</a>
</nav>
<main>
<h1>Kalkulator kosztów montażu</h1>
<label for="width">Szerokość pomieszczenia [m]: </label>
<input type="number" id="width">
<label for="length">Długość pomieszczenia [m]: </label>
<input type="number" id="length">
<p>Typ panelu</p>
<input type="radio" name="panel" id="laminated" value="laminated">
<label for="laminated">Panele laminowane</label><br>
<input type="radio" name="panel" id="vinyl" value="vinyl">
<label for="vinyl">Panele winylowe</label><br>
<input type="radio" name="panel" id="board" value="board">
<label for="board">Deska podłogowa</label><br>
<button id="calculate">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<h5>Autor strony: Bartosz Bryniarski</h5>
</footer>
<script>
const RATES = { laminated: 12, vinyl: 14, board: 18 };
function calculate() {
let width = Number(document.getElementById("width").value);
let length = Number(document.getElementById("length").value);
let panel = document.querySelector('input[name="panel"]:checked');
let result = document.getElementById("result");
if (width <= 0 || length <= 0 || panel == null) {
result.textContent = "Wprowadź poprawne dane.";
return;
}
let area = width * length;
let cost = area * RATES[panel.value];
result.textContent = "Pole powierzchni pomieszczenia: " + area + ", koszt montażu " + cost;
}
document.getElementById("calculate").addEventListener("click", calculate);
/* Wersja z egzaminu:
function calculate() {
let width = document.getElementById("width").value;
let length = document.getElementById("length").value;
if (width != "" && length != "") {
let area = width * length;
let cost = 0;
if (document.getElementById("laminated").checked) {
cost = area * 12;
} else if (document.getElementById("vinyl").checked) {
cost = area * 14;
} else if (document.getElementById("board").checked) {
cost = area * 18;
}
document.getElementById("result").innerHTML = "Pole powierzchni pomieszczenia: " + area + ", koszt montażu " + cost;
} else {
document.getElementById("result").innerHTML = "Wprowadź poprawne dane.";
}
}
*/
</script>
</body>
</html>Krok 52 · po tym etapie masz 40 z 40 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz strony.
W folderze z numerem zdającego muszą być: trzy strony HTML, style.css, kwerendy.txt, zrzuty import.png, kw1.png - kw4.png i kolor.png, grafika montaz_paneli.png i trzy przeskalowane zdjęcia paneli. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 51.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.
Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.