Rozwiązanie krok po kroku: Planer zadań z notatkami

Arkusz: Utwórz bazę danych o nazwie notatki, z zestawem polskich znaków (np. utf8_unicode_ci).

W przeglądarce otwieramy http://localhost/phpmyadmin, klikamy Nowa w lewym panelu, wpisujemy nazwę notatki i z listy metod porównywania wybieramy utf8_unicode_ci (arkusz podaje ją jako przykład; utf8_polish_ci też jest poprawne). Bez zestawu z polskimi znakami nazwy notatek z pliku SQL („Wyprowadzić psa”, „Projekt na geografię”) mogłyby stracić ogonki.

Arkusz: Do bazy zaimportuj tabele z pliku baza.sql z rozpakowanego archiwum.

Wchodzimy do bazy notatki (musi być zaznaczona w lewym panelu), karta Import, Wybierz plik → baza.sql z rozpakowanego archiwum, Wykonaj.

Po imporcie są dwie tabele z ilustracji 1: osoby (id, imie, nazwisko - 4 wiersze) i notatki (id, Osoby_id, nazwa, tresc, priorytet - 13 wierszy). Kolumna Osoby_id w notatkach to klucz obcy wskazujący na id osoby - relacja jeden do wielu (jedna osoba ma wiele notatek). Uwaga na wielką literę w Osoby_id - w zapytaniach pisz ją tak, jak jest w tabeli.

Arkusz: Wykonaj zrzut ekranu po imporcie. Zrzut zapisz w formacie PNG pod nazwą import. Nie kadruj zrzutu. Powinien on obejmować cały ekran monitora, z widocznym paskiem zadań.

Klawisz Print Screen (cały ekran, nie Alt+PrtScr, który łapie tylko aktywne okno), wklejamy do edytora grafiki i zapisujemy jako import.png w folderze z numerem zdającego. Na zrzucie ma być widać komunikat phpMyAdmin o pomyślnym imporcie albo obie tabele w bazie.

Formaty w tym arkuszu: zrzut importu w PNG, zrzuty kwerend w JPEG.

Arkusz: Zapytanie 1: wybierające jedynie najmniejszą wartość priorytetu notatki dla osoby o id równym 3.

Zakładka SQL w phpMyAdmin (przy zaznaczonej bazie notatki). Klauzula po klauzuli:

• SELECT MIN(priorytet) - funkcja grupująca MIN zwraca najmniejszą wartość z kolumny w wybranych wierszach. Wynik to jedna liczba, nie lista notatek. „Jedynie” oznacza, że nie dokładamy innych kolumn.
• FROM notatki - priorytety są w tabeli notatek.
• WHERE Osoby_id = 3 - tylko notatki osoby o id 3 (Ewelina). Filtrujemy po kluczu obcym, nie trzeba łączyć z tabelą osoby, bo arkusz podaje id, nie imię.

Wynik: dokładnie jedna wartość - 2 (Ewelina ma notatki o priorytetach 5, 5, 3, 2, 5). Zapytanie kopiujemy do pliku kwerendy.txt i robimy zrzut całego ekranu: kw1.jpg.

Arkusz: Zapytanie 2: wybierające jedynie nazwę notatki i jej priorytet dla notatek, których nazwa zawiera cząstkę „na”.

• SELECT nazwa, priorytet FROM notatki - dwie kolumny z tabeli notatek.
• WHERE nazwa LIKE "%na%" - LIKE porównuje napis ze wzorcem, a % zastępuje dowolny ciąg znaków (także pusty). "%na%" znaczy: cokolwiek, potem „na”, potem cokolwiek - czyli „na” gdziekolwiek w nazwie. Zwykłe = wymagałoby nazwy równej dokładnie „na”.

Wynik: dokładnie 4 wiersze - Gimnastyka 1, Projekt na geografię 2, Wyjazd na wakacje 5, Weterynarz Brutus 5. Cząstka może być w środku wyrazu, nie tylko jako osobne słowo. Zrzut: kw2.jpg.

Arkusz: Zapytanie 3: wybierające jedynie imię osoby i odpowiadającą mu nazwę notatki dla notatek, których priorytet jest równy 5. Należy posłużyć się relacją.

