Przejdź do głównej treści
EE.09-04-22.06-SGCzerwiec 2022 · 52 kroki · ok. 94 min · 41 kryteriów z klucza

Rozwiązanie krok po kroku: Zamówienia materiałów do sieci komputerowych (Nowoczesny kod (grid, nasłuchiwacze))

To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza firma z czterema zapytaniami i kontem zaopatrzenie, grafika sieci z przezroczystym tłem oraz strona zamowienia.html z tabelą materiałów, kolorowaniem braków, aktualizacją ilości i zamówieniami - i tak samo spełnia każde kryterium klucza. Inna jest droga:

  • siatka CSS zamiast float: bloki lewy i prawy stoją w znaczniku <main> z grid-template-columns: 30% 70%, a stopka nie potrzebuje clear,
  • zmienne CSS dla kolorów z arkusza, tabela z częściami <thead> i <tbody>,
  • przyciski bez numerów wierszy w kodzie: skrypt sam przypina nasłuchiwacz click do każdego przycisku (addEventListener) i znajduje jego wiersz metodą closest("tr") - dopisanie piątego materiału nie wymaga zmian w skrypcie,
  • textContent zamiast innerHTML i sprawdzenie wartości z okna prompt - Anuluj, tekst albo liczba ujemna nie psują tabeli,
  • jedna funkcja wybiera kolor dla ilości, a komunikat zamówienia składa szablon tekstowy.

Skrypt zostaje w pliku strony, na końcu <body>: klucz sprawdza kryteria R.5.1 - R.5.3 i R.5.7 „w kodzie strony”, a przy zewnętrznym pliku .js egzaminator mógłby ich tam nie znaleźć.

To arkusz EE.09 z czerwca 2022 - kwalifikacji formuły 2017, którą zastąpiła INF.03. Baza, grafika i plik z treścią tabeli pochodzą z oryginalnego archiwum CKE zad4.zip (załącznik na stronie arkusza), zapytania i zrzuty są policzone na MariaDB 10.4, a skrypt sprawdzony w przeglądarce Chrome.

