Merge branch 'master' into hotfix/JS2.10/spusteni-npm-install

daweb/js2/cafe-lora-1/cvlekce/komponenty.md

@@ -13,7 +13,7 @@ Jako první budeme chtít rozsekat hlavní stránku na následující komponenty
 - `Contact` - kontakt a otvírací hodiny,
 - `Footer` - patička.
 
-1.  Ve složce `src` vytvořte složku `components` a v ní postupně vytvořte všechny výše zmíněné komponenty pro hlavní stránku. Rozsekejte HTML i CSS tak, aby každá komponenta měla vlastní styly i obrázky. Globální styly pro celou aplikaci, hlavičku a patičku najdete v souboru `style.css`. Styly ostatních komponent hlavní stránky najdete v souboru `index.css`. Soubor `index.css` je strukturovaný tak, aby styly pro jednotlivé komponenty byly seskupené u sebe, nemusíte tak zoufale lovit styly po celém projektu.
+1.  Ve složce `src` vytvořte složku `components` a v ní postupně vytvořte všechny výše zmíněné komponenty pro hlavní stránku. Rozsekejte HTML i CSS tak, aby každá komponenta měla vlastní styly i obrázky. Globální styly pro celou aplikaci najdete v souboru `global.css`, ten ponechte beze změny. Styly komponent hlavní stránky najdete v souboru `index.css`. Soubor `index.css` je strukturovaný tak, aby styly pro jednotlivé komponenty byly seskupené u sebe, nemusíte tak zoufale lovit styly po celém projektu. V souboru `order.css` jsou styly pro detail objednávky – ty zatím neřešte, detailem se budete zabývat až v druhé části projektu.
 
     Chceme dosáhnout toho, aby kód pro obsah hlavní stránky aplikace v `index.jsx` vypadal takto:
 

daweb/js2/cafe-lora-1/cvlekce/napoj.md