Imię jest w tabeli osoby, nazwa notatki w notatki - „posłużyć się relacją” znaczy złączyć obie tabele po kluczu.

• SELECT imie, nazwa - po jednej kolumnie z każdej tabeli.
• FROM notatki JOIN osoby ON osoby.id = notatki.Osoby_id - do każdej notatki dokładamy wiersz osoby, której id równa się Osoby_id notatki. ON mówi, po których kolumnach pasują wiersze. Nazwy poprzedzamy tabelą (osoby.id), bo id jest w obu tabelach i bez tego baza nie wie, o którą chodzi.
• WHERE priorytet = 5 - tylko notatki o najwyższym priorytecie.

Wynik: dokładnie 5 wierszy - Krzysiek: Wyprowadzić psa, Spacer z kumplem; Ewelina: Wyjazd na wakacje, Weterynarz Brutus, Lekarz. Zrzut: kw3.jpg.

Arkusz: Zapytanie 4: liczące dla każdego imienia osoby liczbę jego notatek. Kwerenda wybiera jedynie imię i odpowiadającą mu liczbę notatek. Należy posłużyć się relacją.

• SELECT imie, COUNT(*) - imię i liczba wierszy w grupie. COUNT(*) liczy wiersze; klucz przyjmuje też COUNT(Osoby_id) albo dowolną inną kolumnę.
• FROM notatki JOIN osoby ON osoby.id = notatki.Osoby_id - to samo złączenie co w zapytaniu 3, bo imię jest w drugiej tabeli.
• GROUP BY imie - wiersze o tym samym imieniu zlewają się w jedną grupę, a COUNT liczy osobno dla każdej. Bez GROUP BY wyszłaby jedna liczba (13) dla wszystkich.

Wynik: dokładnie 4 wiersze - Ewelina 5, Grześ 1, Krzysiek 4, Paula 3. Zrzut: kw4.jpg. Plik kwerendy.txt ma komplet czterech zapytań.

Arkusz: Plik obraz.jpg, wypakowany z archiwum, należy przeskalować z zachowaniem proporcji do wysokości 610 px.

Plik z archiwum ma 480 × 640 px (pionowy). W edytorze grafiki rastrowej (np. GIMP: Obraz → Skaluj obraz) wpisujemy wysokość 610 px przy zamkniętym łańcuchu proporcji. Szerokość przeliczy się sama na 458 px (480 · 610 / 640 = 457,5) - i dokładnie to sprawdza egzaminator (458 ±5 px). Zapisujemy jako obraz.jpg w folderze zdającego.

Wysokość 610 px nie jest przypadkowa: tyle samo dostanie w CSS blok boczny, w którym obraz będzie siedział.

Arkusz: Składa się ze strony o nazwie notatki.html. Zapisana w języku HTML5.

W edytorze zaznaczającym składnię tworzymy plik notatki.html w folderze zdającego, obok obraz.jpg. Tym razem rozszerzenie .html, bo arkusz nie wymaga PHP - strona działa nawet otwarta prosto z dysku, bez XAMPP-a.

Pierwsza linia <!DOCTYPE html> mówi przeglądarce, że dokument jest w HTML5. Dalej szkielet każdej strony: <html>, a w nim <head> (informacje o stronie) i <body> (to, co widać w oknie).

Arkusz: Zadeklarowany polski język zawartości witryny.

Atrybut lang="pl" w znaczniku <html>. Czytnik ekranu czyta wtedy tekst polską wymową, a przeglądarka dobiera słownik. Na stronie nic się nie zmienia - to informacja dla programów.

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

<meta charset="UTF-8"> jako pierwsza rzecz w <head>. „Jawnie” znaczy: wpisane w kodzie, nie zdane na domysł przeglądarki. Bez tej linii „Wyprowadzić psa” mogłoby wyświetlić się jako krzaki. Plik trzeba też zapisać w UTF-8.

Arkusz: Tytuł strony widoczny na karcie przeglądarki: „Planer zadań”.