Jak liczą się punkty. Klucz ma 41 kryteriów (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 31 punktów. Przy każdym kroku jest napisane, które kryteria spełnia; klucz przyjmuje zarówno atrybut onclick, jak i nasłuchiwacz zdarzenia.

Arkusz i pliki do pobrania Treść arkusza (PDF) Pobierz pliki rozwiązania (zip)

  1. Etap 1: Baza danych

    Kroki 1-8 · po tym etapie masz 7 z 41 kryteriów (pkt)

    Krok 1: Folder zdającego i archiwum zad4.zip

    ok. 2 min
    Polecenie z arkusza

    Na pulpicie konta Egzamin należy utworzyć folder. Jako nazwy folderu należy użyć numeru zdającego, którym został podpisany arkusz. Rozpakowane pliki należy umieścić w tym folderze. Po skończonej pracy wszystkie wyniki należy zapisać w tym folderze.

    Folder na pulpicie nazwany numerem zdającego (w tym rozwiązaniu w jego miejscu stoi Bartosz Bryniarski), do niego archiwum zad4.zip z hasłem Sieci^KomPuterowe_!. W środku: baza.sql, obraz.jpg i tabela.txt. Do tego folderu trafiają wszystkie rezultaty pracy.

  2. Krok 2: XAMPP i baza firma

    ok. 2 min
    Polecenie z arkusza

    Za pomocą narzędzia phpMyAdmin należy wykonać operacje na bazie danych: Utworzenie bazy danych o nazwie: firma z zestawem polskich znaków (np. utf8_unicode_ci)

    Start przy Apache i MySQL, potem http://localhost/phpmyadmin, Nowa, nazwa firma. Porównywanie np. utf8mb4_polish_ci - utf8mb4 zapisuje każdy znak Unicode (także emoji, których starsze utf8 w MySQL nie mieści), a polish sortuje „ł” po „l”, a nie na końcu alfabetu.

  3. Krok 3: Import tabel z pliku baza.sql i zrzut import.jpg

    Kryteria:

    R.1.1 Wykonano import tabel do bazy danych firma , czynność udokumentowano plikiem o nazwie import w formacie JPEG

    ok. 3 min
    Polecenie z arkusza

    Import tabel do bazy firma z pliku baza.sql. Czynność należy udokumentować zrzutem ekranu, na którym powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel. Zrzut należy zapisać w formacie JPEG, pod nazwą import. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań.

    Baza firma, karta Import, plik baza.sql, Wykonaj. Trzy tabele: jednostki (2 wiersze), materialy (7) i producenci (4); w materialy klucze obce Producenci_id i Jednostki_id. Komunikat o sukcesie i tabele w lewym panelu na zrzucie całego ekranu: import.jpg.

    Typowe błędy

    Zrzut importu w JPEG, zrzuty zapytań i grants w PNG.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 3

  4. Krok 4: Zapytanie 1: materiały powyżej 9 sztuk z producentem

    Kryteria: ,

    R.1.2 Zapisano plik tekstowy o nazwie kwerendy zawierający co najmniej jedno zapytanie SQL, wynikające z treści zadania

    R.1.3 Utworzono zapytanie 1 wybierające jedynie nazwę i ilość materiałów oraz odpowiadającą im nazwę producenta dla materiałów, których jest więcej niż 9. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa, ilosc, nazwaProd FROM materialy JOIN producenci ON Producenci_id = producenci.id WHERE ilosc > 9; (lub porównanie kluczy w WHERE) oraz wynik działania zapytania udokumentowano zrzutem, na którym widoczne są dokładnie 3 rekordy: Skrętka U/UTP drut 20 Netrack, Wtyk 8P8C 10 Netrack, Moduł Keystone 30 UGreen

    ok. 3 min
    Polecenie z arkusza

    Zapytanie 1: wybierające jedynie nazwę i ilość materiałów oraz odpowiadającą im nazwę producenta dla materiałów, których jest więcej niż 9. Należy wykorzystać relację

    Każda klauzula w osobnej linii - przy złączeniach łatwiej wtedy znaleźć błąd. JOIN … ON materialy.Producenci_id = producenci.id to relacja z obrazu 1, a WHERE ilosc > 9 - „więcej niż 9”. Wynik: 3 rekordy (Skrętka U/UTP drut 20 Netrack, Wtyk 8P8C 10 Netrack, Moduł Keystone 30 UGreen), zgodnie z kluczem. Zapytanie do kwerendy.txt, zrzut: kw1.png.

    kwerendy.txt Tekst nowy plik 
    -- Zapytanie 1
SELECT nazwa, ilosc, nazwaProd
FROM materialy
JOIN producenci ON materialy.Producenci_id = producenci.id
WHERE ilosc > 9;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 4

  5. Krok 5: Zapytanie 2: materiał, producent i jednostka

    Kryteria:

    R.1.4 Utworzono zapytanie 2 wybierające jedynie nazwę materiału i odpowiadającą jej nazwę producenta oraz nazwę jednostki. W pliku z kwerendami lub na zrzucie istnieje zapis np.: SELECT nazwa, nazwaProd, nazwaJedn FROM materialy JOIN producenci ON Producenci_id = producenci.id JOIN jednostki ON Jednostki_id = jednostki.id; (lub porównanie kluczy w WHERE, dowolna kolejność łączenia tabel) oraz wynik działania zapytania udokumentowano zrzutem, na którym widocznych jest dokładnie 7 rekordów z nazwami produktów i odpowiadającymi im nazwami producentów i jednostek

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 2: wybierające jedynie nazwę materiału i odpowiadającą jej nazwę producenta oraz nazwę jednostki. Należy wykorzystać relację

    Dwa złączenia - po jednym na każdą relację. Wynik: 7 rekordów, każdy materiał z producentem i jednostką. Zrzut: kw2.png.

    kwerendy.txt Tekst zmienione: 6 linii 
    -- Zapytanie 1
SELECT nazwa, ilosc, nazwaProd
FROM materialy
JOIN producenci ON materialy.Producenci_id = producenci.id
WHERE ilosc > 9;

-- Zapytanie 2
SELECT nazwa, nazwaProd, nazwaJedn
FROM materialy
JOIN producenci ON materialy.Producenci_id = producenci.id
JOIN jednostki ON materialy.Jednostki_id = jednostki.id;
    Podgląd strony po tym kroku
    Podgląd strony po kroku 5

  6. Krok 6: Zapytanie 3: użytkownik zaopatrzenie

    Kryteria:

    R.1.5 Utworzono zapytanie 3 tworzące użytkownika o nazwie zaopatrzenie na localhost z hasłem Z@op@trzenie. W pliku z kwerendami lub na zrzucie istnieje zapis np.: CREATE USER 'zaopatrzenie'@'localhost' IDENTIFIED BY 'Z@op@trzenie'; oraz wynik działania zapytania udokumentowano zrzutem z komunikatem o poprawnie wykonanej operacji, hasło widoczne jest jawnie (niezaszyfrowane)

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 3: tworzące użytkownika o nazwie zaopatrzenie na localhost z hasłem Z@op@trzenie

    CREATE USER z nazwą i komputerem w apostrofach, hasło jawnie po IDENTIFIED BY (klucz wymaga, by było widoczne na zrzucie albo w pliku). Zrzut: kw3.png.

    kwerendy.txt Tekst zmienione: 3 linie 
    -- Zapytanie 1
SELECT nazwa, ilosc, nazwaProd
FROM materialy
JOIN producenci ON materialy.Producenci_id = producenci.id
WHERE ilosc > 9;

-- Zapytanie 2
SELECT nazwa, nazwaProd, nazwaJedn
FROM materialy
JOIN producenci ON materialy.Producenci_id = producenci.id
JOIN jednostki ON materialy.Jednostki_id = jednostki.id;

-- Zapytanie 3
CREATE USER 'zaopatrzenie'@'localhost' IDENTIFIED BY 'Z@op@trzenie';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 6

  7. Krok 7: Zapytanie 4: prawa do rekordów w bazie firma

    Kryteria:

    R.1.6 Utworzono zapytanie 4 nadające prawa umożliwiające przeglądanie, aktualizację, dodawanie i usuwanie rekordów dla utworzonego użytkownika na wszystkich tabelach bazy firma. W pliku z kwerendami lub na zrzucie istnieje zapis np.: GRANT SELECT, INSERT, UPDATE, DELETE ON firma.* TO 'zaopatrzenie'@'localhost'; oraz wynik działania zapytania udokumentowano zrzutem z komunikatem o poprawnie wykonanym zapytaniu

    ok. 2 min
    Polecenie z arkusza

    Zapytanie 4: nadające prawa umożliwiające przeglądanie, aktualizację, dodawanie i usuwanie rekordów dla utworzonego użytkownika na wszystkich tabelach bazy firma

    Cztery prawa do rekordów - SELECT, INSERT, UPDATE, DELETE - i nic więcej: zasada najmniejszych uprawnień. ON firma.* to wszystkie tabele jednej bazy. Sprawdzone logowaniem na nowe konto: odczyt działa, DROP TABLE kończy się odmową. Zrzut: kw4.png.

    Typowe błędy

    GRANT ALL PRIVILEGES albo ON *.* daje znacznie więcej, niż wymaga arkusz.

    kwerendy.txt Tekst zmienione: 5 linii 
    -- Zapytanie 1
SELECT nazwa, ilosc, nazwaProd
FROM materialy
JOIN producenci ON materialy.Producenci_id = producenci.id
WHERE ilosc > 9;

-- Zapytanie 2
SELECT nazwa, nazwaProd, nazwaJedn
FROM materialy
JOIN producenci ON materialy.Producenci_id = producenci.id
JOIN jednostki ON materialy.Jednostki_id = jednostki.id;

-- Zapytanie 3
CREATE USER 'zaopatrzenie'@'localhost' IDENTIFIED BY 'Z@op@trzenie';

-- Zapytanie 4
GRANT SELECT, INSERT, UPDATE, DELETE
ON firma.*
TO 'zaopatrzenie'@'localhost';
    Podgląd strony po tym kroku
    Podgląd strony po kroku 7

  8. Krok 8: SHOW GRANTS i zrzut grants.png

    Kryteria:

    R.1.7 Sprawdzono prawa użytkownika zaopatrzenie, co udokumentowano zrzutem ekranu o nazwie grants.png na którym widać prawa SELECT, UPDATE, INSERT i DELETE dla użytkownika zaopatrzenie dla firma.* (*.* też poprawnie, gdy aktywna jest baza firma)

    ok. 2 min
    Polecenie z arkusza

    Po wykonaniu zapytań 3, 4 należy wydać polecenie SHOW GRANTS FOR 'zaopatrzenie'@'localhost'; Następnie należy wykonać zrzut ekranu z rezultatem polecenia i zapisać go pod nazwą grants.png. Zrzut powinien obejmować cały ekran monitora z widocznym paskiem zadań.

    Dwa wiersze wyniku: USAGE (samo logowanie) i prawa z zapytania 4 dla firma.*. Zrzut z rozwiniętymi Pełnymi tekstami: grants.png.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 8

  9. Etap 2: Grafika i strona HTML

    Kroki 9-27 · po tym etapie masz 19 z 41 kryteriów (pkt)

    Krok 9: Grafika: tło przezroczyste

    ok. 3 min
    Polecenie z arkusza

    Cechy grafiki z pliku obraz: Tło przezroczyste

    W GIMP-ie Warstwa → Przezroczystość → Dodaj kanał alfa, potem Kolory → Kolor na alfę z bielą - jasne krawędzie dostają częściową przezroczystość, więc kontur zostaje gładki na każdym tle.

    Podgląd strony po tym kroku
    Podgląd strony po kroku 9

  10. Krok 10: Grafika: szerokość 300 px z zachowaniem proporcji

    ok. 2 min
    Polecenie z arkusza

    Obraz przeskalowany z zachowaniem proporcji do szerokości 300 px

    Obraz → Skaluj obraz z zamkniętym łańcuchem: 510 × 640 px → 300 × 376 px (klucz: 376 ±2).

  11. Krok 11: Grafika: zapis jako obraz.png

    Kryteria:

    R.2.1 Grafikę w pliku obraz przeskalowano z zachowaniem proporcji do szerokości 300 px, odpowiadająca temu wysokość 376 px (± 2 px), obraz zapisano z zachowaniem przezroczystości

    ok. 1 min
    Polecenie z arkusza

    Grafika zapisana pod nazwą obraz w formacie obsługującym przezroczystość

    Plik → Wyeksportuj jako… obraz.png. PNG zapisuje przezroczystość z pełną paletą kolorów (GIF ma tylko 256 kolorów i przezroczystość „wszystko albo nic”).

    Podgląd strony po tym kroku
    Podgląd strony po kroku 11

  12. Krok 12: Plik zamowienia.html

    Kryteria:

    R.2.2 Witrynę internetową zapisano w pliku o nazwie zamowienia.html

    ok. 1 min
    Polecenie z arkusza

    Cechy witryny: Składa się ze strony o nazwie zamowienia.html

    Nowy plik zamowienia.html w folderze zdającego.

    zamowienia.html HTML nowy plik
    Podgląd strony po tym kroku (zamowienia.html)

  13. Krok 13: Szkielet HTML5

    ok. 1 min
    Polecenie z arkusza

    Zapisana w języku HTML5

    <!DOCTYPE html> i szkielet <html>, <head>, <body>.

    zamowienia.html HTML zmienione: 7 linii 
    <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  14. Krok 14: Kodowanie polskich znaków

    ok. 1 min
    Polecenie z arkusza

    Jawnie zastosowany właściwy standard kodowania polskich znaków

    <meta charset="UTF-8"> jako pierwszy znacznik w <head>. Druga linia, viewport, każe telefonowi wyświetlić stronę w szerokości ekranu zamiast pomniejszonej wersji „komputerowej” - arkusz jej nie wymaga.

    zamowienia.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  15. Krok 15: Język strony

    Kryteria:

    R.2.3 Zapisano jawnie standard kodowania polskich znaków i deklarację HTML5 <!DOCTYPE HTML> oraz zadeklarowano dla witryny język polski (np. lang = 'pl')

    ok. 1 min
    Polecenie z arkusza

    Zadeklarowany język zawartości witryny: polski

    lang="pl" w znaczniku <html>.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  16. Krok 16: Tytuł strony i arkusz stylów

    Kryteria: ,

    R.2.4 Nadano tytuł strony: Zamówienia hurtowe

    R.3.5 Strona zawiera działające połączenie z zewnętrznym arkuszem stylów o nazwie styl4.css , formatowanie pochodzi jedynie z tego arkusza lub skryptu Uwaga: kryterium to nie jest spełnione również, gdy zdający źle przypisał co najmniej jeden selektor do bloku (np. kropka zamiast #)

    ok. 1 min
    Polecenie z arkusza

    Tytuł strony widoczny na karcie przeglądarki: „Zamówienia hurtowe”

    <title> i od razu <link> do styl4.css - wszystkie style strony będą w tym pliku.

    zamowienia.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  17. Krok 17: Bloki: baner, główna część z dwiema sekcjami, stopka

    Kryteria:

    R.2.5 Wygląd strony zdefiniowano dzieląc ją na bloki: banera, lewy, prawy i stopkę. Zastosowano znaczniki sekcji

    ok. 2 min
    Polecenie z arkusza

    Podział strony na: blok banera, obok siebie bloki lewy i prawy, blok stopki. Podział zrealizowany za pomocą znaczników sekcji

    <header> i <footer> jak w wersji podstawowej, a bloki lewy i prawy - dwa znaczniki <section> - stoją we wspólnym <main>, czyli głównej treści strony. <main> będzie siatką z dwiema kolumnami: obie sekcje ustawi obok siebie jedna reguła CSS, bez float na sekcjach i clear na stopce.

    zamowienia.html HTML zmienione: 10 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
    </header>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  18. Krok 18: Baner: nagłówek pierwszego stopnia

    ok. 1 min
    Polecenie z arkusza

    Zawartość banera: nagłówek pierwszego stopnia o treści „Sieci komputerowe”

    <h1> w <header>.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  19. Krok 19: Blok lewy: nagłówek drugiego stopnia

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku lewego: Nagłówek drugiego stopnia o treści: „Aktualizacja i zamówienia materiałów”

    <h2> w sekcji left.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  20. Krok 20: Blok lewy: paragraf

    ok. 1 min
    Polecenie z arkusza

    Paragraf (akapit) o treści: „Do wewnętrznego użytku firmy”

    <p> pod nagłówkiem.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  21. Krok 21: Blok lewy: grafika z tekstem alternatywnym

    Kryteria:

    R.2.7 W bloku lewym umieszczono obraz o nazwie obraz z tekstem alternatywnym „sieć komputerowa"

    ok. 1 min
    Polecenie z arkusza

    Grafika o nazwie obraz z tekstem alternatywnym „sieć komputerowa”

    <img> z alt z arkusza. Atrybuty width i height z prawdziwymi wymiarami pliku pozwalają przeglądarce zarezerwować miejsce na obraz, zanim się wczyta - tekst pod nim nie „skacze” w dół.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  22. Krok 22: Blok prawy: tabela z nagłówkiem w thead

    Kryteria:

    R.2.9 Pierwszy wiersz tabeli jest wierszem nagłówkowym o zawartości: „Produkt”, „Jednostka”, „Dostępna ilość”, „Aktualizacja”, „Zamówienie”. Zastosowano znaczniki <th>

    ok. 2 min
    Polecenie z arkusza

    Zawartość bloku prawego: tabela o 5 wierszach i 5 kolumnach, z czego pierwszy wiersz zawiera komórki nagłówkowe. Zawartość jest zgodna z obrazem 2. Zawartość komórek nagłówkowych: „Produkt”, „Jednostka”, „Dostępna ilość”, „Aktualizacja”, „Zamówienie”

    Wiersz nagłówkowy w <thead>, wiersze z danymi trafią do <tbody>. Podział przydaje się skryptowi: tbody tr to dokładnie wiersze z materiałami, bez nagłówka. Atrybut scope="col" mówi czytnikowi ekranu, że komórka <th> jest nagłówkiem kolumny - przy każdej liczbie przeczyta wtedy „Dostępna ilość”.

    zamowienia.html HTML zmienione: 13 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  23. Krok 23: Wiersze 2-5: napisy z pliku tabela.txt

    Kryteria:

    R.2.8 W bloku prawym umieszczono tabelę o pięciu wierszach i pięciu kolumnach, zastosowano znaczniki <table>, <tr>, <td>

    ok. 4 min
    Polecenie z arkusza

    Zawartość komórek wierszy 2 ÷ 5: w trzech pierwszych kolumnach znajdują się napisy widoczne na obrazie 2, napisy należy skopiować z pliku tabela.txt wypakowanego z archiwum

    Każda linia tabela.txt to wiersz <tr> w <tbody>, każdy napis rozdzielony średnikiem - komórka <td>. Komórki nie mają identyfikatorów: skrypt znajdzie je po położeniu w wierszu. Plik jest w kodowaniu Windows-1250 - przy krzakach zmień kodowanie w edytorze przed kopiowaniem.

    zamowienia.html HTML zmienione: 28 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  24. Krok 24: Czwarta kolumna: przyciski „Aktualizuj”

    ok. 2 min
    Polecenie z arkusza

    w czwartej kolumnie znajdują się przyciski o treści „Aktualizuj”, wciśnięcie dowolnego przycisku powoduje wywołanie funkcji aktualizującej

    Przycisk dostaje type="button" - zwykły przycisk, który niczego nie wysyła (domyślny typ submit w formularzu przeładowałby stronę). Atrybut data-action="update" to własna etykieta: atrybuty zaczynające się od data- przeglądarka zostawia w spokoju, a skrypt wybierze po niej wszystkie przyciski aktualizujące jednym selektorem. Zamiast onclick z numerem wiersza w każdym przycisku - wywołanie funkcji przypnie skrypt.

    zamowienia.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  25. Krok 25: Piąta kolumna: przyciski „Zamów”

    Kryteria:

    R.2.10 W czwartej kolumnie umieszczono przyciski o treści "Aktualizuj" oraz w piątej kolumnie przyciski o treści "Zamów". Przycisków jest tyle, ile wierszy tabeli (nie licząc wiersza nagłówkowego)

    ok. 1 min
    Polecenie z arkusza

    w piątej kolumnie znajdują się przyciski o treści „Zamów”, wciśnięcie dowolnego przycisku powoduje wywołanie funkcji zamawiającej

    Tak samo, z etykietą data-action="order". Cztery przyciski każdego rodzaju, po jednym w wierszu.

    zamowienia.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  26. Krok 26: Stopka: odnośnik otwierany w nowej karcie

    Kryteria:

    R.3.2 Na stronie umieszczono odnośnik, którego kliknięcie inicjuje otwarcie strony http://sieci.pl/ w nowej karcie przeglądarki

    ok. 1 min
    Polecenie z arkusza

    Zawartość bloku stopki: Odnośnik do strony http://sieci.pl/ otwierany w nowej karcie przeglądarki i podpisany „Nasza strona internetowa”

    target="_blank" otwiera nową kartę, a rel="noopener noreferrer" odcina obcej stronie dostęp do karty, z której ją otwarto (window.opener), i nie przekazuje jej adresu strony źródłowej.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  27. Krok 27: Stopka: paragraf z autorem strony

    Kryteria:

    R.2.6 W bloku banera zapisano nagłówek h1: "Sieci komputerowe", w bloku lewym h2: "Aktualizacja i zamówienia materiałów" oraz paragraf: "Do wewnętrznego użytku firmy", w stopce paragraf z numerem zdającego

    ok. 1 min
    Polecenie z arkusza

    Paragraf o treści „Stronę przygotował: ”, dalej wstawiony numer zdającego

    Na egzaminie numer PESEL, w tym rozwiązaniu Bartosz Bryniarski.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  28. Etap 3: Styl CSS

    Kroki 28-38 · po tym etapie masz 30 z 41 kryteriów (pkt)

    Krok 28: Zmienne z kolorami i formatowanie domyślne

    Kryteria:

    R.4.1 Ustawiono formatowanie domyślne dla wszystkich selektorów CSS (*): krój czcionki Verdana, (czcionka Verdana jako pierwsza) wyrównanie tekstu do środka

    ok. 2 min
    Polecenie z arkusza

    Styl CSS zdefiniowany w całości w zewnętrznym pliku o nazwie styl4.css. Formatowanie domyślne dla wszystkich selektorów CSS: krój czcionki Verdana, wyrównanie tekstu do środka

    Trzy kolory z arkusza dostają nazwy w zmiennych CSS na :root (element <html>): --dark, --pale, --light. Reguły niżej odwołują się do nich przez var(--dark) - zmiana odcienia to jedna linia zamiast pięciu.

    Selektor * z krojem Verdana jako pierwszym (klucz R.4.1 tak wymaga) i zapasowym sans-serif, gdyby Verdany nie było w systemie, oraz wyśrodkowanie tekstu.

    styl4.css CSS nowy plik 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}
    Podgląd strony po tym kroku (zamowienia.html)

  29. Krok 29: Baner: tło DarkGreen, biały tekst, marginesy wewnętrzne

    ok. 1 min
    Polecenie z arkusza

    Dla bloku banera: kolor tła DarkGreen, biały kolor czcionki, marginesy wewnętrzne 5 px

    var(--dark) to DarkGreen ze zmiennej.

    styl4.css CSS zmienione: 6 linii 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}

