Tato lekce uzavírá v našem kurzu téma čistého nebo-li „vanilla“ JavaScriptu. V dalších lekcích se již budeme věnovat především frameworku React. V Reactu se mnoho věcí bude dělat jinak, než ve vanilla JavaScriptu. Ne každá stránka musí být však napsaná v Reactu. Všechny lekce až do této chvíle směřovaly k tomu, abyste pochopili základní principy, na kterých je JavaScript postaven, a byli schopní vytvořit funkční webovou stránku či aplikace přímo ve vanilla JavaScriptu. Pojďme si tedy jednu takovou stránku naprogramovat jako jedno velké opakovací cvičení.

Zadání

Vaším úkolem bude vytvořit webovou stránku fiktivní kavárny s názvem Café Lóra. Jde o takzvanou Single Page Application (SPA), nebo-li aplikaci, která sestává pouze z jedné stránky. Café Lóra poskytuje zajímavou službu, kdy si přímo na stránce můžete objednat kávu, kterou vám poté přinesou ke stolu.

Design, CSS styly a všechny obrázky potřebné po tvorbu stránky máte již připraveny. Vaším úkolem je doplnit JavaScriptovou část. Cílem je vyzkoušet si práci na větším uceleném projektu.

Projekt Café Lóra

1

Založení projektu

to dáš

Stáhněte si základ projektu Café Lóra a vytvořte pro něj GitHub repozitář. Postupujte dle následujících kroků.

  1. Pod svým GitHub účtem si založte zcela prázdný (tedy bez README.md) veřejný repozitář s názvem cafelora.
  2. Rozbalte stažený ZIP a pomocí příkazu git init (zavolaného uvnitř složky, kde jsou mimo jiné soubory package.json a webpack.config.js), řekněte, že budete obsah verzovat.
  3. Přdejte všechny soubory pomocí git add a proveďte commit všech souborů.
  4. Podle návodu na GitHubu, …or push an existing repository from the command line, nahrajte soubory do repozitáře.
    1. Příkazem git remote add origin https://github.com/{DOPLŇ_TVŮJ_ÚČET}/cafelora.git propojte vaši lokální složku s GitHub repozitářem.
    2. Pojmenujte hlavní větev git branch -M main.
    3. Proveďte první push git push -u origin main.
  5. Nainstalujte závislosti pomocí npm install a spusťte projekt pomocí npm run start.
  6. Prohlédněte si design stránky a vyzkoušejte si její responzivitu. Všimněte si, že například ikonka navigace zatím moc nefunguje.
2

Seznámení s projektem

to dáš

Seznamte se se zdrojovým kódem, který je pro vás v projektu připraven. Postupujte dle následujících kroků.

  1. Prohlédněte si HTML a CSS projektu.
  2. Podívejte se do složky assets. Toto je speciální složka, kterou Webpack beze změny zkopíruje do výsledné dist složky. Složka assets obsahuje obrázky, které nejsou nalinkovány uvnitř CSS a nejsou tedy součástí designu stránky. Tyto obrázky budou tvořit obsah stránky a budeme pomocí nich vytvářet naše interaktivní café menu.
  3. Všimněte si, že ikonka pro zobrazení navigace se zobrazuje i v případě, že jsme na širokém monitoru. Upravte CSS v souboru style.css tak, aby se ikonka na široké obrazovce nezobrazovala. Proveďte commit vašich změn s nějakou dobře popisnou zprávou.
  4. Položky navigace v hlavičce stránky nefungují. Doplňte tedy atributy id pro jednotlivé sekce a pozměňte odkazy v nabídce tak, abychom se vždy po kliknutí na odkaz přesunuli na správnou část stránky. Commitněte vaše změny se smysluplnou commit zprávou.
  5. Sekce galerie je jeden velký obrázek a jinak je poměrně prázdná. Doplňte do ní odstaveček textu popisující interiér kavárny tak, aby příliš nezakrýval obrázek a zapadl do celkového vzezření stránky.
  6. Opět proveďte commit vašich změn s odpovídající commit zprávou. Pushněte do repozitáře na GitHubu.
