diff --git a/daweb/js2/cafe-lora-1/cvlekce/ingredience.md b/daweb/js2/cafe-lora-1/cvlekce/ingredience.md index 5a35e67b..dc5edd5f 100644 --- a/daweb/js2/cafe-lora-1/cvlekce/ingredience.md +++ b/daweb/js2/cafe-lora-1/cvlekce/ingredience.md @@ -5,7 +5,7 @@ demand: 3 context: lekce --- -Abychom mohli vytvářet seznam ingrediencí podle dat, každá ingredience musí být také komponenta. +Abychom mohli vytvářet seznam ingrediencí podle dat, každá ingredience nápoje musí být také komponenta. 1. Ve složce `components` vytvořte komponentu `Layer`, která očekává `props` v následujícím tvaru. diff --git a/daweb/js2/cafe-lora-1/cvlekce/napoj.md b/daweb/js2/cafe-lora-1/cvlekce/napoj.md index e3091515..dcde2426 100644 --- a/daweb/js2/cafe-lora-1/cvlekce/napoj.md +++ b/daweb/js2/cafe-lora-1/cvlekce/napoj.md @@ -7,17 +7,17 @@ context: lekce V komponentě `Menu` máme příklad tří napojů zatím jako natvrdo vytvořené HTML. Budeme chtít mít každý nápoj v menu jako komponentu. Připravujeme se tím na to, abychom později mohli seznam nápojů zobrazovat stažením dat z API. -Vytvoříme komponentu `Drink`, která zatím nebude mít funkční objednávací tlačítko a nebude ještě správně zobrazovat ingredience. Obojí doplníme později. +Vytvoříme komponentu `Drink`, která zatím nebude mít funkční objednávací tlačítko a nebude ještě správně zobrazovat ingredience (layers). Obojí doplníme později. 1. Ve složce `components` vytvořte komponentu `Drink` s `index.jsx` a `style.css`. Do `style.css` přesuňte styly související s komponentou. -1. V `index.jsx` vytvořte komponentu `Drink`, která očekává `props` v následujícím tvaru. +1. V `index.jsx` vytvořte komponentu `Drink` podle vzoru nápojů z `Menu`. Bude očekávat tyto `props` v následujícím tvaru. ```jsx ``` -1. Komponenta `Drink` zatím nebude využívat vlastnosti `id`, `ordered` ani `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. 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. Komponentou `Drink`nahraďte příklad tří nápojů v `Menu`. Zatím na stránce klidně zobrazte pouze jeden nápoj, ať se moc nenadřete. Komponenta zatím nebude využívat vlastnosti `id`, `ordered` ani `layers. Přes props jí předejte pouze `name`a`image`. Data si můžete vymyslet nebo využít příklad výše. +1. Adresa obrázku, který se má zobrazit, je uložena ve vlastnosti `image`. Tato cesta se použije pro atribut `src` obrázku uvnitř komponenty `Drink`. Adresa v příkladu nahoře využívá lokální API, takže se vám obrázek zatím nebude 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). **Nezapomeňte**, že z API vám přijde pouze relativní cesta souboru, které musí předcházet url adresa, kde běží váš backend server, např. `http://localhost:4000`. 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. diff --git a/daweb/js2/cafe-lora-1/cvlekce/navigace.md b/daweb/js2/cafe-lora-1/cvlekce/navigace.md index aabf918f..f56cba8b 100644 --- a/daweb/js2/cafe-lora-1/cvlekce/navigace.md +++ b/daweb/js2/cafe-lora-1/cvlekce/navigace.md @@ -7,7 +7,7 @@ context: lekce 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. Nejdříve do těch komponent, které odpovídají odkazům v navigaci, přidejte attribut `id`. Atribut vložte přímo na `
` uvnitř dané komponenty. Tím zajistíte, 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` (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. Navigaci budeme chtít schovat i po kliknutí na odkaz uvnitř navigace. 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. diff --git a/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md b/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md index 408e6e3d..454c9083 100644 --- a/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md +++ b/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md @@ -7,8 +7,8 @@ context: lekce 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@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. Nejdříve si naklonujte repozitář [cafelora-api](https://github.com/Czechitas-podklady-WEB/cafelora-api), kde najdete připravená data pro `apidroid`. Otevřete si repozitář v novém okně VS Code a spusťte `npx apidroid@latest` (pozor na přidanou část `@latest` – to zajistí, aby se použila nejnovější verze `apidroid`, 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`. -1. Vyzkoušejte, že vaše stránka zobrazuje všechny nápoje. Commitněte se srozumitelnou zprávou a pushněte do vzdáleného repozitáře. +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` za využití komponenty `Drink`. +1. Stránka by nyní měla zobrazovat všechny nápoje s daty, které vám přišly z API. Commitněte se srozumitelnou zprávou a pushněte do vzdáleného repozitáře. diff --git a/daweb/js2/cafe-lora-2/cvlekce/objednavani.md b/daweb/js2/cafe-lora-2/cvlekce/objednavani.md index d817c7ed..898158d4 100644 --- a/daweb/js2/cafe-lora-2/cvlekce/objednavani.md +++ b/daweb/js2/cafe-lora-2/cvlekce/objednavani.md @@ -7,7 +7,8 @@ context: lekce 1. Nejdříve si všimněte, že data pro jeden nápoj obsahují vlastnost `ordered`, která udává, zda je nápoj zrovna objednaný či nikoliv. Toto je zároveň _prop_ v komponentě `Drink`. Upravte tuto komponentu tak, aby v závislosti na hodnotě této _prop_ zobrazila na tlačíku text _Objednat_ nebo _Zrušit_. 1. Na objednávací tlačítko také přidejte třídu `.order-btn--ordered` v případě, že nápoj je objednaný. -1. V hlavním souboru `index.jsx` pověste pomocí `querySelectorAll` posluchač události na každý objednávací formulář v nápojích. Zatím při kliknutí na tlačítko vypište do konzole `id` nápoje, abyste si ověřili, že váš posluchač události pracuje se správným prvkem pole. +1. Prop `id` předejte atributu `data-id`, který vložte na `
`. +1. V hlavním souboru `index.jsx` pověste pomocí `querySelectorAll` posluchač události na každý objednávací formulář v nápojích. Zatím při kliknutí na tlačítko vypište do konzole `id` nápoje, abyste si ověřili, že váš posluchač události pracuje se správným prvkem pole. K `id` se dostanete pomocí vlastnosti `dataset.id`. 1. Samotné objednání nápoje provedete pomocí PATCH požadavku na API endpoint `/api/drinks/:id`. Tento požadavek bude mít v těle JSON pole s objektem, tělo požadavku tedy bude vypadat takto: ```js @@ -17,4 +18,5 @@ context: lekce Proveďte tento požadavek pomocí `fetch` a zkontrolujte, že se vám v konzoli vypíše odpověď od API. Jakmile je váš kód funkční, proveďte refresh stránky, aby se vám zobrazila aktuální data. 1. Vyzkoušejte si na stránce, že objednávání nápojů funguje. +1. Zprovozněte zrušení objednávky. Stačí upravit vlastnost `value` v PATCH požadavku, aby místo `true` posílala opak předchozího stavu nápoje. 1. Commitněte váš kód se zodpovědně napsanou commit zprávou a pushněte do vzdáleného repozitáře. diff --git a/daweb/js2/cafe-lora-2/cvlekce/objednavka-obsah.md b/daweb/js2/cafe-lora-2/cvlekce/objednavka-obsah.md index 40dd86b8..6e3b7824 100644 --- a/daweb/js2/cafe-lora-2/cvlekce/objednavka-obsah.md +++ b/daweb/js2/cafe-lora-2/cvlekce/objednavka-obsah.md @@ -10,7 +10,7 @@ context: lekce { id: 7, name: 'Romano', - image: 'https://localhost:4000/assets/cups/romano.png', + image: 'http://localhost:4000/assets/cups/romano.png', } ``` 1. Vytvořte také komponentu `OrderItem` s _props_ `name` a `image` představující jednu položku objednávky.