header {
    background-color: var(--dark);
    color: white;
    padding: 5px;
}
    Podgląd strony po tym kroku (zamowienia.html)

  30. Krok 30: Bloki lewy i prawy obok siebie: siatka 30% i 70%

    Kryteria: ,

    R.3.1 Układ bloków po uruchomieniu strony w przeglądarce jest zgodny z Obrazem 2 w arkuszu egzaminacyjnym lub blok lewy jest krótszy o 100 px od prawego i jest widoczna przerwa między blokiem lewym a stopką (prawidłowo zastosowano właściwości CSS układające bloki na stronie, np. float albo display flex albo grid); clear:both w stopce nie jest wymagane

    R.4.4 Ustawiono szerokość 30% dla bloku lewego i 70% dla prawego (width lub grid- template-columns lub flex)

    ok. 2 min
    Polecenie z arkusza

    Podział zrealizowany za pomocą znaczników sekcji tak, aby wygląd układu bloków strony po uruchomieniu w przeglądarce, był zgodny z Obrazem 2

    display: grid zamienia <main> w siatkę, a grid-template-columns: 30% 70% dzieli ją na dwie kolumny o szerokościach z arkusza - pierwsza sekcja trafia do pierwszej kolumny, druga do drugiej. Szerokości stoją w jednym miejscu, nie na blokach; klucz przyjmuje je w tej postaci (R.4.4) i wymienia siatkę wśród sposobów ułożenia bloków (R.3.1). align-items: start zostawia każdą sekcję w jej własnej wysokości - bez tego obie rozciągnęłyby się do wysokości wyższej.

    Stopka leży za <main>, więc sama zaczyna się pod siatką - bez clear.

    styl4.css CSS zmienione: 6 linii 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}

