Słowniczek — JavaScript

const wydarzenia = [{ tytul: "Dzień kodowania", punkty: ["HTML", "JS", ""] }];
for (const wydarzenie of wydarzenia) {
    console.log(wydarzenie.tytul);
    for (const punkt of wydarzenie.punkty) {
        if (punkt.trim() === "") continue;
        console.log(punkt);
    }
}

<!doctype html>
<html lang="pl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>
            Tablica wydarzeń / JSON i DOM
        </title>
        <link rel="stylesheet" href="styl.css">
        <script src="skrypt.js" defer>
        </script>
    </head>
    <body>
        <main>
            <h1>
                Tablica wydarzeń / JSON i DOM
            </h1>
            <p>
                Dane to tablica obiektów. Puste punkty programu pomijamy. To nasze dane szkolne, bez danych pacjentów.
            </p>
            <label for="filtr">
                Szukaj wydarzenia
            </label>
            <input id="filtr" type="search">
            <div id="karty" class="karty">
            </div>
            <p id="status" role="status">
            </p>
            <button id="pobierz" type="button">
                Wczytaj plik JSON przez HTTP
            </button>
            <small>
                Przycisk wymaga lokalnego serwera. Dane początkowe działają także po otwarciu pliku z dysku.
            </small>
        </main>
    </body>
</html>

let wydarzenia = [
    { tytul: 'Dzień kodowania', data: '2026-11-10', punkty: ['HTML', 'JavaScript', ''] },
    { tytul: 'Wieczór gier', data: '2026-11-12', punkty: ['Planszówki', '', ''] }
];
const kontener = document.querySelector('#karty');
const filtr = document.querySelector('#filtr');
const status = document.querySelector('#status');
function poprawneDane(dane) {
    return Array.isArray(dane) && dane.length <= 100 && dane.every(w =>
        w !== null && typeof w === 'object' && typeof w.tytul === 'string' &&
        typeof w.data === 'string' && Array.isArray(w.punkty) &&
        w.punkty.every(p => typeof p === 'string'));
}
function rysujKarty() {
    kontener.replaceChildren();
    const szukane = filtr.value.trim().toLocaleLowerCase('pl');
    const widoczne = wydarzenia.filter(w => w.tytul.toLocaleLowerCase('pl').includes(szukane));
    for (const wydarzenie of widoczne) {
        const karta = document.createElement('article');
        const tytul = document.createElement('h2');
        tytul.textContent = wydarzenie.tytul;
        const data = document.createElement('p');
        data.textContent = `Termin: ${wydarzenie.data}`;
        const lista = document.createElement('ol');
        for (const punkt of wydarzenie.punkty) {
            if (punkt.trim() === '') continue;
            const element = document.createElement('li');
            element.textContent = punkt;
            lista.appendChild(element);
        }
        karta.append(tytul, data, lista);
        kontener.appendChild(karta);
    }
    status.textContent = widoczne.length ? `Liczba wydarzeń: ${widoczne.length}.` : 'Brak pasujących wydarzeń.';
}
filtr.addEventListener('input', rysujKarty);
document.querySelector('#pobierz').addEventListener('click', async () => {
    const przycisk = document.querySelector('#pobierz');
    przycisk.disabled = true;
    status.textContent = 'Wczytuję dane…';
    try {
        const odpowiedz = await fetch('./dane.json');
        if (!odpowiedz.ok) throw new Error(`HTTP ${odpowiedz.status}`);
        const dane = await odpowiedz.json();
        if (!poprawneDane(dane)) throw new Error('Niepoprawna struktura danych');
        wydarzenia = dane;
        rysujKarty();
    } catch (blad) {
        status.textContent = 'Nie udało się wczytać danych. Uruchom lokalny serwer i sprawdź dane.json. Poprzednia lista pozostaje.';
        console.warn(blad.message);
    } finally {
        przycisk.disabled = false;
    }
});
rysujKarty();

Zapisz: dane → przewidywany wynik → wynik próby → wyjaśnienie.