<title> w <head> - napis na karcie przeglądarki, nie nagłówek na stronie (ten dojdzie w <header>). Klucz R.2.3 sprawdza dokładnie tekst „Planer zadań”.

Arkusz: Arkusz stylów w pliku o nazwie styl.css prawidłowo połączony z kodem strony.

<link rel="stylesheet" href="styl.css"> w <head>. Plik styl.css napiszemy po HTML - połączenie może już być, zadziała, gdy plik pojawi się w tym samym folderze.

Arkusz: Podział strony na blok boczny i obok niego bloki: blok nagłówkowy, blok dodający zadanie, blok główny, blok stopki. Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 3.

Z ilustracji 3: po lewej wysoki blok boczny, a obok niego, jeden pod drugim, cztery bloki. Semantyczne odpowiedniki z tabeli 4 arkusza: blok boczny to <aside>, nagłówkowy <header>, „blok dodający zadanie” to blok nawigacyjny <nav> (tak nazywa go dalsza część arkusza i klucz R.2.4), główny <main>, stopka <footer>.

Kolejność w kodzie ma znaczenie dla układu: <aside> jako pierwszy, bo w CSS popłynie w lewo, a reszta ustawi się obok niego. Na razie bloki są puste i stoją jeden pod drugim - układ zrobi CSS.

Arkusz: Zawartość bloku bocznego: obraz o nazwie obraz.jpg z tekstem alternatywnym „notatki”.

<img src="obraz.jpg" alt="notatki"> - plik przeskalowany w poprzednim etapie, leżący obok notatki.html. Tekst alternatywny przepisujemy dokładnie z arkusza: czyta go czytnik ekranu i pokazuje przeglądarka, gdy obraz się nie wczyta. W podglądzie obraz ma na razie swój naturalny rozmiar 458 × 610 px.

Arkusz: Zawartość bloku nagłówkowego: nagłówek drugiego stopnia o treści „Moje zadania”.

Drugiego stopnia to <h2> - nie <h1>, choć to pierwszy nagłówek na stronie. Egzaminator sprawdza dokładnie ten znacznik, który wskazał arkusz (klucz R.2.5).

Arkusz: Zawartość bloku nawigacyjnego: pole edycyjne z podpowiedzią o treści „Dodaj zadanie...”.

Pole edycyjne to <input type="text">. „Podpowiedź” to atrybut placeholder - szary tekst widoczny w pustym polu, który znika, gdy użytkownik zacznie pisać (klucz R.3.3 wymienia ten atrybut wprost). Pole dostaje id="task-input", bo skrypt będzie z niego czytał wpisany tekst.

Nazwy identyfikatorów, klas i zmiennych piszemy w tym rozwiązaniu po angielsku (arkusz dopuszcza polski lub angielski, wymaga konsekwencji); wyjątkiem są nazwy narzucone przez arkusz (notatki.html, styl.css, obraz.jpg).

Arkusz: Przycisk „Dodaj”, którego wciśnięcie powoduje wywołanie funkcji w skrypcie.

<button>Dodaj</button> obok pola. Nie ma tu formularza, więc przycisk niczego nie wysyła - jego jedyną rolą będzie uruchomienie funkcji JavaScript. Wywołanie funkcji dopiszemy, gdy będzie gotowy skrypt; teraz budujemy strukturę.

Arkusz: Zawartość bloku głównego: lista punktowana (nieuporządkowana) zawierająca w stanie początkowym 6 elementów. Każdy element listy zawiera: wpis (kolejne wpisy można skopiować do kodu HTML z pliku zadania.txt), przycisk o treści „Wykonane”, którego wciśnięcie powoduje wywołanie skryptu dla danego elementu listy.

Lista nieuporządkowana <ul> z id="task-list" - skrypt będzie do niej dokładał nowe elementy. Pierwszy element <li> zawiera tekst zadania skopiowany z zadania.txt i wewnątrz tego samego <li> przycisk <button>Wykonane</button> - klucz R.2.9 sprawdza, że przycisk jest w środku elementu listy, nie obok.

Wywołanie skryptu przez przycisk dopiszemy w etapie JavaScript.