header {
    background-color: var(--dark);
    color: white;
    padding: 5px;
}

main {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: start;
}
    Podgląd strony po tym kroku (zamowienia.html)

  31. Krok 31: Blok lewy: tło PaleGreen i wysokość

    ok. 1 min
    Polecenie z arkusza

    Dla bloku lewego: kolor tła PaleGreen, szerokość 30%, wysokość 500 px

    Szerokość 30% daje już kolumna siatki, w regule zostaje kolor i wysokość.

    styl4.css CSS zmienione: 5 linii 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}

header {
    background-color: var(--dark);
    color: white;
    padding: 5px;
}

main {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: start;
}

#left {
    background-color: var(--pale);
    height: 500px;
}
    Podgląd strony po tym kroku (zamowienia.html)

  32. Krok 32: Blok prawy: tło Honeydew, wysokość i margines górny

    ok. 1 min
    Polecenie z arkusza

    Dla bloku prawego: kolor tła Honeydew, szerokość 70%, wysokość 500 px, margines wewnętrzny górny 100 px

    padding-top: 100px dolicza się do wysokości: blok prawy ma 600 px, lewy 500 px - pod lewym zostaje przerwa przed stopką, którą klucz przyjmuje (R.3.1). Siatka sama ustawia wysokość wiersza według wyższego bloku.

    styl4.css CSS zmienione: 6 linii 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}