3

Zprovoznění navigace

to dáš

Chceme zařídit, aby se na úzkých displejích po kliknutí na ikonku zobrazovala navigace. Zatím se to neděje a tím přichází ke slovu JavaScript.

  1. V JavaScriptu vyberte ze stránky ikonku #nav-btn. Připojte k ní posluchač události click. Tento posluchač odebere nebo přidá třídu nav-closed na prvku nav. Klikáním na ikonku tak můžeme zobrazovat nebo skrývat navigaci.
  2. Připojte posluchač události také na všechny položky navigace. Zařiďte, aby se navigace při kliknutí na libovolnou její položku schovala. Zde se vám jistě bude hodit metoda querySelectorAll.
  3. Jakmile je váš kód funkční, proveďte commmit s hezky popisnou zprávou a pushněte do vzdáleného repozitáře.
4

Objednávání

to dáš

Zařiďte, aby fungovalo objednávání jednotlivých nápojů. Zatím na stránce vidíme pouze jeden, poději jich však bude mnohem více.

  1. Na tlačíko .order-btn pověste posluchač, který při kliknutí přidá na prvek .drink__cup třídu .drink__cup--selected. Zároveň změní nápis na tlačítku na Zrušit.
  2. Při opětovném kliknutí na tlačítko chceme zařídit, aby se objednávka zrušila a nápis na tlačítku se vrátil zpět na Objednat. Tohoto můžete docílit například tak, že si vytvoříte globální proměnnou ordered, která bude obsahovat true nebo false podle toho, zde je nápoj objednaný či nikoliv.
  3. Ve chvíli, kdy máte objednávání funkční commitněte váš kód se smysluplnou zprávnou a pushněte jej.
5

Ingredience jako komponenty

to dáš

Každý nápoj bude obsahovat seznam ingrediencí. Na stránce vidíme příklad pro cappuccino. Budeme chtít, aby ingredience byla komponenta.

  1. Vytvořte komponentu Layer, která očekává props v následujícím tvaru.
    {
      color: '#feeeca',
      label: 'mléčná pěna',
    }
    
    Komponenta nechť vrací řetězec obsahující výsledné HTML.
  2. Použijte vaši komponentu a pomocí vlastnosti innerHTML zapojte do stránky tři ingredience pro cappuccino. Stránka by měla pro uživatele vypadat stejně jako na začátku.
  3. Ve vašem projektu vytvořte pro vaši komponentu separátní složku s názvem Layer. Tato složka bude v souboru index.js obsahovat JavaScript kód vaší komponenty. Kompnentu správně exportujte a správně ji importujte v hlavním index.js celého projektu. Vyzkoušejte, že váš projekt funguje.
  4. Do složky Layer vložte také soubor style.css a přesuňte do něj CSS styly, které se přímo týkají této komponenty. Nezapomeňte váš CSS soubor správně importovat aby jej Webpack zahrnul do výsledného sestavení.
  5. Jakmile váš projekt funguje, commitněte váš kód s výborně napsanou commit zprávou a pushněte do vzdáleného repozitáře.
6

Seznam ingrediencí

to dáš

V tomto cvičení budeme chtít zařídit, abychom seznam ingrediencí dokázali zobrazit podle dat uložených v poli.

  1. Uvnitř hlavního index.js si vytvořte následujicí globální proměnnou.

    const layers = [
      {
        color: '#feeeca',
        label: 'mléčná pěna',
      },
      {
        color: '#fed7b0',
        label: 'teplé mléko',
      },
      {
        color: '#613916',
        label: 'espresso',
      },
    ];
    
  2. Použijte cyklus for nebo forEach, projděte seznam ingrediencí položku po položce a pomocí komponenty Layer je zobrazte každou ingredienci na stránce.

  3. Jakmile je váš kód funkční, udělejte commit s profesionálně napsanou zprávou a pushněte váš kód do vzdáleného repozitáře.