Arkusz: Lista punktowana (nieuporządkowana) zawierająca w stanie początkowym 6 elementów. Wpis (kolejne wpisy można skopiować do kodu HTML z pliku zadania.txt).

Pięć kolejnych <li> według tego samego wzoru, z tekstami skopiowanymi z zadania.txt (Ctrl+C / Ctrl+V - nie przepisuj, żeby nie robić literówek). Lista ma teraz 6 elementów, każdy z własnym przyciskiem - to stan początkowy z ilustracji 2.

Arkusz: Zawartość stopki: nagłówek trzeciego stopnia o treści: „Notatki: ”, dalej wstawiony numer zdającego.

<h3> w <footer>. W tym rozwiązaniu po dwukropku stoi nazwisko autora - na egzaminie wpisujesz w to miejsce swój numer zdającego (PESEL), bo tego sprawdza klucz R.2.5. Struktura HTML strony jest kompletna - dalej style.

Arkusz: Domyślne formatowanie wszystkich selektorów: krój czcionki Verdana.

Tworzymy plik styl.css obok notatki.html. „Wszystkie selektory” to selektor uniwersalny * - reguła obejmuje każdy element strony, także przyciski i pole. font-family: Verdana ustawia krój. W podglądzie zmienia się czcionka - znak, że <link> z HTML zadziałał.

Arkusz: Dla bloku bocznego: szerokość 20%, wysokość 610 px.

Selektor aside. Szerokość w procentach liczy się względem rodzica (<body>), wysokość jest stała - równa wysokości przeskalowanego obrazu. Obraz na razie wystaje poza wąski blok, bo ma jeszcze swój naturalny rozmiar.

Arkusz: Dla obrazu: szerokość 100%, wysokość 610 px.

Selektor znacznika img. width: 100% to cała szerokość rodzica, czyli bloku bocznego - obraz dopasuje się do 20% okna. Wysokość stała 610 px, tak jak blok. Przy innej proporcji okna obraz może się lekko zniekształcić - arkusz tego wymaga, a klucz to sprawdza (R.4.4, R.4.5).

Arkusz: Dla bloku nagłówkowego, stopki i nawigacyjnego: kolor tła MediumPurple, biały kolor czcionki, szerokość 80%, wysokość 50 px, wyrównanie tekstu do środka, cień tekstu o przesunięciu 4 px w obu osiach i kolorze DimGray.

Trzy bloki mają te same cechy, więc jedna reguła z selektorami po przecinku: header, footer, nav. Kolory nazwane przepisujemy z arkusza. Cień tekstu to text-shadow z tabeli 2 arkusza: pierwsza wartość to przesunięcie w poziomie, druga w pionie, potem kolor - 4px 4px DimGray. Rozmycia arkusz nie wymaga, więc je pomijamy.

Szerokość 80% dopełnia 20% bloku bocznego - obok siebie ustawimy je za dwa kroki.

Arkusz: Dodatkowo dla bloku nawigacyjnego: margines wewnętrzny górny 10 px.

Osobna reguła nav z padding-top: 10px - margines wewnętrzny tylko z góry, żeby pole i przycisk nie przylegały do krawędzi bloku. Druga reguła dla tego samego selektora dokłada właściwość, nie kasuje wspólnych stylów z poprzedniego kroku.

Arkusz: Dla bloku głównego: kolor tła Thistle, szerokość 80%, wysokość 450 px, paski przewijania dodawane tylko, gdy zawartość nie mieści się w bloku.

Selektor main. „Paski tylko, gdy zawartość się nie mieści” to overflow: auto (klucz R.4.8). scroll pokazywałby je zawsze, hidden obcinałby listę bez możliwości przewinięcia. Po dodaniu wielu zadań lista przekroczy 450 px i wtedy pojawi się pasek.

Arkusz: Podział strony na blok boczny i obok niego bloki: blok nagłówkowy, blok dodający zadanie, blok główny, blok stopki. Podział strony na bloki zrealizowany za pomocą semantycznych znaczników bloków języka HTML5 tak, aby po uruchomieniu w przeglądarce układ bloków na stronie był zgodny z ilustracją 3.