header {
    background-color: var(--dark);
    color: white;
    padding: 5px;
}

main {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: start;
}

#left {
    background-color: var(--pale);
    height: 500px;
}

#right {
    background-color: var(--light);
    height: 500px;
    padding-top: 100px;
}
    Podgląd strony po tym kroku (zamowienia.html)

  33. Krok 33: Stopka: tło PaleGreen i marginesy wewnętrzne

    ok. 1 min
    Polecenie z arkusza

    Dla stopki: kolor tła PaleGreen, marginesy wewnętrzne 3 px

    Bez clear - stopka i tak stoi pod siatką.

    styl4.css CSS zmienione: 5 linii 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}

header {
    background-color: var(--dark);
    color: white;
    padding: 5px;
}

main {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: start;
}

#left {
    background-color: var(--pale);
    height: 500px;
}

#right {
    background-color: var(--light);
    height: 500px;
    padding-top: 100px;
}

footer {
    background-color: var(--pale);
    padding: 3px;
}
    Podgląd strony po tym kroku (zamowienia.html)

  34. Krok 34: Tabela: obramowanie połączone, wyśrodkowanie, szerokość

    Kryteria: ,

    R.4.8 Ustawiono obramowanie połączone (border-collapse: collapse; lub border-spacing: 0) dla tabeli

    R.4.9 Ustawiono obramowanie o szerokości 1px linią ciągłą w kolorze DarkGreen dla tabeli i komórek tabeli

    ok. 2 min
    Polecenie z arkusza

    Wspólne dla selektorów tabeli i komórek tabeli (bez komórek nagłówkowych): obramowanie o szerokości 1 px linią ciągłą w kolorze DarkGreen, obramowanie połączone

    Selektory znaczników table, td (klucz nie uznaje klas), linia 1 px w kolorze ze zmiennej, border-collapse: collapse - jedna linia między komórkami.

    styl4.css CSS zmienione: 10 linii 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}

header {
    background-color: var(--dark);
    color: white;
    padding: 5px;
}

main {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: start;
}

#left {
    background-color: var(--pale);
    height: 500px;
}

#right {
    background-color: var(--light);
    height: 500px;
    padding-top: 100px;
}

footer {
    background-color: var(--pale);
    padding: 3px;
}

table, td {
    border: 1px solid var(--dark);
}

table {
    border-collapse: collapse;
    margin: auto;
    width: 95%;
}
    Podgląd strony po tym kroku (zamowienia.html)

  35. Krok 35: Tabela: marginesy automatyczne i szerokość 95%

    Kryteria: ,

    R.4.5 Ustawiono szerokość 95% dla selektora table

    R.4.6 Ustawiono marginesy zewnętrzne (margin) auto dla tabeli

    ok. 1 min
    Polecenie z arkusza

    Dodatkowo dla selektora tabeli: marginesy zewnętrzne automatycznie wyliczane przez przeglądarkę, szerokość 95%

    Ta sama reguła table z poprzedniego kroku ma już margin: auto i width: 95% - tabela stoi na środku bloku prawego. Wszystko, co dotyczy samej tabeli, jest w jednym miejscu.

    styl4.css CSS zmienione: 0 linii 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}

header {
    background-color: var(--dark);
    color: white;
    padding: 5px;
}

main {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: start;
}

#left {
    background-color: var(--pale);
    height: 500px;
}

#right {
    background-color: var(--light);
    height: 500px;
    padding-top: 100px;
}

footer {
    background-color: var(--pale);
    padding: 3px;
}

table, td {
    border: 1px solid var(--dark);
}

table {
    border-collapse: collapse;
    margin: auto;
    width: 95%;
}

    Podgląd strony bez zmian - taki jak po kroku 34.

  36. Krok 36: Komórki: marginesy wewnętrzne 20 px i 0

    ok. 1 min
    Polecenie z arkusza

    Wspólne dla selektorów komórki tabeli i komórki nagłówkowej: marginesy wewnętrzne górny i dolny 20 px, prawy i lewy 0

    padding: 20px 0 - góra i dół, potem boki.

    styl4.css CSS zmienione: 4 linie 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}

header {
    background-color: var(--dark);
    color: white;
    padding: 5px;
}

main {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: start;
}

#left {
    background-color: var(--pale);
    height: 500px;
}

#right {
    background-color: var(--light);
    height: 500px;
    padding-top: 100px;
}

footer {
    background-color: var(--pale);
    padding: 3px;
}

table, td {
    border: 1px solid var(--dark);
}

table {
    border-collapse: collapse;
    margin: auto;
    width: 95%;
}

td, th {
    padding: 20px 0;
}
    Podgląd strony po tym kroku (zamowienia.html)

  37. Krok 37: Przycisk: tło DarkGreen, biały tekst, marginesy wewnętrzne

    Kryteria: , ,

    R.4.2 Ustawiono kolor tła DarkGreen dla banera i przycisku, PaleGreen dla bloku lewego i stopki, Honeydew dla bloku prawego

    R.4.3 Ustawiono biały kolor czcionki dla banera i przycisku

    R.4.7 Ustawiono marginesy wewnętrzne (padding): 5px dla banera i przycisku, 3px dla stopki, górny i dolny 20px oraz prawy i lewy 0 dla selektorów td i th

    ok. 1 min
    Polecenie z arkusza

    Dla przycisku: kolor tła DarkGreen, biały kolor czcionki, marginesy wewnętrzne 5 px

    Do wymagań arkusza dochodzi cursor: pointer - kursor „rączki” nad przyciskiem, jak nad odnośnikiem.

    styl4.css CSS zmienione: 7 linii 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}

header {
    background-color: var(--dark);
    color: white;
    padding: 5px;
}

main {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: start;
}

#left {
    background-color: var(--pale);
    height: 500px;
}

#right {
    background-color: var(--light);
    height: 500px;
    padding-top: 100px;
}

footer {
    background-color: var(--pale);
    padding: 3px;
}

table, td {
    border: 1px solid var(--dark);
}

table {
    border-collapse: collapse;
    margin: auto;
    width: 95%;
}

td, th {
    padding: 20px 0;
}

button {
    background-color: var(--dark);
    color: white;
    padding: 5px;
    cursor: pointer;
}
    Podgląd strony po tym kroku (zamowienia.html)

  38. Krok 38: Przycisk pod kursorem i przy obsłudze klawiaturą

    Kryteria:

    R.4.10 W momencie, gdy kursor myszy znajdzie się na przycisku jego kolor tła zmienia się na Honeydew, a kolor czcionki na DarkGreen (np. za pomocą pseudoklasy hover)

    ok. 1 min
    Polecenie z arkusza

    W momencie, gdy kursor myszy znajdzie się na przycisku jego kolor tła zmienia się na Honeydew, a kolor czcionki na DarkGreen

    :hover z arkusza i drugi selektor :focus-visible - ten sam wygląd dostaje przycisk, do którego doszło się klawiszem Tab. Kto nie używa myszy, też widzi, który przycisk jest aktywny.

    styl4.css CSS zmienione: 6 linii 
    :root {
    --dark: DarkGreen;
    --pale: PaleGreen;
    --light: Honeydew;
}

