To drugi sposób rozwiązania tego samego arkusza. Wynik jest ten sam - baza klienci z czterema zapytaniami, plakietka z przezroczystym tłem i strona rejestracja.html z trzema zakładkami formularza, paskiem postępu i danymi wypisywanymi w konsoli - i tak samo spełnia każde kryterium klucza. Inna jest droga:
grid-template-areas stawia blok boczny obok banera, bloku głównego i paska postępu, a szerokości 25% i 73% stoją w grid-template-columns (klucz R.4.5 przyjmuje je wprost). Kod HTML ma kolejność treści - baner, formularz, pasek, promocje, stopka,active: skrypt przestawia klasę, a o wyglądzie decyduje arkusz stylów,<label> wewnątrz akapitów z arkusza i pasek postępu opisany dla czytników ekranu,const, querySelectorAll, stałe zamiast „magicznych liczb”,JOIN ... ON, warunek na datę jako zakres i nieujemny typ kolumny.Na końcu krótkie porównanie z wersją podstawową (zakładka obok). Baza i grafika pochodzą z prawdziwego archiwum pliki8, zapytania zostały wykonane na tej bazie w MariaDB z XAMPP-a, a skrypt jest sprawdzony w prawdziwej przeglądarce Chrome: przełączanie zakładek, szerokości paska po kolejnych polach, napis w konsoli i położenie bloków.
Jak liczą się punkty. Klucz ma 43 kryteria (R.1.1 - R.5.9), każde za 1 punkt. Próg zdania to 75%, czyli 33 punkty. Przy każdym kroku jest napisane, które kryteria spełnia.
Kroki 1-7 · po tym etapie masz 6 z 43 kryteriów (pkt)
Utwórz bazę danych o nazwie klienci, z zestawem polskich znaków (np. utf8_unicode_ci)
Archiwum pliki8.zip rozpakuj hasłem _Rejestr@cja_ (podkreślenia na obu końcach, małpa zamiast „a”) do folderu z numerem zdającego. W phpMyAdmin Nowa → klienci, porównywanie utf8_unicode_ci, albo zapytaniem:
CREATE DATABASE klienci CHARACTER SET utf8 COLLATE utf8_unicode_ci;
Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum
Zaznaczona baza klienci, Import → baza.sql. Trzy tabele z obrazu 1: osoby (7 osób z datą urodzenia dataUr) oraz adresy i telefony - obie z kluczem obcym Osoby_id, który wskazuje właściciela. Jedna osoba może mieć kilka adresów i kilka telefonów, dlatego są to osobne tabele (relacja jeden do wielu).
Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG i nazwij import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Cały ekran z paskiem zadań, w PNG. Zrzuty zapytań idą później do JPEG (kw1.jpg - kw4.jpg).
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie imiona i nazwiska osób urodzonych po 2000 roku
SELECT imie, nazwisko - tylko dwa pola, jak każe polecenie,WHERE dataUr >= '2001-01-01' - „po 2000 roku” to od 1 stycznia 2001. Warunek zapisany jako początek zakresu czyta się wprost („od tego dnia”) i działa na samej kolumnie, więc baza może użyć indeksu na dataUr. YEAR(dataUr) > 2000 daje ten sam wynik, ale liczy funkcję dla każdego wiersza.Każda klauzula w osobnej linii - przy dłuższych zapytaniach od razu widać, co jest warunkiem, a co listą pól. Wynik: Anna Kowalewska, Ewa Kowalska, Andrzej Nowak, jak w kluczu. Zapytania zapisz w kwerendy.txt, zrzut jako kw1.jpg.
dataUr >= '2000-01-01' łapie też osoby urodzone w 2000 roku - a te nie są urodzone „po 2000 roku”.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT imie, nazwisko
FROM osoby
WHERE dataUr >= '2001-01-01';
Zapytanie 2: wybierające nazwy miast, z których pochodzą klienci posortowane alfabetycznie rosnąco. Nazwy miast nie mogą się powtarzać
DISTINCT usuwa powtórzenia (Poznań i Warszawa są w adresach po dwa razy), ORDER BY miasto ASC sortuje rosnąco - ASC jest domyślne, ale zapisane wprost mówi czytającemu, że kierunek jest zamierzony. Polskie litery sortują się poprawnie dzięki porównywaniu utf8_unicode_ci tabeli. Wynik: Kraków, Poznań, Warszawa, Wrocław. Zrzut: kw2.jpg.
kwerendy.txt Tekst zmienione: 5 linii -- Zapytanie 1
SELECT imie, nazwisko
FROM osoby
WHERE dataUr >= '2001-01-01';
-- Zapytanie 2
SELECT DISTINCT miasto
FROM adresy
ORDER BY miasto ASC;
Zapytanie 3: wybierające jedynie imiona i nazwiska osób oraz odpowiadające im numery telefonów. Należy posłużyć się relacją
o (osoby) i t (telefony) - przy każdej kolumnie widać, skąd pochodzi. Przy numer to konieczne: kolumna o tej nazwie jest też w adresy,JOIN telefony AS t ON t.Osoby_id = o.id - relacja: do osoby dołączany jest każdy jej telefon; warunek złączenia stoi przy złączeniu, a nie w WHERE,ORDER BY o.nazwisko, o.imie - dodatek: oba numery jednej osoby stoją obok siebie. Bez ORDER BY kolejność wierszy zależy od planu zapytania i może się zmienić.Wynik: 9 wierszy - Anna Kowalewska i Anna Nowak po dwa razy, bo mają po dwa numery (jak w kluczu). Zrzut: kw3.jpg.
kwerendy.txt Tekst zmienione: 6 linii -- Zapytanie 1
SELECT imie, nazwisko
FROM osoby
WHERE dataUr >= '2001-01-01';
-- Zapytanie 2
SELECT DISTINCT miasto
FROM adresy
ORDER BY miasto ASC;
-- Zapytanie 3
SELECT o.imie, o.nazwisko, t.numer
FROM osoby AS o
JOIN telefony AS t ON t.Osoby_id = o.id
ORDER BY o.nazwisko, o.imie;
Zapytanie 4: Dodające kolumnę numerMieszkania typu całkowitego, do tabeli Adresy po kolumnie numer
ALTER TABLE adresy - zmiana struktury tabeli (w bazie nazwa jest małą literą, arkusz pisze „Adresy”),ADD COLUMN numerMieszkania SMALLINT UNSIGNED NULL - typ całkowity dobrany do danych: numer mieszkania nie bywa ujemny ani większy niż 65 535, więc SMALLINT UNSIGNED (2 bajty) wystarcza. NULL zapisane wprost: dom jednorodzinny nie ma numeru mieszkania, a istniejące adresy dostaną w tej kolumnie NULL,AFTER numer - miejsce kolumny: zaraz po numer, a nie na końcu tabeli.Klucz przyjmuje dowolny typ całkowity - INT z wersji podstawowej jest tak samo poprawny. Na zrzucie kw4.jpg struktura tabeli: id, Osoby_id, ulica, numer, numerMieszkania, miasto.
Bez AFTER numer kolumna trafia na koniec tabeli, za miasto.
kwerendy.txt Tekst zmienione: 4 linie -- Zapytanie 1
SELECT imie, nazwisko
FROM osoby
WHERE dataUr >= '2001-01-01';
-- Zapytanie 2
SELECT DISTINCT miasto
FROM adresy
ORDER BY miasto ASC;
-- Zapytanie 3
SELECT o.imie, o.nazwisko, t.numer
FROM osoby AS o
JOIN telefony AS t ON t.Osoby_id = o.id
ORDER BY o.nazwisko, o.imie;
-- Zapytanie 4
ALTER TABLE adresy
ADD COLUMN numerMieszkania SMALLINT UNSIGNED NULL AFTER numer;
Kroki 8-30 · po tym etapie masz 20 z 43 kryteriów (pkt)
Plik obraz.jpg wypakowany z archiwum należy skadrować, tak aby była widoczna tylko niebieska plakietka z pętelką (patrz obraz 2), ustawić tło przezroczyste oraz przeskalować z zachowaniem proporcji do wysokości 200 px. Obraz zapisać pod tą samą nazwą w formacie PNG
Grafika jest taka sama jak w wersji podstawowej. W GIMP-ie:
Podgląd: oryginał i gotowa plakietka na szachownicy, która pokazuje przezroczyste miejsca.
Zapis do JPEG - przezroczyste tło zamienia się na białe, a klucz wymaga przezroczystości.
Składa się ze strony o nazwie rejestracja.html zapisanej w języku HTML5
Deklaracja <!DOCTYPE html> i szkielet z sekcjami head i body. Strona nie ma PHP, więc otwiera się ją prosto z folderu.
rejestracja.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Ustawiony język zawartości strony na polski
lang="pl" w <html> - przeglądarka wie, jakiego słownika użyć do sprawdzania pisowni w polach, a czytnik ekranu - jak wymawiać tekst.
rejestracja.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków
<meta charset="UTF-8"> jako pierwszy element <head> (z deklaracją HTML5, językiem i nazwą pliku to R.2.2). Obok viewport - telefon nie pomniejsza wtedy strony do rozmiaru ekranu komputera.
rejestracja.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">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Sklep - rejestracja”
<title> w <head>.
rejestracja.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>Sklep - rejestracja</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony
<link rel="stylesheet" href="styl.css"> - całe formatowanie pochodzi z tego pliku, bez atrybutów style w HTML-u.
Klucz odbiera R.3.8 także wtedy, gdy choć jeden selektor nie trafia w blok (np. kropka zamiast #).
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
</body>
</html>Podział strony na blok boczny i obok niego bloki: baner, główny, blok paska postępu oraz na dole blok stopki. Podział zrealizowany wyłącznie za pomocą semantycznych znaczników sekcji języka HTML 5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z obrazem 2
Baner <header>, blok główny <main>, pasek postępu <section id="progress">, blok boczny z promocjami <aside> (treść poboczna wobec formularza), stopka <footer> (R.2.4). Kolejność w kodzie to kolejność treści: nagłówek strony, formularz, jego postęp, potem promocje. Tak czyta stronę czytnik ekranu i tak ułoży ją telefon. W wersji podstawowej <aside> musiał stać pierwszy, bo float układa bloki w kolejności z kodu; siatka CSS umieści każdy blok w jego miejscu niezależnie od kolejności.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
</main>
<section id="progress">
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>Zawartość bloku bocznego: Obraz o nazwie obraz.png z tekstem alternatywnym „promocje”
Obraz z przezroczystym tłem - na niebieskim bloku plakietka nie ma białego prostokąta wokół.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
</aside>
<footer>
</footer>
</body>
</html>Nagłówek drugiego stopnia o treści „Sprawdź promocje”
<h2> pod obrazem.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
</aside>
<footer>
</footer>
</body>
</html>Tabela, której pierwszy wiersz jest złożony z komórek nagłówkowych, wypełniona treściami widocznymi na obrazie 3
Pierwszy wiersz z komórkami <th> („co?”, „ile taniej?”) w <thead>, wiersze z danymi w <tbody>. scope="col" mówi, że nagłówek opisuje kolumnę - czytnik ekranu przy „15%” przeczyta „ile taniej?”. Klucz wymaga table, tr, th i td - są wszystkie (R.2.7).
rejestracja.html HTML zmienione: 18 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
</header>
<main>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Zawartość banera: Nagłówek pierwszego stopnia o treści „Zarejestruj się w sklepie”
<h1> w banerze - pierwszy nagłówek w kodzie strony, bo baner stoi teraz na początku <body>.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Zawartość bloku głównego: Trzy przyciski o treściach: „Klient”, „Adres”, „Kontakt”, wciśnięcie dowolnego z nich wywołuje funkcję aktywującą kolejno blok pierwszy, drugi, trzeci
Trzy <button> z type="button" - przycisk niczego nie wysyła, tylko przełącza. Atrybut data-tab niesie identyfikator zakładki, którą przycisk pokaże: skrypt odczyta go przez dataset.tab, więc w HTML-u nie ma wywołań funkcji. Klucz R.2.8 ocenia treść przycisków.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Blok pierwszy z kontrolkami: Paragraf „Imię”, następnie pole edycyjne z podpowiedzią „Wpisz dane...”
<div> z klasą tab (wspólny wygląd) i identyfikatorem client. Druga klasa, active, oznacza zakładkę widoczną - pierwszą od początku. Którą klasę ukrywa arkusz stylów, a którą pokazuje, ustali CSS,<label for="firstName"> - napis jest powiązany z polem: kliknięcie „Imię” ustawia kursor w polu, a czytnik ekranu przy wejściu w pole przeczyta jego podpis,placeholder - szara podpowiedź znikająca po wpisaniu tekstu. Nie zastępuje podpisu, dlatego jest i jedno, i drugie.rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
</div>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Paragraf „Nazwisko”, następnie pole edycyjne
Ten sam wzór: akapit z <label> i pole tekstowe.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
</div>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Paragraf „Data urodzenia”, następnie pole edycyjne typu daty
Pole type="date" - przeglądarka pokazuje maskę dd.mm.rrrr i kalendarz (obraz 2), a wartość pola zawsze ma postać RRRR-MM-DD, niezależnie od wyświetlania (widać to w konsoli na obrazie 6). Pierwszy blok ma komplet: dwa pola tekstowe, pole daty i podpowiedź (R.3.2).
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Blok drugi z kontrolkami: Paragraf „Ulica”, następnie pole edycyjne
Druga zakładka (id="address") - bez klasy active. Na razie wszystkie bloki są widoczne jeden pod drugim, ukryje je arkusz stylów.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
</div>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Paragraf „Numer”, następnie pole edycyjne typu numerycznego
Pole type="number" ze strzałkami. min="1" - numer domu nie bywa zerem ani liczbą ujemną, więc strzałka w dół zatrzyma się na 1, a przeglądarka oznaczy niepoprawną wartość. Walidacji w skrypcie nie ma (arkusz każe ją pominąć) - to tylko podpowiedź w samym polu.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
</div>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Paragraf „Miasto”, następnie pole edycyjne
Drugi blok ma komplet z R.3.3: dwa pola tekstowe i jedno liczbowe.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Blok trzeci z kontrolkami: Paragraf „Numer komórkowy”, następnie pole edycyjne typu numeru telefonu
Trzecia zakładka (id="contact"), pole type="tel" - telefon otwiera przy nim klawiaturę numeryczną, a autocomplete="tel" pozwala przeglądarce podpowiedzieć zapisany numer. Każdy z trzech bloków ma już pole i podpis w akapicie (R.2.9).
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
</div>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Pole wyboru podpisane „Akceptuję RODO”
Pole wyboru type="checkbox" stoi wewnątrz <label> - podpis i pole są powiązane bez for/id, a klikalny jest cały napis. Akapit przenosi zgodę do nowej linii pod telefonem (obraz 5), bez <br>. Trzeci blok ma pole tel i pole wyboru (R.3.4).
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
</div>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Przycisk „Zatwierdź dane”, którego kliknięcie powoduje wywołanie funkcji zatwierdzającej
Przycisk z identyfikatorem confirm - po nim skrypt podepnie funkcję zatwierdzającą. Też type="button": dane trafiają do konsoli, nie do serwera.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Zawartość paska postępu: pusty blok (sekcja)
W sekcji progress pusta sekcja bar - granatowy pasek, którego szerokość zmieni skrypt. Blok jest pusty, ale czytnik ekranu i tak go rozpozna: role="progressbar" z aria-valuemin, aria-valuemax i aria-valuenow mówi czytnikowi ekranu, że to wskaźnik postępu i ile wynosi (na start 4). Skrypt będzie aktualizował aria-valuenow razem z szerokością.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
<section id="bar" role="progressbar" aria-label="Postęp rejestracji"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"></section>
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
</footer>
</body>
</html>Zawartość stopki: nagłówek czwartego stopnia o treści: „Rejestrację do sklepu wykonał: ”, dalej wstawiony numer zdającego
<h4>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL), tu stoi autor rozwiązania. Komplet nagłówków h1, h2 i h4 to R.2.5.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
<section id="bar" role="progressbar" aria-label="Postęp rejestracji"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"></section>
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<h4>Rejestrację do sklepu wykonał: Bartosz Bryniarski</h4>
</footer>
</body>
</html>Kroki 31-42 · po tym etapie masz 33 z 43 kryteriów (pkt)
Domyślne formatowanie wszystkich selektorów: krój czcionki Cambria
Kolory, które powtarzają się w kilku regułach, trafiają do zmiennych CSS na :root: SteelBlue (bloki i przyciski), Navy (przycisk pod kursorem, pasek, ramka tabeli), LightBlue (zakładki). Zmiana koloru firmowego to wtedy jedna linia. Selektor * z Cambrią i zapasowym krojem szeryfowym (R.4.1).
styl.css CSS nowy plik :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}Dla ciała dokumentu: kolor tła Linen
Tło Linen dla body, a przy okazji całe rozmieszczenie bloków z obrazu 2 w jednym miejscu:
grid-template-columns: 25% 73% - kolumna bloku bocznego i kolumna banera, bloku głównego i paska; to od razu szerokości z arkusza (klucz R.4.5 przyjmuje je w tej postaci),column-gap: 2% - odstęp między kolumnami, który w wersji podstawowej dawały marginesy bloku bocznego (25% + 2% + 73% = 100%),grid-template-areas rysuje układ słowami: blok boczny w lewej kolumnie przez trzy wiersze, obok niego baner, blok główny i pasek, na dole stopka na całą szerokość,align-items: start - bloki mają swoje wysokości z arkusza, zamiast rozciągać się do wysokości wiersza.Każdy blok dostaje nazwę pola przez grid-area. Kolejność w HTML-u nie ma znaczenia - <aside> stoi w kodzie przedostatni, a trafia na lewą stronę (R.3.1).
styl.css CSS zmienione: 33 linie :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
#progress {
grid-area: progress;
}
aside {
grid-area: aside;
}
footer {
grid-area: footer;
}Wspólne dla bloków bocznego, banera i stopki: kolor tła SteelBlue, biały kolor czcionki, wyrównanie tekstu do środka
Jedna reguła na trzy selektory, kolor ze zmiennej. Wyśrodkowanie dotyczy też obrazu w bloku bocznym, bo obraz jest elementem liniowym.
styl.css CSS zmienione: 6 linii :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
#progress {
grid-area: progress;
}
aside {
grid-area: aside;
}
aside, header, footer {
background-color: var(--main-color);
color: white;
text-align: center;
}
footer {
grid-area: footer;
}Dodatkowo dla bloku bocznego: szerokość 25%, wysokość 510 px, margines zewnętrzny górny i dolny 0, lewy i prawy 1%, cień bloku o przesunięciu 4 px w obu osiach, rozmyciu 5 px i kolorze DimGray
width: 25% liczyłoby się od kolumny, więc blok miałby ćwierć z 25%,margin: 0 1% - góra i dół 0, boki po 1%, jak każe arkusz (R.4.7). Uwaga na siatkę: procentowy margines elementu siatki liczy się od szerokości jego pola (kolumny 25%), a nie całej strony, więc wychodzi drobniejszy niż w wersji podstawowej. Główny odstęp od formularza daje column-gap,box-shadow: 4px 4px 5px DimGray - przesunięcie w poziomie, w pionie, rozmycie, kolor: cień pada w prawo i w dół (R.4.8).styl.css CSS zmienione: 3 linie :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
#progress {
grid-area: progress;
}
aside {
grid-area: aside;
height: 510px;
margin: 0 1%;
box-shadow: 4px 4px 5px DimGray;
}
aside, header, footer {
background-color: var(--main-color);
color: white;
text-align: center;
}
footer {
grid-area: footer;
}Dodatkowo dla banera: szerokość 73%, wysokość 80 px
Szerokość 73% to druga kolumna siatki, w regule zostaje tylko wysokość.
styl.css CSS zmienione: 1 linia :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
height: 80px;
}
main {
grid-area: main;
}
#progress {
grid-area: progress;
}
aside {
grid-area: aside;
height: 510px;
margin: 0 1%;
box-shadow: 4px 4px 5px DimGray;
}
aside, header, footer {
background-color: var(--main-color);
color: white;
text-align: center;
}
footer {
grid-area: footer;
}Dla bloku głównego: szerokość 73%, wysokość 400 px
Ta sama kolumna co baner - blok główny stoi pod nim.
styl.css CSS zmienione: 1 linia :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
height: 80px;
}
main {
grid-area: main;
height: 400px;
}
#progress {
grid-area: progress;
}
aside {
grid-area: aside;
height: 510px;
margin: 0 1%;
box-shadow: 4px 4px 5px DimGray;
}
aside, header, footer {
background-color: var(--main-color);
color: white;
text-align: center;
}
footer {
grid-area: footer;
}Dla wszystkich przycisków: kolor tła SteelBlue, biały kolor czcionki, szerokość 20%, marginesy wewnętrzne 15 px, margines zewnętrzny górny 30 px, rozmiar czcionki 130%, bez obramowania
Selektor button obejmuje cztery przyciski. Szerokość 20% liczy się od rodzica: zakładek - od bloku głównego, „Zatwierdź dane” - od jego zakładki, dlatego jest węższy (obraz 5). cursor: pointer (dodatek) pokazuje rączkę - przycisk bez ramki wygląda wtedy na klikalny. Biel czcionki domyka R.4.3, rozmiar 130% razem z wyśrodkowaniem bloków - R.4.6.
styl.css CSS zmienione: 11 linii :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
height: 80px;
}
main {
grid-area: main;
height: 400px;
}
#progress {
grid-area: progress;
}
aside {
grid-area: aside;
height: 510px;
margin: 0 1%;
box-shadow: 4px 4px 5px DimGray;
}
aside, header, footer {
background-color: var(--main-color);
color: white;
text-align: center;
}
footer {
grid-area: footer;
}
button {
background-color: var(--main-color);
color: white;
width: 20%;
padding: 15px;
margin-top: 30px;
font-size: 130%;
border: none;
cursor: pointer;
}Gdy kursor znajduje się na przycisku jego kolor tła zmienia się na Navy
:hover - przycisk pod kursorem (obraz 2 pokazuje granatową zakładkę „Klient”). Ten sam kolor dostaje :focus-visible: przycisk wybrany klawiszem Tab - bez tego osoba bez myszy nie widzi, który przycisk jest aktywny, bo border: none zabrało ramkę (R.4.10).
styl.css CSS zmienione: 5 linii :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
height: 80px;
}
main {
grid-area: main;
height: 400px;
}
#progress {
grid-area: progress;
}
aside {
grid-area: aside;
height: 510px;
margin: 0 1%;
box-shadow: 4px 4px 5px DimGray;
}
aside, header, footer {
background-color: var(--main-color);
color: white;
text-align: center;
}
footer {
grid-area: footer;
}
button {
background-color: var(--main-color);
color: white;
width: 20%;
padding: 15px;
margin-top: 30px;
font-size: 130%;
border: none;
cursor: pointer;
}
button:hover,
button:focus-visible {
background-color: var(--accent-color);
}Dla trzech bloków z kontrolkami: kolor tła LightBlue, margines zewnętrzny prawy 80 px, marginesy wewnętrzne 10 px. W stanie początkowym jest widoczny tylko pierwszy blok z kontrolkami
Klasa .tab - wspólny wygląd trzech bloków i display: none dla wszystkich. Druga reguła, .tab.active (oba warunki naraz), przywraca blok, który ma klasę active - w stanie początkowym tylko pierwszy (R.5.5). Pozostałe są w kodzie strony, tylko niewidoczne. Skrypt nie będzie już ustawiał stylów - przestawi klasę, a wygląd zostaje w CSS.
styl.css CSS zmienione: 11 linii :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
height: 80px;
}
main {
grid-area: main;
height: 400px;
}
#progress {
grid-area: progress;
}
aside {
grid-area: aside;
height: 510px;
margin: 0 1%;
box-shadow: 4px 4px 5px DimGray;
}
aside, header, footer {
background-color: var(--main-color);
color: white;
text-align: center;
}
footer {
grid-area: footer;
}
button {
background-color: var(--main-color);
color: white;
width: 20%;
padding: 15px;
margin-top: 30px;
font-size: 130%;
border: none;
cursor: pointer;
}
button:hover,
button:focus-visible {
background-color: var(--accent-color);
}
.tab {
background-color: var(--tab-color);
margin-right: 80px;
padding: 10px;
display: none;
}
.tab.active {
display: block;
}Dla bloku paska postępu: kolor tła LightGrey, szerokość 73%, margines zewnętrzny dolny 10 px
Szerokość 73% daje kolumna. Ta reguła domyka kolory tła (R.4.2: Linen, SteelBlue, LightGrey, LightBlue) i marginesy zewnętrzne z R.4.7.
styl.css CSS zmienione: 2 linie :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
height: 80px;
}
main {
grid-area: main;
height: 400px;
}
#progress {
grid-area: progress;
background-color: LightGrey;
margin-bottom: 10px;
}
aside {
grid-area: aside;
height: 510px;
margin: 0 1%;
box-shadow: 4px 4px 5px DimGray;
}
aside, header, footer {
background-color: var(--main-color);
color: white;
text-align: center;
}
footer {
grid-area: footer;
}
button {
background-color: var(--main-color);
color: white;
width: 20%;
padding: 15px;
margin-top: 30px;
font-size: 130%;
border: none;
cursor: pointer;
}
button:hover,
button:focus-visible {
background-color: var(--accent-color);
}
.tab {
background-color: var(--tab-color);
margin-right: 80px;
padding: 10px;
display: none;
}
.tab.active {
display: block;
}Dla pustego bloku w bloku paska postępu: kolor tła Navy, szerokość 4%, wysokość 30 px
Granatowy pasek o szerokości 4% szarego tła - stan początkowy (R.5.2). Wysokość 30 px nadaje wysokość całemu paskowi. transition: width 0.3s (dodatek) sprawia, że pasek wydłuża się płynnie, a nie skokiem. Komplet wysokości z R.4.4: 510, 80, 400 i 30 px.
styl.css CSS zmienione: 7 linii :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
height: 80px;
}
main {
grid-area: main;
height: 400px;
}
#progress {
grid-area: progress;
background-color: LightGrey;
margin-bottom: 10px;
}
aside {
grid-area: aside;
height: 510px;
margin: 0 1%;
box-shadow: 4px 4px 5px DimGray;
}
aside, header, footer {
background-color: var(--main-color);
color: white;
text-align: center;
}
footer {
grid-area: footer;
}
button {
background-color: var(--main-color);
color: white;
width: 20%;
padding: 15px;
margin-top: 30px;
font-size: 130%;
border: none;
cursor: pointer;
}
button:hover,
button:focus-visible {
background-color: var(--accent-color);
}
.tab {
background-color: var(--tab-color);
margin-right: 80px;
padding: 10px;
display: none;
}
.tab.active {
display: block;
}
#bar {
background-color: var(--accent-color);
width: 4%;
height: 30px;
transition: width 0.3s;
}Dla tabeli: szerokość 100%, obramowanie linią kropkowaną o szerokości 1 px i kolorze Navy
Linia kropkowana to dotted. Ta reguła domyka szerokości (R.4.5: kolumny 25% i 73%, przyciski 20%, tabela 100%) i obramowania (R.4.9: kropkowana tabela, przyciski bez ramki).
styl.css CSS zmienione: 5 linii :root {
--main-color: SteelBlue;
--accent-color: Navy;
--tab-color: LightBlue;
}
* {
font-family: Cambria, serif;
}
body {
background-color: Linen;
display: grid;
grid-template-columns: 25% 73%;
column-gap: 2%;
grid-template-areas:
"aside header"
"aside main"
"aside progress"
"footer footer";
align-items: start;
}
header {
grid-area: header;
height: 80px;
}
main {
grid-area: main;
height: 400px;
}
#progress {
grid-area: progress;
background-color: LightGrey;
margin-bottom: 10px;
}
aside {
grid-area: aside;
height: 510px;
margin: 0 1%;
box-shadow: 4px 4px 5px DimGray;
}
aside, header, footer {
background-color: var(--main-color);
color: white;
text-align: center;
}
footer {
grid-area: footer;
}
button {
background-color: var(--main-color);
color: white;
width: 20%;
padding: 15px;
margin-top: 30px;
font-size: 130%;
border: none;
cursor: pointer;
}
button:hover,
button:focus-visible {
background-color: var(--accent-color);
}
.tab {
background-color: var(--tab-color);
margin-right: 80px;
padding: 10px;
display: none;
}
.tab.active {
display: block;
}
#bar {
background-color: var(--accent-color);
width: 4%;
height: 30px;
transition: width 0.3s;
}
table {
width: 100%;
border: 1px dotted var(--accent-color);
}Kroki 43-50 · po tym etapie masz 43 z 43 kryteriów (pkt)
Funkcja aktywująca: ukrywa wszystkie zakładki
Skrypt stoi na końcu <body> - gdy przeglądarka go czyta, wszystkie elementy strony już istnieją. Zostaje w pliku strony, bo klucz każe sprawdzać skrypt „w kodzie strony”.
const tabs - lista trzech zakładek znaleziona raz, selektorem CSS .tab. const, bo zmienna nie dostanie innej listy,showTab(tabId) - pętla for ... of zdejmuje wszystkim klasę active. Ukrywa je reguła .tab z arkusza stylów, skrypt nie dotyka style.display.Funkcji nikt jeszcze nie wywołuje (R.5.1).
rejestracja.html HTML zmienione: 9 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
<section id="bar" role="progressbar" aria-label="Postęp rejestracji"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"></section>
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<h4>Rejestrację do sklepu wykonał: Bartosz Bryniarski</h4>
</footer>
<script>
const tabs = document.querySelectorAll(".tab");
function showTab(tabId) {
for (const tab of tabs) {
tab.classList.remove("active");
}
}
</script>
</body>
</html>Pokazuje jedynie tę zakładkę (blok), której przycisk wybrano
Po zdjęciu klasy wszystkim jedna linia dodaje ją wybranej. Kolejność „najpierw wszystkim zdejmij, potem jednej dodaj” sprawia, że nie trzeba pamiętać, która zakładka była otwarta.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
<section id="bar" role="progressbar" aria-label="Postęp rejestracji"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"></section>
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<h4>Rejestrację do sklepu wykonał: Bartosz Bryniarski</h4>
</footer>
<script>
const tabs = document.querySelectorAll(".tab");
function showTab(tabId) {
for (const tab of tabs) {
tab.classList.remove("active");
}
document.getElementById(tabId).classList.add("active");
}
</script>
</body>
</html>Funkcja aktywująca jest wywoływana przez wciśnięcie dowolnego przycisku zakładki w bloku głównym
Pętla po przyciskach z atrybutem data-tab przypisuje każdemu obsługę kliknięcia: funkcję strzałkową, która wywołuje showTab z nazwą zakładki odczytaną z dataset.tab. Nowa zakładka w formularzu nie wymaga zmian w skrypcie - wystarczy przycisk z data-tab.
Dlaczego właściwość onclick, a nie addEventListener("click", ...)? addEventListener jest ogólniejszy (kilka niezależnych obsług jednego zdarzenia), ale klucz w R.3.6 mówi wprost o zdarzeniu onClick z przypisaną funkcją - właściwość onclick jest dokładnie tym zapisem, tylko w skrypcie zamiast w HTML-u. Jedna obsługa na przycisk w zupełności tu wystarcza. W podglądzie zakładki już działają: „Adres” (obraz 4), „Kontakt” (obraz 5).
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
<section id="bar" role="progressbar" aria-label="Postęp rejestracji"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"></section>
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<h4>Rejestrację do sklepu wykonał: Bartosz Bryniarski</h4>
</footer>
<script>
const tabs = document.querySelectorAll(".tab");
function showTab(tabId) {
for (const tab of tabs) {
tab.classList.remove("active");
}
document.getElementById(tabId).classList.add("active");
}
for (const button of document.querySelectorAll("button[data-tab]")) {
button.onclick = () => showTab(button.dataset.tab);
}
</script>
</body>
</html>Funkcja modyfikuje właściwość stylu dla pustego bloku wewnątrz bloku paska postępu, w ten sposób, że jego szerokość jest zwiększana o 12%, np. po utracie focusa za pierwszym razem wartość wynosi 16%; za drugim razem jest to 28%, trzecim 40% i tak dalej
PROGRESS_START i PROGRESS_STEP na górze skryptu - liczby 4 i 12 mają nazwy, a zmiana kroku to jedna linia (wielkie litery to zwyczaj dla stałych konfiguracyjnych),let progress stoi poza funkcją, więc pamięta wartość między wywołaniami; let, bo wartość się zmienia,progress += PROGRESS_STEP - skrót od progress = progress + PROGRESS_STEP,`${progress}%` składa „16%” bez sklejania plusami,aria-valuenow dostaje tę samą liczbę - czytnik ekranu zna aktualny postęp (R.5.3).rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
<section id="bar" role="progressbar" aria-label="Postęp rejestracji"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"></section>
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<h4>Rejestrację do sklepu wykonał: Bartosz Bryniarski</h4>
</footer>
<script>
const PROGRESS_START = 4;
const PROGRESS_STEP = 12;
const progressBar = document.querySelector("#bar");
const tabs = document.querySelectorAll(".tab");
let progress = PROGRESS_START;
function showTab(tabId) {
for (const tab of tabs) {
tab.classList.remove("active");
}
document.getElementById(tabId).classList.add("active");
}
for (const button of document.querySelectorAll("button[data-tab]")) {
button.onclick = () => showTab(button.dataset.tab);
}
function increaseProgress() {
progress += PROGRESS_STEP;
progressBar.style.width = `${progress}%`;
progressBar.setAttribute("aria-valuenow", progress);
}
</script>
</body>
</html>Dla wszystkich pól edycyjnych – utrata focusa powoduje wywołanie funkcji zmieniającej wartość paska postępu
Utrata focusa to zdarzenie blur (kliknięcie obok albo Tab). Selektor .tab input:not([type=checkbox]) wybiera wszystkie pola w zakładkach oprócz pola wyboru - pole RODO nie jest polem edycyjnym. Wychodzi siedem pól: imię, nazwisko, data, ulica, numer, miasto, telefon.
Pętla przypisuje każdemu właściwość onblur - z tego samego powodu co onclick przy zakładkach: klucz R.3.5 nazywa wprost zdarzenie onBlur. Uwaga: increaseProgress bez nawiasów - przypisana jest funkcja, a nie wynik jej wywołania. W podglądzie: kliknięcie w pole imienia i potem obok wydłuża pasek do 16%.
field.onblur = increaseProgress() (z nawiasami) wywołuje funkcję raz, przy wczytaniu strony, i przypisuje jej wynik undefined - pasek skacze na 16% i dalej już nie rośnie.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
<section id="bar" role="progressbar" aria-label="Postęp rejestracji"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"></section>
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<h4>Rejestrację do sklepu wykonał: Bartosz Bryniarski</h4>
</footer>
<script>
const PROGRESS_START = 4;
const PROGRESS_STEP = 12;
const progressBar = document.querySelector("#bar");
const tabs = document.querySelectorAll(".tab");
let progress = PROGRESS_START;
function showTab(tabId) {
for (const tab of tabs) {
tab.classList.remove("active");
}
document.getElementById(tabId).classList.add("active");
}
for (const button of document.querySelectorAll("button[data-tab]")) {
button.onclick = () => showTab(button.dataset.tab);
}
function increaseProgress() {
progress += PROGRESS_STEP;
progressBar.style.width = `${progress}%`;
progressBar.setAttribute("aria-valuenow", progress);
}
const editFields = document.querySelectorAll(".tab input:not([type=checkbox])");
for (const field of editFields) {
field.onblur = increaseProgress;
}
</script>
</body>
</html>Należy zabezpieczyć funkcję, aby wartość szerokości nigdy nie była wyższa niż 100%
4 + 8 · 12 = 100, więc po ósmej utracie focusa pasek jest pełny, a po dziewiątej miałby 112%. Warunek przycina wartość do stałej PROGRESS_MAX, zanim trafi do stylu. Krócej byłoby Math.min(progress + PROGRESS_STEP, PROGRESS_MAX), ale klucz R.5.4 mówi „zastosowano warunek” - jawny if nie zostawia wątpliwości.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
<section id="bar" role="progressbar" aria-label="Postęp rejestracji"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"></section>
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<h4>Rejestrację do sklepu wykonał: Bartosz Bryniarski</h4>
</footer>
<script>
const PROGRESS_START = 4;
const PROGRESS_STEP = 12;
const PROGRESS_MAX = 100;
const progressBar = document.querySelector("#bar");
const tabs = document.querySelectorAll(".tab");
let progress = PROGRESS_START;
function showTab(tabId) {
for (const tab of tabs) {
tab.classList.remove("active");
}
document.getElementById(tabId).classList.add("active");
}
for (const button of document.querySelectorAll("button[data-tab]")) {
button.onclick = () => showTab(button.dataset.tab);
}
function increaseProgress() {
progress += PROGRESS_STEP;
if (progress > PROGRESS_MAX) {
progress = PROGRESS_MAX;
}
progressBar.style.width = `${progress}%`;
progressBar.setAttribute("aria-valuenow", progress);
}
const editFields = document.querySelectorAll(".tab input:not([type=checkbox])");
for (const field of editFields) {
field.onblur = increaseProgress;
}
</script>
</body>
</html>Funkcja zatwierdzająca pobiera wartość z każdego pola edycyjnego i pola wyboru. Wartości wyświetlane są w konsoli przeglądarki (obraz 6). Dla uproszczenia wszelką walidację należy pominąć
Funkcja korzysta z listy editFields, którą skrypt już ma:
[...editFields] zamienia listę elementów w tablicę, a map robi z każdego pola jego wartość - siedem odczytów value jedną linią, w kolejności pól na stronie,.checked (true albo false). Obraz 6 pokazuje przy zgodzie „on”, ale to .value pola wyboru, które wynosi „on” zawsze, także bez zaznaczenia - nic nie mówi o zgodzie,join(", ") skleja wartości przecinkami w jeden napis, jak na obrazie 6.Funkcja odwołuje się do wszystkich pól edycyjnych i pola wyboru (R.5.8). Walidacji nie ma - tak każe arkusz.
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
<section id="bar" role="progressbar" aria-label="Postęp rejestracji"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"></section>
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<h4>Rejestrację do sklepu wykonał: Bartosz Bryniarski</h4>
</footer>
<script>
const PROGRESS_START = 4;
const PROGRESS_STEP = 12;
const PROGRESS_MAX = 100;
const progressBar = document.querySelector("#bar");
const tabs = document.querySelectorAll(".tab");
let progress = PROGRESS_START;
function showTab(tabId) {
for (const tab of tabs) {
tab.classList.remove("active");
}
document.getElementById(tabId).classList.add("active");
}
for (const button of document.querySelectorAll("button[data-tab]")) {
button.onclick = () => showTab(button.dataset.tab);
}
function increaseProgress() {
progress += PROGRESS_STEP;
if (progress > PROGRESS_MAX) {
progress = PROGRESS_MAX;
}
progressBar.style.width = `${progress}%`;
progressBar.setAttribute("aria-valuenow", progress);
}
const editFields = document.querySelectorAll(".tab input:not([type=checkbox])");
for (const field of editFields) {
field.onblur = increaseProgress;
}
const consentBox = document.querySelector("#rodo");
function confirmData() {
const values = [...editFields].map((field) => field.value);
values.push(consentBox.checked);
console.log(values.join(", "));
}
</script>
</body>
</html>Funkcja zatwierdzająca jest wywoływana po wybraniu przycisku „Zatwierdź dane”
Właściwość onclick przycisku #confirm dostaje funkcję confirmData - znowu bez nawiasów (R.3.7). Wynik widać w konsoli (F12, Console). Nazwy mówią, co robią i co przechowują: showTab, increaseProgress, confirmData, editFields, consentBox, PROGRESS_STEP (R.5.9).
rejestracja.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>Sklep - rejestracja</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1>Zarejestruj się w sklepie</h1>
</header>
<main>
<button type="button" data-tab="client">Klient</button>
<button type="button" data-tab="address">Adres</button>
<button type="button" data-tab="contact">Kontakt</button>
<div class="tab active" id="client">
<p><label for="firstName">Imię</label></p>
<input type="text" id="firstName" placeholder="Wpisz dane...">
<p><label for="lastName">Nazwisko</label></p>
<input type="text" id="lastName">
<p><label for="birthDate">Data urodzenia</label></p>
<input type="date" id="birthDate">
</div>
<div class="tab" id="address">
<p><label for="street">Ulica</label></p>
<input type="text" id="street">
<p><label for="houseNumber">Numer</label></p>
<input type="number" id="houseNumber" min="1">
<p><label for="city">Miasto</label></p>
<input type="text" id="city">
</div>
<div class="tab" id="contact">
<p><label for="phone">Numer komórkowy</label></p>
<input type="tel" id="phone" autocomplete="tel">
<p>
<label>
<input type="checkbox" id="rodo">
Akceptuję RODO
</label>
</p>
<button type="button" id="confirm">Zatwierdź dane</button>
</div>
</main>
<section id="progress">
<section id="bar" role="progressbar" aria-label="Postęp rejestracji"
aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"></section>
</section>
<aside>
<img src="obraz.png" alt="promocje">
<h2>Sprawdź promocje</h2>
<table>
<thead>
<tr>
<th scope="col">co?</th>
<th scope="col">ile taniej?</th>
</tr>
</thead>
<tbody>
<tr>
<td>ubrania</td>
<td>15%</td>
</tr>
<tr>
<td>buty</td>
<td>25%</td>
</tr>
</tbody>
</table>
</aside>
<footer>
<h4>Rejestrację do sklepu wykonał: Bartosz Bryniarski</h4>
</footer>
<script>
const PROGRESS_START = 4;
const PROGRESS_STEP = 12;
const PROGRESS_MAX = 100;
const progressBar = document.querySelector("#bar");
const tabs = document.querySelectorAll(".tab");
let progress = PROGRESS_START;
function showTab(tabId) {
for (const tab of tabs) {
tab.classList.remove("active");
}
document.getElementById(tabId).classList.add("active");
}
for (const button of document.querySelectorAll("button[data-tab]")) {
button.onclick = () => showTab(button.dataset.tab);
}
function increaseProgress() {
progress += PROGRESS_STEP;
if (progress > PROGRESS_MAX) {
progress = PROGRESS_MAX;
}
progressBar.style.width = `${progress}%`;
progressBar.setAttribute("aria-valuenow", progress);
}
const editFields = document.querySelectorAll(".tab input:not([type=checkbox])");
for (const field of editFields) {
field.onblur = increaseProgress;
}
const consentBox = document.querySelector("#rodo");
function confirmData() {
const values = [...editFields].map((field) => field.value);
values.push(consentBox.checked);
console.log(values.join(", "));
}
document.querySelector("#confirm").onclick = confirmData;
</script>
</body>
</html>Krok 51 · po tym etapie masz 43 z 43 kryteriów (pkt)
Obie wersje dają komplet 43 punktów. Różnice:
| wersja podstawowa | wersja nowoczesna | |
|---|---|---|
| układ | float: left czterech bloków + clear stopki | grid-template-areas na <body> |
| kolejność w HTML-u | <aside> pierwszy (wymóg float) | kolejność treści: baner, formularz, pasek, promocje |
| szerokości | width w każdej regule | kolumny siatki 25% 73% i column-gap |
| widoczna zakładka | skrypt ustawia style.display | skrypt przestawia klasę active, wygląd w CSS |
| podpisy pól | akapity | akapity z <label> powiązanym z polem |
| zdarzenia | atrybuty onclick i onblur w HTML-u | właściwości onclick i onblur ustawiane pętlą w skrypcie |
| odczyt pól | siedem getElementById(...).value | map po liście pól i join |
| SQL | > '2000-12-31', pełne nazwy tabel | >= '2001-01-01', aliasy, ORDER BY, SMALLINT UNSIGNED |
Na egzaminie wersja podstawowa jest szybsza do napisania i trzyma się funkcji z tabeli 1 arkusza. Nowoczesna jest krótsza tam, gdzie pola się powtarzają, i łatwiej ją rozbudować: nowe pole albo nowa zakładka nie wymagają zmian w skrypcie. Jeśli używasz siatki, pilnuj szerokości w grid-template-columns, a nie w width bloków.
Podgląd strony bez zmian - taki jak po kroku 50.
Krok 52 · po tym etapie masz 43 z 43 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Umieść go w folderze z numerem zdającego. Nagraj płytę z rezultatami pracy.
W przeglądarka.txt nazwa przeglądarki, w której sprawdzana była strona. W folderze z numerem zdającego: import.png, kw1.jpg - kw4.jpg, kwerendy.txt, obraz.png, przeglądarka.txt, rejestracja.html, styl.css. Nagraj płytę, sprawdź jej odczyt i opisz ją numerem zdającego.
przeglądarka.txt Tekst nowy plik Google ChromePodgląd strony bez zmian - taki jak po kroku 50.
Symulacja ekranu w przeglądarce - w Android Studio / Visual Studio wygląd może się nieco różnić.
To jedno z możliwych rozwiązań. Egzaminator ocenia spełnienie kryteriów z klucza odpowiedzi, a nie zgodność z tym kodem - inna, poprawna droga też daje punkty.
Autor rozwiązania: Bartosz Bryniarski. Licencja CC BY-NC 4.0 - kopiowanie i przeróbki do celów niekomercyjnych, z podaniem autora i źródła (link do tej strony) (zasady wykorzystania). Treść arkusza i klucza oceniania pochodzi z CKE.