Wszystkie bloki dostają float: left - pływają w lewo i układają się jak słowa w wierszu: aside (20%) zajmuje lewą kolumnę, header (80%) mieści się obok niego, nav już się nie mieści w tym samym wierszu, więc idzie niżej - ale wciąż na prawo od wysokiego aside, bo ten sięga 610 px w dół. Tak samo main i footer. Suma wysokości prawej kolumny (50 + 60 + 450 + 50) mieści się w 610 px bloku bocznego, więc stopka stoi obok niego, jak na ilustracji 3.

Dopisujemy float: left do trzech istniejących reguł (aside, header, footer, nav, main). Klucz przyjmuje też display: flex albo grid.

Arkusz: Dla przycisków w liście: opływanie do prawej strony, kolor tła MediumPurple, biały kolor czcionki, wysokość 30 px, bez obramowania.

Selektor potomka li button - tylko przyciski wewnątrz elementów listy; przycisk „Dodaj” w nawigacji zostaje domyślny. Klucz R.4.2 mówi wprost: id byłoby tu błędem, bo przycisków jest sześć (i przybędą nowe). „Opływanie do prawej” to float: right - przycisk odsuwa się na prawą krawędź, a tekst zadania zostaje po lewej, jak na ilustracji 2. border: none zdejmuje domyślną ramkę przeglądarki.

Arkusz: Dla listy punktowanej: marginesy zewnętrzne górny i dolny 40 px, lewy i prawy automatycznie wyliczane przez przeglądarkę, szerokość 70%, rozmiar czcionki 25 px, obramowanie linią ciągłą o szerokości 2 px i kolorze MediumPurple, lista nie ma znaków punktora.

Selektor ul. Skrót margin: 40px auto to dwie wartości: pierwsza dla góry i dołu, druga dla lewej i prawej - auto przy ustalonej szerokości wyśrodkowuje listę w bloku głównym. border: 2px solid MediumPurple łączy grubość, styl (ciągła) i kolor. list-style-type: none zdejmuje kropki - lista dalej jest „punktowana” w sensie HTML (<ul>), tylko bez widocznych punktorów, jak na ilustracji 2.

Arkusz: Dla elementu listy: marginesy wewnętrzne 10 px.

Selektor li, padding: 10px - odstęp wewnątrz każdego elementu, dzięki czemu tekst nie klei się do ramki, a przycisk ma miejsce.

Arkusz: Dla parzystych elementów listy: kolor tła #DDCADD.

Pseudoklasa :nth-child(even) wybiera co drugi element (2., 4., 6. …) wśród rodzeństwa - dokładnie „parzyste elementy listy”. Nie trzeba dodawać klas do co drugiego <li> - i dobrze, bo nowe elementy dopisze skrypt, a reguła obejmie je automatycznie. Efekt: pasy jak na ilustracji 2.

Arkusz: Gdy kursor znajduje się na elemencie listy, jego kolor tła zmienia się na Lavender.

Pseudoklasa :hover opisuje stan „kursor nad elementem”. Reguła stoi po li:nth-child(even) i ma tę samą wagę, więc przy najechaniu wygrywa - także dla parzystych elementów. Najedź w podglądzie na dowolne zadanie. Arkusz stylów jest kompletny.

Arkusz: Napisany w języku JavaScript i działający na liście punktowanej. Przycisk o treści „Wykonane”, którego wciśnięcie powoduje wywołanie skryptu dla danego elementu listy.

Tworzymy plik script.js i podpinamy go na końcu <body> przez <script src="script.js"></script> - na końcu, żeby lista już istniała, gdy skrypt zacznie działać.

Funkcja markDone(button) ma przekreślić zadanie przy tym konkretnym przycisku, więc musi wiedzieć, który przycisk kliknięto. Najprostszy sposób z tabeli 1 arkusza: atrybut onclick="markDone(this)" na każdym z sześciu przycisków - słowo this w atrybucie oznacza „ten element, który kliknięto”, i trafia do funkcji jako parametr button. Ciało funkcji wypełnimy w następnym kroku.

