Quest: Strona z bazą JSON (ładowaną w JS)

A gdyby tak utworzyć plik z bazą danych…?

Poniższy projekcik to strona której treść jest pobierana z pliku JSON za pomocą skryptu JS. Uruchom projekt i popraw:

W pliku JSON są podane adresy grafik, jednak grafiki nie istnieją. Przygotuj je i spraw, by się wyświetlały.
Strona startowa nie ładuje się poprawnie. Napraw to.
Popraw wygląd całej strony. Dobrze by było, gdyby nie przestał działać JS 🙂

Baza JSON

{
  „podstrony”: [
    {
      „tytul”: „Życie wilków w Polsce”,
      „adres”: „drapiezniki/wilki”,
      „tresc”: [
        „Wilki są zwierzętami społecznymi, żyjącymi w zorganizowanych grupach rodzinnych zwanych watahami. Wataha ma zazwyczaj jedną parę reprodukcyjną.”,
        „Ich terytorium może obejmować setki kilometrów kwadratowych. Komunikują się za pomocą wycia, znakowania terenu oraz języka ciała.”
      ],
      „obraz”: „obrazy/wilk.jpg”
    },
    {
      „tytul”: „Ptaki wodne – kaczki”,
      „adres”: „ptaki/kaczki”,
      „tresc”: [
        „Kaczki to popularne ptaki wodne zamieszkujące jeziora, stawy i rzeki. Często można je spotkać w miejskich parkach, gdzie chętnie jedzą okruchy od ludzi.”,
        „Potrafią pływać dzięki błoniastym stopom, a ich pióra mają właściwości wodoodporne. Samce często wyróżniają się bardziej barwnym upierzeniem.”
      ],
      „obraz”: „obrazy/kaczka.jpg”
    },
    {
      „tytul”: „Wróble”,
      „adres”: „ptaki/wroble”,
      „tresc”: [
        „Nie wiem nic o wróblach, ale to takie miłe ptaszki”,
        „…..”
      ],
      „obraz”: „obrazy/wrobel.jpg”
    },
    {
      „tytul”: „Jeże i ich zwyczaje”,
      „adres”: „ssaki/jeze”,
      „tresc”: [
        „Jeże to niewielkie ssaki, które prowadzą nocny tryb życia. Zwijają się w kulkę, aby chronić się przed drapieżnikami, wykorzystując swoje ostre kolce.”,
        „Zimą zapadają w hibernację. Żywią się owadami, ślimakami i małymi bezkręgowcami, pomagając kontrolować ich populacje w ogrodach.”
      ],
      „obraz”: „obrazy/jez.jpg”
    },
    {
      „tytul”: „Zwyczaje wiewiórek”,
      „adres”: „gryzonie/wiewiorki”,
      „tresc”: [
        „Wiewiórki są aktywne głównie w ciągu dnia, szczególnie rano i późnym popołudniem. Uwielbiają wspinać się po drzewach i przeskakiwać z gałęzi na gałąź.”,
        „Gromadzą pożywienie na zimę, chowając orzechy i nasiona w różnych miejscach. Ich pamięć jest zaskakująco dobra, co pozwala im odnaleźć skrytki wiele tygodni później.”
      ],
      „obraz”: „obrazy/wiewiorka.jpg”
    },
    {
      „tytul”: „Myszy”,
      „adres”: „gryzonie/myszy”,
      „tresc”: [
        „Nie wiem nic o myszach, ale to takie miłe potwory”,
        „…..”
      ],
      „obraz”: „obrazy/mysz.jpg”
    }
  ]
}