* {
    font-family: Verdana, sans-serif;
    text-align: center;
}

header {
    background-color: var(--dark);
    color: white;
    padding: 5px;
}

main {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items: start;
}

#left {
    background-color: var(--pale);
    height: 500px;
}

#right {
    background-color: var(--light);
    height: 500px;
    padding-top: 100px;
}

footer {
    background-color: var(--pale);
    padding: 3px;
}

table, td {
    border: 1px solid var(--dark);
}

table {
    border-collapse: collapse;
    margin: auto;
    width: 95%;
}

td, th {
    padding: 20px 0;
}

button {
    background-color: var(--dark);
    color: white;
    padding: 5px;
    cursor: pointer;
}

button:hover,
button:focus-visible {
    background-color: var(--light);
    color: var(--dark);
}
    Podgląd strony po tym kroku (zamowienia.html)

  39. Etap 4: JavaScript

    Kroki 39-50 · po tym etapie masz 41 z 41 kryteriów (pkt)

    Krok 39: Funkcja zaznaczająca braki: pętla po wierszach tbody

    Kryteria:

    R.5.1 Skrypt zapisano językiem JavaScript i zawarto w nim przynajmniej jedną poprawną składniowo instrukcję języka

    ok. 4 min
    Polecenie z arkusza

    Funkcja zaznaczająca braki – obraz 3: Sprawdza wartości w kolumnie „Dostępna Ilość” dla każdego wiersza tabeli

    Skrypt na końcu <body>, w pliku strony - tam klucz sprawdza kryteria skryptu.

    • document.querySelectorAll("tbody tr") - wszystkie wiersze z danymi, bez nagłówka; dopisanie materiału do tabeli nie wymaga zmiany liczby w pętli,
    • for (const row of …) - pętla for…of przechodzi po kolejnych elementach listy bez licznika,
    • row.cells[2] - trzecia komórka wiersza (liczenie od zera), czyli „Dostępna ilość”,
    • Number(cell.textContent) - tekst komórki zamieniony na liczbę.

    const dla zmiennych, które się nie zmieniają: przypadkowe przypisanie zgłosi błąd, zamiast po cichu zepsuć wynik.

    zamowienia.html HTML zmienione: 8 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                const quantity = Number(cell.textContent);
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  40. Krok 40: Ilość 0: kolor czerwony

    Kryteria:

    R.5.3 Do sprawdzenia braków zastosowano instrukcję warunkową sprawdzającą, czy wartość jest równa 0 lub jest z przedziału <1, 5>

    ok. 2 min
    Polecenie z arkusza

    Jeżeli wartość jest równa 0, tło tej komórki zmienione jest na czerwone

    Wybór koloru dostaje własną funkcję shortageColor: dostaje liczbę, zwraca nazwę koloru. Porównanie === sprawdza wartość i typ - "0" === 0 to fałsz, więc tekst nie przejdzie jako liczba po cichu (R.5.3).

    zamowienia.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                const quantity = Number(cell.textContent);
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  41. Krok 41: Ilość od 1 do 5: kolor żółty

    ok. 2 min
    Polecenie z arkusza

    Jeżeli wartość jest z przedziału <1, 5>, tło tej komórki zmienione jest na żółte

    Przedział domknięty: >= i <=. Po return funkcja się kończy, więc drugi if nie potrzebuje else - sprawdza się tylko wtedy, gdy wartość nie była zerem.

    zamowienia.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
            if (quantity >= 1 && quantity <= 5) {
                return "yellow";
            }
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                const quantity = Number(cell.textContent);
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  42. Krok 42: Pozostałe ilości: Honeydew i wpis koloru do komórki

    ok. 2 min
    Polecenie z arkusza

    W każdym innym przypadku tło komórki jest koloru Honeydew

    Ostatni return obsługuje wszystkie pozostałe wartości. Funkcja zaznaczająca nie ma już żadnych warunków - ustawia tło komórki na to, co zwróci shortageColor (zmiana w następnym kroku). Kolor zostaje we właściwości style.backgroundColor: arkusz każe zmieniać tło komórki, a klasa CSS z kolorem wymagałaby dodatkowych reguł w styl4.css, których arkusz nie wymienia.

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
            if (quantity >= 1 && quantity <= 5) {
                return "yellow";
            }
            return "Honeydew";
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                const quantity = Number(cell.textContent);
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  43. Krok 43: Start skryptu: numer zamówienia i zaznaczenie braków

    ok. 2 min
    Polecenie z arkusza

    Na początku działania skryptu jest wywoływana funkcja zaznaczająca braki oraz zainicjowana jest wartością 0 zmienna przechowująca id zamówienia

    let orderId = 0 na początku skryptu - let, bo numer będzie rósł. Funkcja zaznaczająca wpisuje teraz tło komórki: cell.style.backgroundColor = shortageColor(…). Jej wywołanie stoi na samym końcu skryptu, pod wszystkimi definicjami i przypięciem przycisków, więc wykonuje się od razu po wczytaniu strony. Podgląd: „2” przy skrętce linkowej na żółto.

    zamowienia.html HTML zmienione: 3 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;

        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
            if (quantity >= 1 && quantity <= 5) {
                return "yellow";
            }
            return "Honeydew";
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                cell.style.backgroundColor = shortageColor(Number(cell.textContent));
            }
        }
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  44. Krok 44: Wywołanie zaznaczania przy wczytaniu strony

    ok. 1 min
    Polecenie z arkusza

    Na początku działania skryptu jest wywoływana funkcja zaznaczająca braki oraz zainicjowana jest wartością 0 zmienna przechowująca id zamówienia

    markShortages() jako ostatnia instrukcja skryptu - komórki dostają kolory zaraz po wczytaniu tabeli, bez kliknięcia.

    zamowienia.html HTML zmienione: 2 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;

        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
            if (quantity >= 1 && quantity <= 5) {
                return "yellow";
            }
            return "Honeydew";
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                cell.style.backgroundColor = shortageColor(Number(cell.textContent));
            }
        }

        markShortages();
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  45. Krok 45: Funkcja aktualizująca przypięta do przycisków

    Kryteria: ,

    R.3.3 Dla przynajmniej jednego przycisku do aktualizacji zdefiniowano obsługę zdarzenia kliknięcia (atrybut onClick lub słuchacz zdarzenia click lub właściwość onclick obiektu DOM)

    R.5.2 Zapisano w skrypcie przynajmniej jedną funkcję, która jest przypisana do kliknięcia przycisku oraz zainicjowano wartością 0 zmienną przechowującą id zamówienia

    ok. 3 min
    Polecenie z arkusza

    Funkcja aktualizująca – obraz 4: Wywoływana po przyciśnięciu przycisku w danym wierszu tabeli

    Funkcja updateQuantity przyjmuje cały wiersz tabeli, a nie jego numer. Pod nią pętla po wszystkich przyciskach z data-action="update":

    • addEventListener("click", …) - nasłuchiwacz zdarzenia kliknięcia, przypięty z poziomu skryptu (klucz przyjmuje go zamiast atrybutu onclick - R.3.3),
    • () => updateQuantity(…) - funkcja strzałkowa wywoływana przy kliknięciu,
    • button.closest("tr") - najbliższy wiersz <tr>, w którym leży przycisk: przycisk sam wie, którego wiersza dotyczy.

    Funkcja jest przypisana do kliknięcia, a zmienna z numerem zamówienia ustawiona na 0 (R.5.2).

    zamowienia.html HTML zmienione: 7 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;

        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
            if (quantity >= 1 && quantity <= 5) {
                return "yellow";
            }
            return "Honeydew";
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                cell.style.backgroundColor = shortageColor(Number(cell.textContent));
            }
        }

        function updateQuantity(row) {
        }

        for (const button of document.querySelectorAll('button[data-action="update"]')) {
            button.addEventListener("click", () => updateQuantity(button.closest("tr")));
        }

        markShortages();
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  46. Krok 46: Okno „Podaj nową ilość:” i przycisk Anuluj

    Kryteria:

    R.5.5 Do aktualizacji wyświetlono okno prompt i pobrano z niego wartość

    ok. 2 min
    Polecenie z arkusza

    Wyświetla okno z polem do wpisania wartości, podpisane: „Podaj nową ilość:”

    prompt z napisem z arkusza (R.5.5). Po kliknięciu Anuluj okno zwraca null - wtedy funkcja kończy się od razu i tabela zostaje bez zmian (w wersji podstawowej Anuluj czyścił komórkę i barwił ją na czerwono).

    zamowienia.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;

        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
            if (quantity >= 1 && quantity <= 5) {
                return "yellow";
            }
            return "Honeydew";
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                cell.style.backgroundColor = shortageColor(Number(cell.textContent));
            }
        }

        function updateQuantity(row) {
            const answer = prompt("Podaj nową ilość:");
            if (answer === null) {
                return;
            }
        }

        for (const button of document.querySelectorAll('button[data-action="update"]')) {
            button.addEventListener("click", () => updateQuantity(button.closest("tr")));
        }

        markShortages();
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  47. Krok 47: Sprawdzenie i wpis nowej ilości do wiersza

    Kryteria:

    R.5.6 Po wciśnięciu przycisku do aktualizacji w dowolnym wierszu tabeli i wprowadzeniu wartości, jest ona widoczna w kolumnie "Dostępna ilość" tego wiersza

    ok. 3 min
    Polecenie z arkusza

    Podaną w oknie wartość wpisuje do odpowiedniego wiersza, kolumny „Dostępna ilość”

    Najpierw sprawdzenie: trim() zdejmuje spacje z brzegów, a pusty napis, wartość nie będąca liczbą całkowitą (Number.isInteger daje fałsz dla NaN i ułamków) albo liczba ujemna kończą się komunikatem bez zmian w tabeli.

    Potem wpis do trzeciej komórki tego wiersza przez textContent - wartość zawsze zostaje tekstem, nigdy kodem HTML. Sprawdzone w Chrome: 0 przy skrętce drucianej pojawia się w kolumnie „Dostępna ilość” (R.5.6), a „abc” albo <img onerror> kończą się komunikatem i niczego nie zmieniają.

    zamowienia.html HTML zmienione: 6 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;

        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
            if (quantity >= 1 && quantity <= 5) {
                return "yellow";
            }
            return "Honeydew";
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                cell.style.backgroundColor = shortageColor(Number(cell.textContent));
            }
        }

        function updateQuantity(row) {
            const answer = prompt("Podaj nową ilość:");
            if (answer === null) {
                return;
            }
            const quantity = Number(answer.trim());
            if (answer.trim() === "" || !Number.isInteger(quantity) || quantity < 0) {
                alert("Ilość musi być liczbą całkowitą, co najmniej 0");
                return;
            }
            row.cells[2].textContent = quantity;
        }

        for (const button of document.querySelectorAll('button[data-action="update"]')) {
            button.addEventListener("click", () => updateQuantity(button.closest("tr")));
        }

        markShortages();
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  48. Krok 48: Ponowne zaznaczenie braków po aktualizacji

    Kryteria:

    R.5.4 Przy załadowaniu strony oraz po aktualizacji wartości w tabeli, komórka zawierająca ilość ma tło czerwone, gdy wartość w niej jest równa 0 lub tło żółte, gdy wartość jest z przedziału <1, 5> lub Honeydew w innych przypadkach, należy sprawdzić w przeglądarce wszystkie stany

    ok. 1 min
    Polecenie z arkusza

    Wywołuje funkcję zaznaczającą braki

    Po zmianie wartości kolory liczą się od nowa: 0 daje tło czerwone, liczby 1-5 żółte, pozostałe Honeydew - sprawdzone w Chrome dla 0, 1, 5, 6 i 20 (R.5.4).

    zamowienia.html HTML zmienione: 1 linia 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;

        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
            if (quantity >= 1 && quantity <= 5) {
                return "yellow";
            }
            return "Honeydew";
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                cell.style.backgroundColor = shortageColor(Number(cell.textContent));
            }
        }

        function updateQuantity(row) {
            const answer = prompt("Podaj nową ilość:");
            if (answer === null) {
                return;
            }
            const quantity = Number(answer.trim());
            if (answer.trim() === "" || !Number.isInteger(quantity) || quantity < 0) {
                alert("Ilość musi być liczbą całkowitą, co najmniej 0");
                return;
            }
            row.cells[2].textContent = quantity;
            markShortages();
        }

        for (const button of document.querySelectorAll('button[data-action="update"]')) {
            button.addEventListener("click", () => updateQuantity(button.closest("tr")));
        }

        markShortages();
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  49. Krok 49: Funkcja zamawiająca: kolejny numer zamówienia

    Kryteria:

    R.5.7 Realizacja zamówienia powoduje zwiększenie id zamówienia o 1

    ok. 1 min
    Polecenie z arkusza

    Funkcja zamawiająca – obraz 5: Zwiększa o jeden id zamówienia

    orderId++ zwiększa zmienną zadeklarowaną na początku skryptu - pamięta ona numer między kliknięciami (R.5.7).

    zamowienia.html HTML zmienione: 4 linie 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;

        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
            if (quantity >= 1 && quantity <= 5) {
                return "yellow";
            }
            return "Honeydew";
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                cell.style.backgroundColor = shortageColor(Number(cell.textContent));
            }
        }

        function updateQuantity(row) {
            const answer = prompt("Podaj nową ilość:");
            if (answer === null) {
                return;
            }
            const quantity = Number(answer.trim());
            if (answer.trim() === "" || !Number.isInteger(quantity) || quantity < 0) {
                alert("Ilość musi być liczbą całkowitą, co najmniej 0");
                return;
            }
            row.cells[2].textContent = quantity;
            markShortages();
        }

        function placeOrder(row) {
            orderId++;
        }

        for (const button of document.querySelectorAll('button[data-action="update"]')) {
            button.addEventListener("click", () => updateQuantity(button.closest("tr")));
        }

        markShortages();
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  50. Krok 50: Komunikat zamówienia i przypięcie przycisków „Zamów”

    Kryteria: , ,

    R.3.4 Dla przynajmniej jednego przycisku do zamawiania zdefiniowano obsługę zdarzenia kliknięcia (atrybut onClick lub słuchacz zdarzenia click lub właściwość onclick obiektu DOM)

    R.5.8 Po wciśnięciu dowolnego przycisku do zamawiania wyświetlany jest komunikat o treści: „Zamówienie nr: <id zamówienia> Produkt: <nazwa produktu>”. Pola zapisane w <> wypełniane są kolejno wartością id zamówienia oraz nazwą produktu z kolumny „Produkt” danego wiersza tabeli

    R.5.9 Komunikat o złożeniu zamówienia wyświetlany jest w oknie alert

    ok. 3 min
    Polecenie z arkusza

    Wyświetla komunikat o treści: „Zamówienie nr: <id zamówienia> Produkt: <nazwa produktu>”. Pola zapisane w <> wypełniane są automatycznie wartością id_zamowienia oraz nazwą produktu z kolumny „Produkt” danego wiersza tabeli

    Nazwa produktu to pierwsza komórka wiersza (cells[0]). Komunikat składa szablon tekstowy w odwróconych apostrofach: ${orderId} i ${product} wstawiają wartości w miejsce znaczników, a spacje stoją tam, gdzie widać je w napisie - nie da się ich zgubić między plusami. Druga pętla przypina placeOrder do przycisków „Zamów” (R.3.4).

    Sprawdzone w Chrome: dwa kliknięcia przy skrętce drucianej dają „Zamówienie nr: 1 Produkt: Skrętka U/UTP drut” i „Zamówienie nr: 2 Produkt: Skrętka U/UTP drut” - obraz 5 (R.5.8, R.5.9).

    zamowienia.html HTML zmienione: 5 linii 
    <!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Zamówienia hurtowe</title>
    <link rel="stylesheet" href="styl4.css">