Arkusz: Działanie funkcji wywoływanej po wciśnięciu dowolnego z przycisków „Wykonane”: przekreśla treść elementu listy związanego z tym przyciskiem.

Jedna linia. button.parentElement to rodzic przycisku, czyli <li> z tekstem zadania - „element listy związany z tym przyciskiem”. Jego styl zmieniamy przez style.textDecoration = 'line-through' (nazwa CSS text-decoration w JavaScript traci myślnik: textDecoration).

Sam przycisk nie zostaje przekreślony, bo jako element pływający (float: right) nie dziedziczy dekoracji tekstu. Podgląd działa - kliknij „Wykonane” przy dowolnym zadaniu; kolejność klikania nie ma znaczenia, bo każdy przycisk zna swojego rodzica (klucz R.5.5).

Arkusz: Przycisk „Dodaj”, którego wciśnięcie powoduje wywołanie funkcji w skrypcie.

Druga funkcja, addTask(), na razie pusta. Przycisk „Dodaj” dostaje onclick="addTask()" - tu nie trzeba przekazywać this, bo funkcja i tak wie, skąd wziąć dane: z pola task-input i listy task-list, które mają identyfikatory. To spełnia kryterium R.3.4.

Arkusz: Działanie funkcji wywoływanej po wciśnięciu przycisku „Dodaj”: tworzy nowy element listy na jej końcu. Element składa się z treści pobranej z pola edycyjnego.

document.getElementById('task-input') (tabela 1) znajduje pole po identyfikatorze, a .value to tekst, który użytkownik wpisał. Zapisujemy go w stałej text. const (jak w przykładach z tabeli 3 arkusza) deklaruje zmienną, której nie będziemy nadpisywać - nazwy po angielsku, znaczące (R.5.7).

Arkusz: Tworzy nowy element listy na jej końcu. Element składa się z treści pobranej z pola edycyjnego.

document.createElement('li') (tabela 3 arkusza) tworzy nowy, jeszcze nigdzie niewstawiony element <li>. item.innerText = text wpisuje do niego tekst z pola. Element istnieje tylko w pamięci - na stronie pojawi się dopiero po appendChild, za dwa kroki.

Arkusz: Przycisku o treści „Wykonane”, który jest formatowany tak jak reszta przycisków w liście i jego kliknięcie powoduje wywołanie odpowiedniej funkcji.

Trzy rzeczy z tego zdania:

• createElement('button') z innerText = 'Wykonane' - przycisk o wymaganej treści,
• setAttribute('onclick', 'markDone(this)') (tabela 1) - dokładnie ten sam atrybut, który mają przyciski wpisane w HTML, więc kliknięcie wywoła markDone dla nowego elementu (R.5.6),
• item.appendChild(button) - przycisk trafia do wnętrza nowego <li>.

Formatowanie „jak reszta przycisków” (R.5.4) dostajemy za darmo: reguła CSS li button obejmuje każdy przycisk wewnątrz elementu listy, także dodany skryptem.

Arkusz: Tworzy nowy element listy na jej końcu.

document.getElementById('task-list').appendChild(item) - gotowy <li> (tekst + przycisk) trafia na koniec listy; appendChild zawsze dokłada jako ostatnie dziecko (tabela 3 arkusza). Nowy element od razu dostaje style listy, a jeśli jest parzysty - także jasne tło.

Podgląd działa jak na ilustracji 4: wpisz „Lekarz”, kliknij „Dodaj”, potem „Wykonane” przy nowym zadaniu. Skrypt spełnia wszystkie kryteria arkusza - dalej refaktor na wersję, jaką pisze się w prawdziwych projektach.

Arkusz: Napisany w języku JavaScript i działający na liście punktowanej.

Rozwiązanie z onclick jest poprawne i na egzaminie wystarcza. W prawdziwych projektach zachowanie strony trzyma się w skrypcie, a HTML opisuje tylko strukturę - dzięki temu jeden plik JS można zmienić bez ruszania HTML, a kod nie jest rozsiany po atrybutach.

