Rozwiązanie buduje stronę firmy szkoleniowej z kursami programowania: baza obuwie (tak, w tym arkuszu baza dotyczy butów, a strona kursów - te części są od siebie niezależne) i cztery zapytania - warunek, złączenie tabel, utworzenie konta CREATE USER i nadanie uprawnień GRANT, potem baner wycięty ze zdjęcia klawiatury z napisem, dwie strony HTML - index.html z tabelą kursów i adresem oraz raty.html z kalkulatorem rat - i style w style.css. PHP tu nie ma: skrypt działa w przeglądarce, w JavaScripcie - sprawdza zaznaczone kursy, dzieli kwotę przez liczbę rat i wypisuje zdanie z miastem.
Kroki idą zdanie po zdaniu za treścią arkusza - przy każdym jest polecenie z arkusza, a kod pokazuje dokładnie te linie, które je spełniają. Skrypt jest najpierw pisany najprościej, z atrybutem onclick i innerHTML, a na końcu zostaje przerobiony na wersję z prawdziwych projektów: słuchacz zdarzenia, sprawdzenie liczby rat, zaokrąglenie do groszy i textContent.
To jest wersja podstawowa. W zakładce „Nowoczesny kod (grid, osobny skrypt)” jest drugi sposób rozwiązania tego samego arkusza: kolory w zmiennych CSS, tabela z częścią nagłówkową, kalkulator ułożony siatką CSS zamiast <br> i skrypt w osobnym pliku z nasłuchiwaczem zdarzenia, sprawdzeniem danych i kwotami w polskim formacie od pierwszej linii - obie wersje są zgodne z kluczem.
Baza i zdjęcie pochodzą z prawdziwego archiwum pliki10 (załącznik do arkusza, hasło w treści zadania). Zrzuty wyników zapytań są odtworzone z tej bazy - na egzaminie robisz je sam, z całego ekranu. Kalkulator w podglądzie działa naprawdę - zaznacz kursy, wpisz liczbę rat i kliknij „Oblicz”.
Jak liczą się punkty. Klucz ma 40 kryteriów (R.1.1 - R.5.8), każde za 1 punkt. Próg zdania części praktycznej to 75%, czyli 30 punktów - można stracić 10 kryteriów i nadal zdać. Przy każdym kroku jest napisane, które kryteria spełnia; egzaminator ocenia spełnienie kryteriów z klucza, nie zgodność z tym kodem.
Kroki 1-7 · po tym etapie masz 6 z 40 kryteriów (pkt)
Utwórz bazę danych o nazwie obuwie, z zestawem polskich znaków (np. utf8_unicode_ci).
Rozpakuj pliki10.7z z pulpitu (hasło KuRsyKompuTerow3&) do folderu z numerem zdającego: baza.sql i klawiatura.jpg. W phpMyAdmin: Nowa, nazwa obuwie, porównywanie z polskimi znakami, np. utf8_unicode_ci albo utf8mb4_polish_ci - w bazie są słowa „PÓŁBUTY” i „brązowy”.
Do utworzonej bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum.
Wybierz bazę obuwie w lewym drzewie, potem Import → baza.sql → Wykonaj. Powstają trzy tabele z ilustracji 1: kategorie (4 kategorie obuwia), buty (model, kategoria, nazwa, cena) i produkt (kolor, materiał, wysokość buta). Relacje: buty.id_kat → kategorie.id_kat i produkt.model → buty.model.
Import bez zaznaczonej bazy obuwie kończy się błędem „Nie wybrano bazy danych” - plik nie zawiera polecenia USE.
Wykonaj zrzut ekranu po imporcie. Zapisz zrzut w formacie JPEG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań. Na zrzucie powinny być widoczne elementy wskazujące na poprawnie wykonany import tabel.
Print Screen, wklejasz do edytora grafiki i zapisujesz jako import.jpg - import w JPEG, a zrzuty zapytań w PNG. Na zrzucie widać komunikat o udanym imporcie i trzy tabele w drzewie bazy.
Wykadrowany zrzut albo zrzut bez paska zadań nie jest oceniany (uwaga w kluczu przy R.1).
Zapytanie 1: wybierające jedynie kolor i materiał produktów, których wysokość buta jest większa niż 10.
Każdą część zdania z arkusza tłumaczysz na jedną klauzulę:
SELECT kolor, material - „jedynie kolor i materiał”, więc dwie kolumny, nie *,FROM produkt - te pola są w tabeli produkt,WHERE wysokosc_buta > 10 - „większa niż 10”, czyli ostrzej niż >=.Wynik: dwa wiersze - brązowy (skóra naturalna - zamsz, 12,5) i szary (skóra ekologiczna, 11,0), jak w kluczu. Zapytanie zapisujesz w kwerendy.txt, zrzut wyniku jako kw1.png.
kwerendy.txt Tekst nowy plik -- Zapytanie 1
SELECT kolor, material FROM produkt WHERE wysokosc_buta > 10;
Zapytanie 2: wybierające jedynie nazwę i cenę buta oraz odpowiadającą im nazwę kategorii. Należy posłużyć się relacją.
Nazwa i cena są w buty, a nazwa kategorii w kategorie - łączysz tabele po polu, które je wiąże:
SELECT nazwa, cena, nazwa_kat - trzy kolumny z obu tabel,FROM buty JOIN kategorie - złączenie dwóch tabel,USING(id_kat) - warunek złączenia: pole id_kat ma tę samą nazwę w obu tabelach, więc wystarczy ją podać raz. Równoważnie: ON buty.id_kat = kategorie.id_kat.Wynik: cztery wiersze, po jednym dla kategorii Półbuty, Trzewiki, Trampki i Obuwie sportowe - jak w kluczu. Zrzut: kw2.png.
SELECT ... FROM buty, kategorie bez warunku złączenia daje iloczyn kartezjański: 16 wierszy zamiast 4, każdy but z każdą kategorią.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT kolor, material FROM produkt WHERE wysokosc_buta > 10;
-- Zapytanie 2
SELECT nazwa, cena, nazwa_kat FROM buty JOIN kategorie USING(id_kat);
Zapytanie 3: tworzące konto użytkownika Marek na localhost z hasłem M@reK.
Konto w MySQL to para nazwa i host: 'Marek'@'localhost' może łączyć się tylko z tego samego komputera. Hasło podajesz po IDENTIFIED BY, w apostrofach i z zachowaniem wielkości liter: M@reK. Wynik to komunikat o poprawnie wykonanym zapytaniu - klucz dopuszcza też błąd o niewybranej bazie, bo konto nie należy do żadnej bazy. Zrzut: kw3.png.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT kolor, material FROM produkt WHERE wysokosc_buta > 10;
-- Zapytanie 2
SELECT nazwa, cena, nazwa_kat FROM buty JOIN kategorie USING(id_kat);
-- Zapytanie 3
CREATE USER 'Marek'@'localhost' IDENTIFIED BY 'M@reK';
Zapytanie 4: nadające kontu Marek prawa jedynie do przeglądania i aktualizacji danych jedynie w bazie danych obuwie, w tabeli produkt.
GRANT SELECT, UPDATE - „przeglądanie” to SELECT, „aktualizacja” to UPDATE; nic więcej (bez INSERT, DELETE, ALL),ON obuwie.produkt - „jedynie w bazie obuwie, w tabeli produkt”: baza i tabela po kropce. obuwie.* dałoby prawa do wszystkich tabel bazy,TO 'Marek'@'localhost' - to samo konto, co w zapytaniu 3, z tym samym hostem.Zrzut z komunikatem o poprawnym wykonaniu: kw4.png.
TO Marek bez hosta tworzy w MariaDB odwołanie do konta Marek@% - innego niż utworzone w zapytaniu 3 - i kończy się błędem.
kwerendy.txt Tekst zmienione: 3 linie -- Zapytanie 1
SELECT kolor, material FROM produkt WHERE wysokosc_buta > 10;
-- Zapytanie 2
SELECT nazwa, cena, nazwa_kat FROM buty JOIN kategorie USING(id_kat);
-- Zapytanie 3
CREATE USER 'Marek'@'localhost' IDENTIFIED BY 'M@reK';
-- Zapytanie 4
GRANT SELECT, UPDATE ON obuwie.produkt TO 'Marek'@'localhost';
Kroki 8-29 · po tym etapie masz 21 z 40 kryteriów (pkt)
Na potrzeby witryny internetowej należy przygotować grafikę baner.png utworzoną na podstawie pliku klawiatura.jpg, który należy wykadrować do szerokości 1000 px i wysokości 100 px, zgodnie z kadrem przedstawionym na ilustracji 2.
Zdjęcie ma 1500 × 300 px. W GIMP-ie wybierasz narzędzie Zaznaczenie prostokątne, w opcjach narzędzia wpisujesz rozmiar 1000 × 100, a położenie dobierasz tak, jak na ilustracji 2: kadr zaczyna się mniej więcej 37 px od lewej i 51 px od góry. Potem Obraz → Przytnij do zaznaczenia. Klucz sprawdza kadr po klawiszach: z lewej nie może być widać cyfry 8, a z prawej mają być widoczne tylko klawisze Insert i Delete (R.2.1).
Skalowanie zamiast kadrowania (Obraz → Skaluj) daje 1000 × 100, ale ze ściśniętym zdjęciem i całą klawiaturą w kadrze - kryterium R.2.1 nie jest spełnione.
Na środku umieszczony napis "Kursy komputerowe" czcionką Arial pochyloną i pogrubioną, o rozmiarze 60, wypełnioną kolorem białym.
Narzędzie Tekst: czcionka Arial Bold Italic (pogrubiona i pochylona), rozmiar 60 px, kolor biały (ffffff). Kliknij na obrazie, wpisz napis, a potem wyrównaj warstwę tekstu do środka obrazu narzędziem Wyrównanie (względem obrazu, środek w poziomie i w pionie). Na koniec Plik → Eksportuj jako baner.png - format PNG, nie zapis .xcf (R.2.2).
Cechy witryny: Składa się z podstron o nazwach index.html, raty.html. Cechy wspólne dla stron: Zapisane w języku HTML5.
Zbuduj całą stronę index.html, a raty.html powstanie z jej kopii - różnią się tylko blokiem głównym. <!DOCTYPE html> mówi przeglądarce, że to HTML5.
index.html HTML nowy plik <!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Zadeklarowany polski język zawartości witryny.
Atrybut lang="pl" w znaczniku <html>.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
</head>
<body>
</body>
</html>Jawnie zastosowany właściwy standard kodowania polskich znaków.
<meta charset="UTF-8"> jako pierwszy element <head>.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Tytuł strony widoczny na karcie przeglądarki: „Kursy komputerowe”.
<title> w <head> - to napis na karcie przeglądarki, nie na stronie.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
</head>
<body>
</body>
</html>Arkusz stylów w pliku o nazwie style.css prawidłowo połączony z kodem strony.
Uwaga na nazwę: w tym arkuszu style.css, z „e” na końcu (w wielu innych jest styl.css).
styl.css zamiast style.css odcina wszystkie style - kryterium R.3.6, a rezultat R.4 jest wtedy oceniany tylko z kodu.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>Podział strony na bloki: nagłówkowy, poniżej menu, poniżej główny, na dole stopka. Podział zrealizowany za pomocą semantycznych znaczników sekcji języka HTML5 tak, aby po uruchomieniu w przeglądarce wygląd układu bloków był zgodny z ilustracją 3.
Każdy blok dostaje znacznik, który mówi, czym jest: <header> - nagłówek strony, <nav> - menu z odnośnikami, <main> - treść główna, <footer> - stopka. Klucz wymaga semantycznych znaczników, w tym wprost header i footer (R.2.4). Bloki stoją jeden pod drugim, więc nie potrzebują żadnego pozycjonowania.
index.html HTML zmienione: 8 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość bloku nagłówkowego: obraz baner.png z tekstem alternatywnym „kursy komputerowe”.
<img> z przygotowanym banerem i tekstem alternatywnym z arkusza - małymi literami (R.2.6). Na razie obraz ma swoje 1000 px szerokości; dopasuje go styl.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość menu: Odnośnik o treści „Strona główna” prowadzący do strony index.html. Odnośnik o treści „Koszt rat” prowadzący do strony raty.html. Odnośnik o treści „Nasz partner” prowadzący do strony https://moje-szkolenia.pl/.
Trzy znaczniki <a>. Do własnych podstron prowadzi ścieżka względna - sama nazwa pliku z tego samego folderu, a do serwisu partnera pełny adres z https:// (R.3.2). W podglądzie kliknięcia są zablokowane.
Adres partnera bez https:// (href="moje-szkolenia.pl") przeglądarka traktuje jak plik w bieżącym folderze - odnośnik prowadzi donikąd.
index.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
</main>
<footer>
</footer>
</body>
</html>Zawartość stopki: paragraf o treści „Autor strony: ”, dalej wstawiony numer zdającego.
Akapit <p> w <footer>. Na egzaminie po dwukropku wpisujesz swój numer zdającego (PESEL) - tutaj stoi imię i nazwisko autora rozwiązania.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Zawartość bloku głównego strony index.html: Nagłówek trzeciego stopnia o treści „Kursy komputerowe - programowanie”.
Trzeci stopień to <h3>.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Kursy komputerowe - programowanie</h3>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Tabela składająca się z 3 kolumn i 3 wierszy przedstawiona na ilustracji 4, pierwszy wiersz zawiera komórki nagłówkowe.
Każdy wiersz to <tr>. W pierwszym są komórki nagłówkowe <th> (Nazwa, Liczba godzin, Cena), w dwóch kolejnych zwykłe <td> z danymi z ilustracji 4 (R.2.7). Zapamiętaj ceny - 5000 za React.js i 3000 za JavaScript - skrypt na stronie rat będzie z nich liczył.
index.html HTML zmienione: 17 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Kursy komputerowe - programowanie</h3>
<table>
<tr>
<th>Nazwa</th>
<th>Liczba godzin</th>
<th>Cena</th>
</tr>
<tr>
<td>Kurs React.js</td>
<td>220</td>
<td>5000</td>
</tr>
<tr>
<td>Kurs JavaScript</td>
<td>150</td>
<td>3000</td>
</tr>
</table>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Nagłówek trzeciego stopnia o treści „Adres do korespondencji”.
Drugi <h3> w bloku głównym, pod tabelą.
index.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Kursy komputerowe - programowanie</h3>
<table>
<tr>
<th>Nazwa</th>
<th>Liczba godzin</th>
<th>Cena</th>
</tr>
<tr>
<td>Kurs React.js</td>
<td>220</td>
<td>5000</td>
</tr>
<tr>
<td>Kurs JavaScript</td>
<td>150</td>
<td>3000</td>
</tr>
</table>
<h3>Adres do korespondencji</h3>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Lista punktowana (nieuporządkowana) wypełniona zawartością: „Adres: Katowice, ul. Mariacka 5”, „Telefon: 32 888 88 88” oraz odnośnik pocztowy o treści „skontaktuj się” prowadzący do adresu [email protected].
Lista nieuporządkowana to <ul>, a każdy punkt <li> (R.2.8). Odnośnik pocztowy ma w href przedrostek mailto: - kliknięcie otwiera program pocztowy z wpisanym adresatem (R.3.3).
href="[email protected]" bez mailto: przeglądarka traktuje jak nazwę pliku - to nie jest odnośnik pocztowy.
index.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Kursy komputerowe - programowanie</h3>
<table>
<tr>
<th>Nazwa</th>
<th>Liczba godzin</th>
<th>Cena</th>
</tr>
<tr>
<td>Kurs React.js</td>
<td>220</td>
<td>5000</td>
</tr>
<tr>
<td>Kurs JavaScript</td>
<td>150</td>
<td>3000</td>
</tr>
</table>
<h3>Adres do korespondencji</h3>
<ul>
<li>Adres: Katowice, ul. Mariacka 5</li>
<li>Telefon: 32 888 88 88</li>
<li><a href="mailto:[email protected]">skontaktuj się</a></li>
</ul>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Zawartość bloku głównego strony raty.html: Nagłówek trzeciego stopnia o treści „Oblicz miesięczną ratę”.
Zapisz index.html jako raty.html - nagłówek, menu i stopka zostają takie same - i w bloku <main> zostaw tylko nowy nagłówek <h3>.
raty.html HTML nowy plik <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Pole wyboru z etykietą „Kurs React.js”.
Pole wyboru to <input type="checkbox">. Etykieta <label for="react"> jest powiązana z polem przez jego id - kliknięcie napisu też zaznacza pole (R.2.9). Klasa kontrolki od razu, bo arkusz przypisuje ją wszystkim kontrolkom tej strony (R.3.5). <br> przenosi następną kontrolkę do nowego wiersza, jak na ilustracji 5.
raty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Pole wyboru z etykietą „Kurs JavaScript”.
Drugie pole wyboru z własnym id - skrypt będzie sprawdzał każde pole osobno.
raty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Pole edycyjne typu numerycznego poprzedzone etykietą: „Liczba rat: ”.
Tym razem etykieta stoi przed polem. type="number" - pole numeryczne: przyjmie tylko liczbę i dostanie strzałki (R.3.4). Identyfikator installments (raty).
raty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Lista rozwijana z danymi: „Warszawa”, „Katowice”, „Gdańsk”.
<select> z trzema <option> (R.2.10). Opcja bez atrybutu value ma za wartość swój tekst - skrypt dostanie wprost nazwę miasta.
raty.html HTML zmienione: 5 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
<select id="city" class="kontrolki">
<option>Warszawa</option>
<option>Katowice</option>
<option>Gdańsk</option>
</select><br>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Przycisk o treści „Oblicz”, którego wybranie uruchamia skrypt.
<button> z onclick="calculate()" - kliknięcie wywoła funkcję JavaScript, którą napiszesz w części o skrypcie (R.3.4). Na razie kliknięcie kończy się błędem w konsoli przeglądarki - funkcji jeszcze nie ma.
raty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
<select id="city" class="kontrolki">
<option>Warszawa</option>
<option>Katowice</option>
<option>Gdańsk</option>
</select><br>
<button class="kontrolki" onclick="calculate()">Oblicz</button>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Rozmieszczenie kontrolek zgodnie z ilustracją 5. Pusty paragraf do wyświetla wyniku działania skryptu.
Pusty <p id="result"> pod przyciskiem - skrypt wpisze tu zdanie z wynikiem. Rozmieszczenie jak na ilustracji 5: oba pola wyboru, pole liczby rat, lista i przycisk - każde w osobnym wierszu dzięki <br>.
raty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
<select id="city" class="kontrolki">
<option>Warszawa</option>
<option>Katowice</option>
<option>Gdańsk</option>
</select><br>
<button class="kontrolki" onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
</body>
</html>Kroki 30-39 · po tym etapie masz 32 z 40 kryteriów (pkt)
Domyślnie, dla wszystkich selektorów: krój czcionki Helvetica.
Utwórz style.css. Selektor * obejmuje wszystkie elementy strony (R.4.1).
style.css CSS nowy plik * {
font-family: Helvetica;
}Dla selektora ciała strony: kolor tła #EAEAEA.
Selektor znacznika body - arkusz wymaga stylu ciała strony wyłącznie przez selektor znacznika (R.4.2).
style.css CSS zmienione: 3 linie * {
font-family: Helvetica;
}
body {
background-color: #EAEAEA;
}Wspólne dla bloków menu i stopki: kolor tła #625B5B, biały kolor czcionki, marginesy wewnętrzne 20 px, wyrównanie tekstu do środka.
Jedna reguła dla dwóch selektorów oddzielonych przecinkiem: nav, footer.
style.css CSS zmienione: 6 linii * {
font-family: Helvetica;
}
body {
background-color: #EAEAEA;
}
nav, footer {
background-color: #625B5B;
color: white;
padding: 20px;
text-align: center;
}Dla selektora obrazu: szerokość 100%.
Baner wypełnia całą szerokość okna - przy każdej szerokości ekranu, z zachowaniem proporcji (R.4.4).
style.css CSS zmienione: 3 linie * {
font-family: Helvetica;
}
body {
background-color: #EAEAEA;
}
nav, footer {
background-color: #625B5B;
color: white;
padding: 20px;
text-align: center;
}
img {
width: 100%;
}Dla selektora listy punktowanej: margines zewnętrzny lewy 40 px, typ punktora okrąg.
Punktor „okrąg” to circle - puste kółko zamiast domyślnego pełnego disc (R.4.5, R.4.6).
style.css CSS zmienione: 4 linie * {
font-family: Helvetica;
}
body {
background-color: #EAEAEA;
}
nav, footer {
background-color: #625B5B;
color: white;
padding: 20px;
text-align: center;
}
img {
width: 100%;
}
ul {
margin-left: 40px;
list-style-type: circle;
}Dla odsyłaczy jedynie w bloku menu: czcionka pogrubiona, kolor tła #EAEAEA, kolor czcionki #625B5B, marginesy wewnętrzne 10 px, marginesy zewnętrzne 50 px, zaokrąglenie rogów 20 px.
„Jedynie w bloku menu” to selektor potomka nav a - odnośnik pocztowy w bloku głównym zostaje zwykły, niebieski. border-radius: 20px zaokrągla rogi tła, więc odnośniki wyglądają jak przyciski z ilustracji 3 (R.4.9).
Sam selektor a zmieni też odnośnik „skontaktuj się” - kryterium R.4.9 mówi „jedynie w bloku menu”.
style.css CSS zmienione: 8 linii * {
font-family: Helvetica;
}
body {
background-color: #EAEAEA;
}
nav, footer {
background-color: #625B5B;
color: white;
padding: 20px;
text-align: center;
}
img {
width: 100%;
}
ul {
margin-left: 40px;
list-style-type: circle;
}
nav a {
font-weight: bold;
background-color: #EAEAEA;
color: #625B5B;
padding: 10px;
margin: 50px;
border-radius: 20px;
}Gdy kursor myszy znajdzie się na odsyłaczu w menu jego kolor tła zmienia się na #625B5B, czcionki na #EAEAEA oraz pojawia się obramowanie linią ciągłą o szerokości 1 px i kolorze #EAEAEA.
Pseudoklasa :hover działa, dopóki kursor jest nad elementem: kolory się odwracają, a ramka 1px solid obrysowuje zaokrąglony przycisk (R.4.10). Najedź na odnośnik w podglądzie.
style.css CSS zmienione: 5 linii * {
font-family: Helvetica;
}
body {
background-color: #EAEAEA;
}
nav, footer {
background-color: #625B5B;
color: white;
padding: 20px;
text-align: center;
}
img {
width: 100%;
}
ul {
margin-left: 40px;
list-style-type: circle;
}
nav a {
font-weight: bold;
background-color: #EAEAEA;
color: #625B5B;
padding: 10px;
margin: 50px;
border-radius: 20px;
}
nav a:hover {
background-color: #625B5B;
color: #EAEAEA;
border: 1px solid #EAEAEA;
}Dla selektora tabeli: obramowanie linią kreskową o grubości 1 px i kolorze #625B5B, szerokość 60%, margines zewnętrzny lewy 40 px, wyrównanie tekstu do środka.
Linia kreskowa to dashed (kropkowa byłaby dotted). Ramka dotyczy samej tabeli, więc - jak na ilustracji 4 - kreski biegną tylko dookoła, bez linii między komórkami (R.4.4, R.4.6, R.4.7).
style.css CSS zmienione: 6 linii * {
font-family: Helvetica;
}
body {
background-color: #EAEAEA;
}
nav, footer {
background-color: #625B5B;
color: white;
padding: 20px;
text-align: center;
}
img {
width: 100%;
}
ul {
margin-left: 40px;
list-style-type: circle;
}
nav a {
font-weight: bold;
background-color: #EAEAEA;
color: #625B5B;
padding: 10px;
margin: 50px;
border-radius: 20px;
}
nav a:hover {
background-color: #625B5B;
color: #EAEAEA;
border: 1px solid #EAEAEA;
}
table {
border: 1px dashed #625B5B;
width: 60%;
margin-left: 40px;
text-align: center;
}Dla klasy o nazwie kontrolki: marginesy zewnętrzne 5 px. Klasa jest przypisana do wszystkich kontrolek na stronie raty.html (pól wyboru, pola edycyjnego, listy rozwijalnej i przycisku).
Selektor klasy zaczyna się kropką: .kontrolki (R.4.8). Klasa została już przypisana wszystkim kontrolkom przy budowie strony - teraz rozsuwają się o 5 px.
style.css CSS zmienione: 3 linie * {
font-family: Helvetica;
}
body {
background-color: #EAEAEA;
}
nav, footer {
background-color: #625B5B;
color: white;
padding: 20px;
text-align: center;
}
img {
width: 100%;
}
ul {
margin-left: 40px;
list-style-type: circle;
}
nav a {
font-weight: bold;
background-color: #EAEAEA;
color: #625B5B;
padding: 10px;
margin: 50px;
border-radius: 20px;
}
nav a:hover {
background-color: #625B5B;
color: #EAEAEA;
border: 1px solid #EAEAEA;
}
table {
border: 1px dashed #625B5B;
width: 60%;
margin-left: 40px;
text-align: center;
}
.kontrolki {
margin: 5px;
}Uwaga: styl CSS ciała strony, obrazu, listy i tabeli należy zdefiniować wyłącznie przy pomocy selektora tych znaczników. Jest to uwarunkowane projektem późniejszej rozbudowy witryny.
Sprawdź całość na index.html. Bloki stoją jeden pod drugim - tak układa je przeglądarka bez żadnego float czy flex, więc układ jest zgodny z ilustracją 3 (R.3.1). A zgodnie z uwagą arkusza style body, img, ul i table są zapisane selektorami znaczników, bez klas i identyfikatorów - klucz uznaje R.4.2, R.4.4 i R.4.5 tylko w tej postaci.
Styl tabeli zapisany jako klasa .tabela albo identyfikator #tabela wygląda tak samo, ale klucz go nie uznaje (uwaga przy R.4).
Kroki 40-45 · po tym etapie masz 40 z 40 kryteriów (pkt)
Wykonywany po stronie klienta, na stronie raty.html po kliknięciu przycisku „Oblicz”.
Skrypt piszesz w <script> na końcu <body> strony raty.html - wykonuje się w przeglądarce, bez serwera. Funkcja ma tę samą nazwę, co w onclick przycisku: calculate (oblicz). Na razie jest pusta - kliknięcie „Oblicz” nie powoduje już błędu, ale niczego nie robi.
raty.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
<select id="city" class="kontrolki">
<option>Warszawa</option>
<option>Katowice</option>
<option>Gdańsk</option>
</select><br>
<button class="kontrolki" onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
<script>
function calculate() {
}
</script>
</body>
</html>Pobiera dane z kontrolek. Ustala całkowitą kwotę za wybrane kursy na podstawie cen z tabeli z ilustracji 4.
Zmienna total (suma) zaczyna od zera. document.getElementById("react") znajduje pole wyboru, a jego właściwość checked ma wartość true, gdy pole jest zaznaczone. Wtedy doliczasz cenę z tabeli: 5000 (R.5.2).
raty.html HTML zmienione: 4 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
<select id="city" class="kontrolki">
<option>Warszawa</option>
<option>Katowice</option>
<option>Gdańsk</option>
</select><br>
<button class="kontrolki" onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
<script>
function calculate() {
let total = 0;
if (document.getElementById("react").checked) {
total = total + 5000;
}
}
</script>
</body>
</html>Ustala całkowitą kwotę za wybrane kursy na podstawie cen z tabeli z ilustracji 4.
Drugi warunek, niezależny od pierwszego (osobny if, nie else if): zaznaczone oba kursy dają 5000 + 3000 = 8000, jeden - jego cenę, żaden - 0 (R.5.3).
else if zamiast drugiego if liczy tylko pierwszy zaznaczony kurs - przy obu zaznaczonych wynik to 5000 zamiast 8000.
raty.html HTML zmienione: 3 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
<select id="city" class="kontrolki">
<option>Warszawa</option>
<option>Katowice</option>
<option>Gdańsk</option>
</select><br>
<button class="kontrolki" onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
<script>
function calculate() {
let total = 0;
if (document.getElementById("react").checked) {
total = total + 5000;
}
if (document.getElementById("javascript").checked) {
total = total + 3000;
}
}
</script>
</body>
</html>Oblicza koszt jednej raty na podstawie kwoty całkowitej. Dla uproszczenia kwota całkowita jest dzielona przez podaną liczbę rat.
.value pola liczbowego to wpisana liczba (jako tekst, np. „10”). Operator / w JavaScripcie sam zamienia ją na liczbę, więc total / installments od razu daje wysokość raty: 8000 / 10 = 800 (R.5.4).
raty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
<select id="city" class="kontrolki">
<option>Warszawa</option>
<option>Katowice</option>
<option>Gdańsk</option>
</select><br>
<button class="kontrolki" onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
<script>
function calculate() {
let total = 0;
if (document.getElementById("react").checked) {
total = total + 5000;
}
if (document.getElementById("javascript").checked) {
total = total + 3000;
}
let installments = document.getElementById("installments").value;
let rate = total / installments;
}
</script>
</body>
</html><miasto> oznacza wybór z listy rozwijalnej.
.value listy rozwijanej to wartość wybranej opcji - w tym rozwiązaniu tekst opcji, czyli nazwa miasta.
raty.html HTML zmienione: 1 linia <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
<select id="city" class="kontrolki">
<option>Warszawa</option>
<option>Katowice</option>
<option>Gdańsk</option>
</select><br>
<button class="kontrolki" onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
<script>
function calculate() {
let total = 0;
if (document.getElementById("react").checked) {
total = total + 5000;
}
if (document.getElementById("javascript").checked) {
total = total + 3000;
}
let installments = document.getElementById("installments").value;
let rate = total / installments;
let city = document.getElementById("city").value;
}
</script>
</body>
</html>Wyświetla pod przyciskiem w paragrafie treść: „Kurs odbędzie się w <miasto>. Koszt całkowity: <kwota> zł. Płacisz <liczba> rat po <rata> zł”, gdzie <kwota> oznacza obliczoną kwotę całkowitą, <liczba> oznacza podaną liczbę rat, a <rata> oznacza wyliczoną ratę.
Zdanie sklejasz operatorem + ze stałych napisów i czterech zmiennych, a gotowe wpisujesz do pustego akapitu result przez innerHTML (tabela 1). Spacje i kropki są w napisach - po złożeniu nie może zabraknąć odstępu przed liczbą. Zaznacz w podglądzie oba kursy, wpisz 10, wybierz Katowice i kliknij „Oblicz”: „Kurs odbędzie się w Katowice. Koszt całkowity: 8000 zł. Płacisz 10 rat po 800 zł” - jak na ilustracji 5. Sprawdź też inne miasto i inną liczbę rat, tak jak zrobi to egzaminator (R.5.5 - R.5.7). Nazwy zmiennych i funkcji są po angielsku i mówią, co przechowują (R.5.8).
raty.html HTML zmienione: 2 linie <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
<select id="city" class="kontrolki">
<option>Warszawa</option>
<option>Katowice</option>
<option>Gdańsk</option>
</select><br>
<button class="kontrolki" onclick="calculate()">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
<script>
function calculate() {
let total = 0;
if (document.getElementById("react").checked) {
total = total + 5000;
}
if (document.getElementById("javascript").checked) {
total = total + 3000;
}
let installments = document.getElementById("installments").value;
let rate = total / installments;
let city = document.getElementById("city").value;
document.getElementById("result").innerHTML = "Kurs odbędzie się w " + city + ". Koszt całkowity: " + total
+ " zł. Płacisz " + installments + " rat po " + rate + " zł";
}
</script>
</body>
</html>Krok 46 · po tym etapie masz 40 z 40 kryteriów (pkt)
Przycisk o treści „Oblicz”, którego wybranie uruchamia skrypt.
Cztery poprawki z prawdziwych projektów:
addEventListener("click", calculate) zamiast atrybutu onclick w HTML: zachowanie przycisku jest w skrypcie, a HTML opisuje tylko treść. Przycisk dostaje identyfikator calculate.Number() zamienia tekst na liczbę, a Number.isInteger z warunkiem >= 1 przepuszcza tylko sensowną liczbę rat.toFixed(2) - rata w złotych i groszach: 8000 / 3 to 2666.67, a nie 2666.6666666666665.textContent zamiast innerHTML - wpisujesz zwykły tekst, więc nic nie zostanie zinterpretowane jako HTML.Stare linie zostają w komentarzach. Na egzaminie wystarczy wersja wcześniejsza - klucz przyjmuje onclick (R.3.4), a zaokrąglenia i sprawdzania nie wymaga.
raty.html HTML zmienione: 13 linii <!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Kursy komputerowe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="baner.png" alt="kursy komputerowe">
</header>
<nav>
<a href="index.html">Strona główna</a>
<a href="raty.html">Koszt rat</a>
<a href="https://moje-szkolenia.pl/">Nasz partner</a>
</nav>
<main>
<h3>Oblicz miesięczną ratę</h3>
<input type="checkbox" id="react" class="kontrolki">
<label for="react">Kurs React.js</label><br>
<input type="checkbox" id="javascript" class="kontrolki">
<label for="javascript">Kurs JavaScript</label><br>
<label for="installments">Liczba rat: </label>
<input type="number" id="installments" class="kontrolki"><br>
<select id="city" class="kontrolki">
<option>Warszawa</option>
<option>Katowice</option>
<option>Gdańsk</option>
</select><br>
<button class="kontrolki" id="calculate">Oblicz</button>
<p id="result"></p>
</main>
<footer>
<p>Autor strony: Bartosz Bryniarski</p>
</footer>
<script>
function calculate() {
let total = 0;
if (document.getElementById("react").checked) {
total = total + 5000;
}
if (document.getElementById("javascript").checked) {
total = total + 3000;
}
let installments = Number(document.getElementById("installments").value);
let result = document.getElementById("result");
if (!Number.isInteger(installments) || installments < 1) {
result.textContent = "Podaj liczbę rat - liczbę całkowitą większą od zera.";
return;
}
let rate = (total / installments).toFixed(2);
// let rate = total / installments;
let city = document.getElementById("city").value;
result.textContent = "Kurs odbędzie się w " + city + ". Koszt całkowity: " + total
+ " zł. Płacisz " + installments + " rat po " + rate + " zł";
// document.getElementById("result").innerHTML = ...
}
document.getElementById("calculate").addEventListener("click", calculate);
</script>
</body>
</html>Krok 47 · po tym etapie masz 40 z 40 kryteriów (pkt)
Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy. W folderze z numerem zdającego powinny znajdować się pliki: baner.png, import.jpg, index.html, kw1.png, kw2.png, kw3.png, kw4.png, kwerendy.txt, raty.html, przeglądarka.txt, style.css, ewentualnie inne przygotowane pliki.
W przeglądarka.txt wpisujesz nazwę przeglądarki, w której sprawdzasz strony. Strony w tym arkuszu nie wymagają serwera - otwierają się wprost z dysku.
Sprawdź listę plików z arkusza, 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 46.
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.