{
  "podstrony": [
    {
      "tytul": "Życie wilków w Polsce",
      "adres": "drapiezniki/wilki",
      "tresc": [
        "Wilki są zwierzętami społecznymi, żyjącymi w zorganizowanych grupach rodzinnych zwanych watahami. Wataha ma zazwyczaj jedną parę reprodukcyjną.",
        "Ich terytorium może obejmować setki kilometrów kwadratowych. Komunikują się za pomocą wycia, znakowania terenu oraz języka ciała."
      ],
      "obraz": "obrazy/wilk.jpg"
    },
    {
      "tytul": "Ptaki wodne – kaczki",
      "adres": "ptaki/kaczki",
      "tresc": [
        "Kaczki to popularne ptaki wodne zamieszkujące jeziora, stawy i rzeki. Często można je spotkać w miejskich parkach, gdzie chętnie jedzą okruchy od ludzi.",
        "Potrafią pływać dzięki błoniastym stopom, a ich pióra mają właściwości wodoodporne. Samce często wyróżniają się bardziej barwnym upierzeniem."
      ],
      "obraz": "obrazy/kaczka.jpg"
    },
    {
      "tytul": "Wróble",
      "adres": "ptaki/wroble",
      "tresc": [
        "Nie wiem nic o wróblach, ale to takie miłe ptaszki",
        "....."
      ],
      "obraz": "obrazy/wrobel.jpg"
    },
    {
      "tytul": "Jeże i ich zwyczaje",
      "adres": "ssaki/jeze",
      "tresc": [
        "Jeże to niewielkie ssaki, które prowadzą nocny tryb życia. Zwijają się w kulkę, aby chronić się przed drapieżnikami, wykorzystując swoje ostre kolce.",
        "Zimą zapadają w hibernację. Żywią się owadami, ślimakami i małymi bezkręgowcami, pomagając kontrolować ich populacje w ogrodach."
      ],
      "obraz": "obrazy/jez.jpg"
    },
    {
      "tytul": "Zwyczaje wiewiórek",
      "adres": "gryzonie/wiewiorki",
      "tresc": [
        "Wiewiórki są aktywne głównie w ciągu dnia, szczególnie rano i późnym popołudniem. Uwielbiają wspinać się po drzewach i przeskakiwać z gałęzi na gałąź.",
        "Gromadzą pożywienie na zimę, chowając orzechy i nasiona w różnych miejscach. Ich pamięć jest zaskakująco dobra, co pozwala im odnaleźć skrytki wiele tygodni później."
      ],
      "obraz": "obrazy/wiewiorka.jpg"
    },
    {
      "tytul": "Myszy",
      "adres": "gryzonie/myszy",
      "tresc": [
        "Nie wiem nic o myszach, ale to takie miłe potwory",
        "....."
      ],
      "obraz": "obrazy/mysz.jpg"
    }
  ]
}

Plik index.html

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Sekcje w HTML5</title>
    <meta name="keywords" content="main, nav, aside, article">
    <meta name="description" content="Strona o zwierzętach w Polsce z dynamicznymi podstronami">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="kontener">
        <header>
            <h1>Zwierzaki w Polsce</h1>
        </header>
        <div>
            <main>
                <article>
                    <h2>Witaj!</h2>
                    <p>Wybierz zwierzę z menu po prawej stronie, aby dowiedzieć się więcej.</p>
                </article>
            </main>
            <aside>
                <nav>
                    <h3>Menu</h3>
                    <ul id="menu">
                        <li><a href="#">Strona Główna</a></li>
                    </ul>
                </nav>
                <section>
                    <h3>Reklamy</h3>
                    <p>Lorem ipsum dolor sit emet...</p>
                </section>
                <section>
                    <h3>Social media</h3>
                    <p>Znajdź nas na Instagramie i Facebooku!</p>
                </section>
            </aside>
        </div>
        <footer>
            <div> pk.sth © 2025</div>
            <div>Projekt edukacyjny o faunie Polski.</div>
        </footer>
    </div>
    <script src="script.js"></script>
</body>
</html>

Styl CSS

@media only screen and (min-width: 900px) {
    #kontener {
        width: 850px;
        margin: 0 auto 0 auto;
    }
    main {
        float: left;
        width: 70%;
    }
    aside {
        float: right;
        width: 28%;
    }
    footer {
        clear: both;
    }
}

Skrypcik JS

document.addEventListener("DOMContentLoaded", function () {
    const navList = document.getElementById("menu");
    const main = document.querySelector("main");

    function loadJSON(callback) {
        fetch("baza.json")
            .then(res => res.json())
            .then(data => callback(data))
            .catch(err => console.error("Błąd wczytywania JSON:", err));
    }

    function buildMenu(data) {
        data.podstrony.forEach(p => {
            const li = document.createElement("li");
            const a = document.createElement("a");
            a.href = "#" + p.adres;
            a.textContent = p.tytul;
            li.appendChild(a);
            navList.appendChild(li);
        });
    }

    function showPage(data, hash) {
        const adres = hash.replace(/^#/, '');
        const p = data.podstrony.find(p => p.adres === adres);

        if (p) {
            main.innerHTML = `
                <article>
                    <h2>${p.tytul}</h2>
                    ${p.tresc}
                    <img src="${p.obraz}" alt="${p.tytul}" style="max-width: 100%; margin-top: 10px;">
                </article>
            `;
        } else {
            main.innerHTML = `
                <article>
                    <h2>Nie znaleziono strony</h2>
                    <p>Podana podstrona nie istnieje lub została usunięta.</p>
                </article>
            `;
        }
    }

    function init(data) {
        buildMenu(data);
        if (window.location.hash) {
            showPage(data, window.location.hash);
        }

        window.addEventListener("hashchange", () => {
            showPage(data, window.location.hash);
        });
    }

    loadJSON(init);
});

EDU aktualizacja

Quest: Strona z bazą JSON (ładowaną w JS)

Baza JSON

Plik index.html

Styl CSS

Skrypcik JS

2 komentarze

Skomentuj Piotr Anuluj pisanie odpowiedzi

edu-update.pl

Napisz do mnie

Porozmawiajmy

Jeśli uważasz,