Stare linie zostają w komentarzu HTML <!-- … --> do porównania, a pod nimi te same elementy bez onclick. Przycisk „Dodaj” dostaje id="add-button", żeby skrypt mógł go znaleźć. Po tym kroku kliknięcia przestają działać - podłączymy je w skrypcie.

Arkusz: Przycisk „Dodaj”, którego wciśnięcie powoduje wywołanie funkcji w skrypcie.

addEventListener('click', addTask) mówi przeglądarce: „gdy ten element zostanie kliknięty, uruchom addTask”. Pierwszy argument to nazwa zdarzenia (click, bez „on”), drugi - funkcja, nie jej wywołanie: addTask bez nawiasów. Linia stoi poza funkcjami, na końcu pliku - wykona się raz, przy wczytaniu skryptu, a skrypt jest na końcu <body>, więc przycisk już istnieje. „Dodaj” w podglądzie znów działa.

Arkusz: Przycisk o treści „Wykonane”, którego wciśnięcie powoduje wywołanie skryptu dla danego elementu listy.

Sześć przycisków, więc pętla. document.querySelectorAll('#task-list button') (tabela 1) zwraca wszystkie przyciski wewnątrz listy - selektor jak w CSS. for (const button of ...) przechodzi po nich, a każdy dostaje własny nasłuchiwacz. Funkcja anonimowa function () { markDone(button); } jest potrzebna, bo markDone wymaga argumentu, a nasłuchiwacz wywołuje funkcję bez argumentów - const button z pętli pamięta w każdym obiegu „swój” przycisk.

Przekreślanie w podglądzie działa dla sześciu zadań ze stanu początkowego. Nowe zadania dodawane przez addTask jeszcze używają setAttribute('onclick', …) - poprawimy to w następnym kroku.

Arkusz: Przycisku o treści „Wykonane”, który jest formatowany tak jak reszta przycisków w liście i jego kliknięcie powoduje wywołanie odpowiedniej funkcji.

W addTask zamiast setAttribute('onclick', …) rejestrujemy nasłuchiwacz tak samo jak w pętli - stara linia zostaje w komentarzu //. Teraz żaden przycisk nie ma atrybutu onclick, a cała logika jest w jednym miejscu. Wpisz zadanie, dodaj, kliknij „Wykonane” przy nowym - działa (R.5.6).

Arkusz: Tworzy nowy element listy na jej końcu. Element składa się z treści pobranej z pola edycyjnego.

Dwie rzeczy, których arkusz nie wymaga, a użytkownik oczekuje:

• walidacja: trim() obcina spacje z obu stron, a if (text === '') return; przerywa funkcję, gdy pole jest puste - bez tego kliknięcie „Dodaj” tworzyło pusty element listy z samym przyciskiem,
• porządek: po dodaniu czyścimy pole (input.value = '') i wracamy do niego kursorem (input.focus()), żeby można było od razu wpisać kolejne zadanie.

Sprawdź w podglądzie: pusty „Dodaj” nic nie robi, a po dodaniu zadania pole jest puste. To już wersja gotowa do prawdziwego użycia.

Arkusz: Po zakończeniu pracy utwórz plik tekstowy o nazwie przeglądarka.txt. Zapisz w nim nazwę przeglądarki internetowej, w której weryfikowana była poprawność działania witryny. Nagraj płytę z rezultatami pracy.

W przeglądarka.txt wpisujemy nazwę przeglądarki, w której sprawdzaliśmy stronę. Na egzaminie nazwa pliku dokładnie jak w arkuszu, z „ą” - w tym rozwiązaniu plik nazywa się przegladarka.txt tylko dlatego, że podgląd nie przyjmuje polskich znaków w nazwach plików.

W folderze z numerem zdającego muszą być: import.png, kw1.jpg, kw2.jpg, kw3.jpg, kw4.jpg, kwerendy.txt, notatki.html, obraz.jpg, przeglądarka.txt, styl.css oraz script.js (arkusz dopuszcza „inne przygotowane pliki”). Nagrywamy płytę, sprawdzamy jej odczyt i opisujemy numerem zdającego. Pusta lub nieczytelna płyta to zero punktów za wszystkie pięć rezultatów.