@@ -30,6 +30,6 @@ Vytvoříme komponentu `Drink`, která zatím nebude mít funkční objednávac
     ```
 
 1.  Komponenta `Drink` zatím nebude využívat ani vlastnost `layers`. Ingredience zatím nechte tak, jak jsou zobrazené ve stránce se zadáním. Komponentu pro ingredience vytvoříme v následujícím cvičení. Zatím na stránce klidně zobrazte pouze jeden nápoj, ať se moc nenadřete.
-1.  Adresa obrázku, který se má zobrazit, je uložena ve vlastnosti `image`. Tato cesta se použije pro atribut `src` obrázku.
+1.  Adresa obrázku, který se má zobrazit, je uložena ve vlastnosti `image`. Tato cesta se použije pro atribut `src` obrázku. Obrázky se vám zatím nebudou zobrazovat – to zprovozníme až později. Pokud chcete obrázky vyzkoušet hned, zprovozněte si dopředu API postupem popsaným v druhé části projektu v úkolu [Zprovoznění API](/vyvoj-webu/daweb/js2/cafe-lora-2/projekt/napoje-api).¨
 1.  Tlačítko zatím pouze zobrazte, funkčnost mu přidáme v dalším kroku.
 1.  V této fázi si commitněte kód s užitečně napsanou commit zprávou a pushněte do vzdáleného repozitáře.

daweb/js2/cafe-lora-1/cvlekce/navigace.md

@@ -7,6 +7,6 @@ demand: 3
 Jako další úkol rozchodíme zatím nefunkční navigaci a zařídíme, aby se na úzkých displejích navigace zobrazovala po kliknutí na hamburger ikonku.
 
 1. Nejdříve do příslušných komponent přidejte attributy `id` tak, aby odkazy v navigaci po kliknutí přesunuly uživatele na správnou část stránky.
-1. Zobrazování a skrývání navigačního menu uděláme tak, že budeme prvku `.rollout-nav` přidávat nebo odebírat třídu `nav-closed`. V hlavním `index.jsx` vyberte ikonku `.nav-btn` a připojte k ní posluchač události `click`. Tento posluchač bude přepínat třídu `nav-closed` na prvku `.rollout-nav`. Klikáním na ikonku tak můžeme zobrazovat nebo skrývat navigaci.
+1. Zobrazování a skrývání navigačního menu uděláme tak, že budeme prvku `.rollout-nav` přidávat nebo odebírat třídu `nav-closed`. V hlavním `index.jsx` (ve složce `pages`) vyberte ikonku `.nav-btn` a připojte k ní posluchač události `click`. Tento posluchač bude přepínat třídu `nav-closed` na prvku `.rollout-nav`. Klikáním na ikonku tak můžeme zobrazovat nebo skrývat navigaci.
 1. Navigaci budeme chtít schovat i po kliknutí na odkaz na nějakou sekci. Připojte tedy další posluchač události přímo na prvek `.rollout-nav`. V posluchači události zařiďte, aby se navigace při kliknutí na libovolnou její položku schovala (tj. prvku `.rollout-nav` přidáte třídu `nav-closed`, obdobně, jako v předchozím kroku při přepínání).
 1. Jakmile je váš kód funkční, proveďte commit se zodpovědně napsanou zprávou a pushněte do vzdáleného repozitáře.

daweb/js2/cafe-lora-2/cvlekce/napoje-api.md

@@ -6,7 +6,7 @@ demand: 3
 
 V tomto cvičení konečně zobrazíme celou nabídku nápojů, které si stáhneme z API.
 
-1. Nejdříve si naklonujte rezpotiář [cafelora-api](https://github.com/Czechitas-podklady-WEB/cafelora-api), kde najdete připravená data pro jsonhost. Otevřete si repozitář v novém okně VS Code a spusťte `npx jsonhost`.
+1. Nejdříve si naklonujte rezpotiář [cafelora-api](https://github.com/Czechitas-podklady-WEB/cafelora-api), kde najdete připravená data pro jsonhost. Otevřete si repozitář v novém okně VS Code a spusťte `npx jsonhost@latest` (pozor na přidanou část `@latest` – to zajistí, aby se použila nejnovější verze `jsonhost`, která je pro API Café Lóra potřeba).
 1. Prohlédněte si data, která vrací endpoint `/api/drinks`.
 1. Upravte hlavní stránku tak, aby stahovala seznam nápojů z API, zatím stačí do proměnné, kterou vypíšete do konzole.
 1. Komponentě `Menu` přidejte _prop_ s názvem `drinks`, skrz kterou komponentě předáme stažený seznam nápojů. Zobrazte tento seznam uvnitř prvku `drinks-list`.

daweb/js2/cafe-lora-2/cvlekce/objednavka-stranka.md

@@ -7,6 +7,6 @@ demand: 3
 Oživíme kostru stránky pro detail objednávky pomocí už existujících komponent. Komponenty pro jednotlivé položky objednávky vytvoříme v dalším cvičení.
 
 1. Ve složce `src/pages` najdete soubor `order.html` i s JavaScriptem `order.jsx` a styly `order.css`.
-1. Na stránce použijte komponenty `Header` a `Footer`. Komponentu `Header` bude potřeba upravit, protože na stránce s objednávkou se hlavička zobrazuje bez hlavního menu. Do komponenty `Header` tedy přidejte _prop_ s názvem `showMenu` s výchozí hodnotou `true`. Pokud bude `showMenu` mít hodnotu `false`, komponenta `Header` zobrazí hlavičku pouze s odkazem na hlavní stránku, jak je navrženo v zadání projektu v souboru `order.html`.
+1. Na stránce použijte komponenty `Header` a `Footer`. Komponentu `Header` bude potřeba upravit, protože na stránce s objednávkou se hlavička zobrazuje bez hlavního menu. Do komponenty `Header` tedy přidejte _prop_ s názvem `showMenu` s výchozí hodnotou `true`. Pokud bude `showMenu` mít hodnotu `false`, komponenta `Header` zobrazí hlavičku pouze s odkazem na hlavní stránku, jak je navrženo v zadání projektu v souboru `order.jsx`.
 1. Vyzkoušejte, že váš web funguje a že se lze přesouvat mezi oběma stránkami.
 1. Proveďte _commit_ a _push_ vašich změn.