</head>
<body>
    <header>
        <h1>Sieci komputerowe</h1>
    </header>
    <main>
        <section id="left">
            <h2>Aktualizacja i zamówienia materiałów</h2>
            <p>Do wewnętrznego użytku firmy</p>
            <img src="obraz.png" alt="sieć komputerowa" width="300" height="376">
        </section>
        <section id="right">
            <table>
                <thead>
                    <tr>
                        <th scope="col">Produkt</th>
                        <th scope="col">Jednostka</th>
                        <th scope="col">Dostępna ilość</th>
                        <th scope="col">Aktualizacja</th>
                        <th scope="col">Zamówienie</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Skrętka U/UTP drut</td>
                        <td>metr</td>
                        <td>20</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Skrętka U/UTP linka</td>
                        <td>metr</td>
                        <td>2</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Wtyki 8P8C</td>
                        <td>sztuki</td>
                        <td>10</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                    <tr>
                        <td>Moduły Keystone</td>
                        <td>sztuki</td>
                        <td>30</td>
                        <td><button type="button" data-action="update">Aktualizuj</button></td>
                        <td><button type="button" data-action="order">Zamów</button></td>
                    </tr>
                </tbody>
            </table>
        </section>
    </main>
    <footer>
        <a href="http://sieci.pl/" target="_blank" rel="noopener noreferrer">Nasza strona internetowa</a>
        <p>Stronę przygotował: Bartosz Bryniarski</p>
    </footer>
    <script>
        let orderId = 0;

        function shortageColor(quantity) {
            if (quantity === 0) {
                return "red";
            }
            if (quantity >= 1 && quantity <= 5) {
                return "yellow";
            }
            return "Honeydew";
        }

        function markShortages() {
            for (const row of document.querySelectorAll("tbody tr")) {
                const cell = row.cells[2];
                cell.style.backgroundColor = shortageColor(Number(cell.textContent));
            }
        }

        function updateQuantity(row) {
            const answer = prompt("Podaj nową ilość:");
            if (answer === null) {
                return;
            }
            const quantity = Number(answer.trim());
            if (answer.trim() === "" || !Number.isInteger(quantity) || quantity < 0) {
                alert("Ilość musi być liczbą całkowitą, co najmniej 0");
                return;
            }
            row.cells[2].textContent = quantity;
            markShortages();
        }

        function placeOrder(row) {
            orderId++;
            const product = row.cells[0].textContent;
            alert(`Zamówienie nr: ${orderId} Produkt: ${product}`);
        }

        for (const button of document.querySelectorAll('button[data-action="update"]')) {
            button.addEventListener("click", () => updateQuantity(button.closest("tr")));
        }
        for (const button of document.querySelectorAll('button[data-action="order"]')) {
            button.addEventListener("click", () => placeOrder(button.closest("tr")));
        }

        markShortages();
    </script>