7

Nápoj jako komponenta

to dáš

Abychom nakonec mohli zobrazit celou nabídku nápojů, budeme potřebovat, aby každý nápoj byl jedna komponenta.

  1. Vytvořte komponentu Drink, která očekává props v následujícím tvaru.
    {
      id: 'romano',
      name: 'Romano',
      ordered: false,
      layers: [
        {
          color: '#fbdf5b',
          label: 'citrón',
        },
        {
          color: '#613916',
          label: 'espresso',
        },
      ],
    };
    
    Komponentu napište tak, aby vracela DOM element.
  2. Jak už jsme zvyklí, vytvořte pro komponentu složku Drink s index.js a style.css. Do style.css přesuňte styly související s komponentou. Pozor, že tentokrát ke stylu komponenty patří také obrázek cup-selected.png. Abychom měli vše hezky pohromadě, vytvořte ve složce komponenty složku img, do které tento obrázek přesuňte.
  3. Uvnitř vaší komponenty bude potřeba použít komponentu Layers. Dejte si pozor, abyse ji spráně importovali.
  4. Název obrázku, který se má zobrazit, můžete vzít z vlastnosti id. Je tak pouze potřeba sestavit správnou cestu pro atribut src.
  5. Zprovozněte tlačítko pro objednávání tak, aby veškerý kód byl součástí komponenty. V tomto případě se budeme muset zbavit globální proměnné ordered. Ke stejnému účelu však můžeme využít vlastnost ordered, která je obsažena v každém objektu nápoje. Tak zaručíme, že každý nápoj bude mít svoji vlastní informaci o tom, zde je objednaný či nikoliv.
  6. Zobrazte na stránce nápoj dle dat uvedených výše. Použijte funkci appendChild, neboť naše komponenta vrací DOM element. Vyzkoušejte, že funguje objednávání.
  7. Jakmile váš kód správně funguje, commitněte jej se zodpovědně napsanou commit zprávou a pushněte do vzdáleného repozitáře.
8

Seznam nápojů

to dáš

V tomto cvičení budeme chtít na stránce zobrazit vícero nápojů.

  1. Uvnitř hlavního index.js si vytvořte následujicí globální proměnnou.

    const drinks = [
      {
        id: 'cappuccino',
        name: 'Cappuccino',
        ordered: false,
        layers: [
          {
            color: '#feeeca',
            label: 'mléčná pěna',
          },
          {
            color: '#fed7b0',
            label: 'teplé mléko',
          },
          {
            color: '#613916',
            label: 'espresso',
          },
        ],
      },
      {
        id: 'romano',
        name: 'Romano',
        ordered: false,
        layers: [
          {
            color: '#fbdf5b',
            label: 'citrón',
          },
          {
            color: '#613916',
            label: 'espresso',
          },
        ],
      },
    ];
    
  2. Použijte cyklus for nebo forEach, projděte seznam nápojů a pomocí komponenty Drink zobrazte každý nápoj na stránce. Vyzkoušejte, že si každý nápoj můžete objednat nebo u něj zrušit objednávku.

  3. Jakmile stránka funguje, proveďte commit se vstřícně napsanou zprávou a pushněte váš kód do vzdáleného repozitáře.

9

Backend

to dáš

V tomto cvičení budeme chtít napojit naši stránku na backend, ze kterého si stáhneme seznam všech nabízených nápojů.

  1. Seznam všech nápojů si můžete stáhnout z API pro Café Lóra na adrese
    http://cafelora.kodim.cz/api/drinks
    
  2. Prohlédněte si data, která tento endpoint vrací.
  3. Pomocí funkce fetch data stáhněte a zobrazte je na vaší stránce stejným způsobem, jako jste je zobrazovali doposud.
  4. Ve chvílí, kdy stránka funguje, commitněte váš kód s hezky napsanou zprávou a pushněte do vzdáleného repozitáře.