</body>
</html>
    Podgląd strony po tym kroku (zamowienia.html)

  51. Etap 5: Porównanie z wersją podstawową

    Krok 51 · po tym etapie masz 41 z 41 kryteriów (pkt)

    Krok 51: Co jest inaczej i którą wersję wybrać na egzaminie

    ok. 3 min

    Obie wersje dają komplet 41 punktów. Różnice:

    wersja podstawowawersja nowoczesna
    układfloat: left sekcji, clear stopki<main> z grid-template-columns: 30% 70%
    kolorywpisane w każdej regulezmienne --dark, --pale, --light
    tabelawiersze wprost w <table><thead> i <tbody>, scope="col"
    przyciskionclick="updateQuantity(1)" w każdymdata-action i addEventListener w pętli
    skąd skrypt zna wiersznumer w atrybucie i identyfikatory quantity1…product4closest("tr") i cells[n]
    kolorowaniedrabinka if / else if / else w pętlifunkcja shortageColor zwracająca kolor
    wpis do komórkiinnerHTML (wykonuje wstrzyknięty HTML)textContent
    Anuluj w oknieczyści komórkę, tło czerwonenic się nie zmienia
    tekst w oknietrafia do kolumny ilościkomunikat, wartość bez zmian
    komunikatsklejanie +szablon tekstowy ${…}
    odnośniktarget="_blank"do tego rel="noopener noreferrer"
    przycisk:hover:hover i :focus-visible, kursor „rączki”

    Na egzaminie wersja podstawowa trzyma się metod z tabeli 1 arkusza i łatwiej ją napisać bez dokumentacji. Nowoczesna działa bez zmian po dopisaniu kolejnego materiału, nie psuje tabeli po kliknięciu Anuluj i nie wykonuje kodu wpisanego w okno - a klucz przyjmuje obie.

    Podgląd strony bez zmian - taki jak po kroku 50.

  52. Etap 6: Oddanie pracy

    Krok 52 · po tym etapie masz 41 z 41 kryteriów (pkt)

    Krok 52: Plik przeglądarka.txt i nagranie płyty

    ok. 5 min
    Polecenie z arkusza

    Po zakończeniu pracy utwórz w folderze z numerem, którym został podpisany arkusz, plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowałeś poprawność działania witryny. Nagraj płytę z rezultatami pracy.

    W przeglądarka.txt nazwa przeglądarki. W folderze z numerem zdającego: grants.png, import.jpg, kw1.png - kw4.png, kwerendy.txt, obraz.png, przeglądarka.txt, styl4.css i zamowienia.html. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.

    przeglądarka.txt Tekst nowy plik 
    Google Chrome

    Podgląd strony bez zmian - taki jak po kroku 50.

Podgląd

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: . 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.

Potwierdzenie

Informacja