From cb41b21c6b978f87d6021a5e638a5b69ee849427 Mon Sep 17 00:00:00 2001 From: Eva Machova Date: Thu, 2 May 2024 22:04:19 +0200 Subject: [PATCH 1/6] =?UTF-8?q?update=20zad=C3=A1n=C3=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- daweb/js2/cafe-lora-1/cvlekce/ingredience.md | 8 ++++---- daweb/js2/cafe-lora-1/cvlekce/komponenty.md | 4 ++-- daweb/js2/cafe-lora-1/cvlekce/napoj.md | 11 ++++++----- daweb/js2/cafe-lora-1/cvlekce/seznameni.md | 2 +- daweb/js2/cafe-lora-2/cvlekce/napoje-api.md | 5 +++-- daweb/js2/cafe-lora-2/cvlekce/objednavani.md | 4 ++-- daweb/js2/cafe-lora-2/cvlekce/objednavka-stranka.md | 2 +- 7 files changed, 19 insertions(+), 17 deletions(-) diff --git a/daweb/js2/cafe-lora-1/cvlekce/ingredience.md b/daweb/js2/cafe-lora-1/cvlekce/ingredience.md index dc5edd5f..a546abc0 100644 --- a/daweb/js2/cafe-lora-1/cvlekce/ingredience.md +++ b/daweb/js2/cafe-lora-1/cvlekce/ingredience.md @@ -5,14 +5,14 @@ demand: 3 context: lekce --- -Abychom mohli vytvářet seznam ingrediencí podle dat, každá ingredience nápoje musí být také komponenta. +Abychom mohli vytvářet seznam ingrediencí podle dat, každá ingredience nápoje musí být také komponenta. Budeme postupovat obdobně jako u komponenty `Drink`. -1. Ve složce `components` vytvořte komponentu `Layer`, která očekává `props` v následujícím tvaru. +1. Ve složce `components` vytvořte komponentu `Layer`. Podívejte se do `Drink` na ukázkové JSX jednotlivých layers (ingrediencí) a podle něj vytvořte strukturu komponenty, která bude vracet JSX pro jednu ingredienci. `Layer` bude očekávat _props_ v následujícím tvaru, které na patřičných místech v JSX rovnou použijte. ```jsx ``` - Podívejte se do `Menu` na strukturu jednotlivých vrstev. Komponenta nechť vrací JSX element pro jednu vrstvu. Do komponenty přesuňte styly s ní související. +1. Do komponenty také přesuňte styly s ní související. -1. Použijte vaši komponentu v komponentě `Drink` k zobrazení vrstev v nápoji. Vyzkoušejte, že váš projekt funguje. Commitněte kód s výborně napsanou commit zprávou a pushněte do vzdáleného repozitáře. +1. Hotovou komponentu použijte v komponentě `Drink` a nahraďte tak předchozí ukázkové příklady layers. `Layer` předejte data pomocí _props_ a otestujte, že váš projekt funguje. Commitněte kód s výborně napsanou commit zprávou a pushněte do vzdáleného repozitáře. diff --git a/daweb/js2/cafe-lora-1/cvlekce/komponenty.md b/daweb/js2/cafe-lora-1/cvlekce/komponenty.md index d64a9c43..3d31f322 100644 --- a/daweb/js2/cafe-lora-1/cvlekce/komponenty.md +++ b/daweb/js2/cafe-lora-1/cvlekce/komponenty.md @@ -5,7 +5,7 @@ demand: 3 context: lekce --- -Jako první budeme chtít rozsekat hlavní stránku na následující komponenty: +Jako první budeme chtít rozsekat hlavní stránku index.jsx na následující komponenty: - `Header` - hlavička stránky, - `Banner` - uvítací obrázek, @@ -14,7 +14,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 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. +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 JSX 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: diff --git a/daweb/js2/cafe-lora-1/cvlekce/napoj.md b/daweb/js2/cafe-lora-1/cvlekce/napoj.md index e5a90b18..1d482249 100644 --- a/daweb/js2/cafe-lora-1/cvlekce/napoj.md +++ b/daweb/js2/cafe-lora-1/cvlekce/napoj.md @@ -5,12 +5,12 @@ demand: 3 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. +V komponentě `Menu` máme příklad tří napojů zatím jako natvrdo vytvořené JSX. 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 (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` podle vzoru nápojů z `Menu`. Bude očekávat tyto `props` v následujícím tvaru. +1. V `index.jsx` vytvořte komponentu `Drink` podle vzoru nápojů z `Menu`. Připravte komponentu, aby očekávala _props_ viz níže. Nebojte se použít destrukturování. ```jsx ``` -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. -1. Tlačítko zatím pouze zobrazte, funkčnost mu přidáme v dalším kroku. +1. Uvnitř JSX komponenty použijte pouze 2 ze seznamu _props_: `name` a `image`. První bude sloužit jako název nápoje, druhá jako adresa obrázku (atribut `src`). Ostatní _props_ můžete zatím nechat nepoužité. +1. Nyní máte komponentu připravenou. Vraťte se do komponenty `Menu`, smažte ukázkové příklady nápojů a místo nich použijte komponentu `Drink`. Zatím na stránce klidně zobrazte pouze jeden nápoj, ať se moc nenadřete. Předejte `Drink` _props_ podle příkladu výše, nebo si vymyslete vlastní data, ať můžete otestovat, že komponenta funguje. (Nevadí že předáte všechny _props_, i když komponenta zatím používá jenom `name` a `image`). +1. Po předání _props_ by komponenta měla minimálně správně zobrazovat vámi zadané jméno přes `name` a případně i obrázek, pokud jste např. použily adresu obrázku, který máte uložený u sebe na počítači. Adresa obrázku v příkladu nahoře využívá lokální API, které zatím nemáme zprovozněné, takže se vám tento obrázek zobrazovat nebude. +1. Tlačítko objednání zatím pouze zobrazte, funkčnost mu přidáme později. 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/seznameni.md b/daweb/js2/cafe-lora-1/cvlekce/seznameni.md index 1e051518..63d3623f 100644 --- a/daweb/js2/cafe-lora-1/cvlekce/seznameni.md +++ b/daweb/js2/cafe-lora-1/cvlekce/seznameni.md @@ -10,5 +10,5 @@ Projekt Café Lóra nebudeme dělat úplně na zelené louce. Budeme vycházet z 1. Základ celé stránky, kterou budete postupně tvořit najdete v repozitáři [cafelora](https://github.com/Czechitas-podklady-WEB/cafelora). Pomocí _Use this template_ si vytvořte kopii tohoto repozitáře na svém GitHubu a naklonujte si ji do svého počítače. 1. Pro všechny projekty používající JSX nebo React platí, že po jejich naklonování nebo aktualizaci z GitHubu je potřeba spustit `npm install`. 1. Základní strukturu a design cílové stránky v JSX a CSS spolu s veškerými obrázky najdete v připraveném repozitáři. Poděkujte grafikům a kodérům, kteří pro vás tento návrh připravili a vy se už můžete zabývat pouze programováním. -1. Seznamte se se zdrojovým kódem, který je pro vás v projektu připraven. Spusťte si web pomocí `npm run dev`. Prohlédněte si HTML a CSS obou stránek a vyzkoušejte si obě stránky zobrazit v prohlížeči. +1. Seznamte se se zdrojovým kódem, který je pro vás v projektu připraven. Spusťte si web pomocí `npm run dev`. Prohlédněte si JSX a CSS obou stránek a vyzkoušejte si obě stránky zobrazit v prohlížeči. 1. Na stránkách najdete příklad nápojů a objednávky. Tato data samozřejmě budeme později stahovat z API, nyní jsou zde pouze jako ukázka. diff --git a/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md b/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md index b11ade0b..9bdd5173 100644 --- a/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md +++ b/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md @@ -10,6 +10,7 @@ V tomto cvičení konečně zobrazíme celou nabídku nápojů, které si stáhn 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` za využití komponenty `Drink`. -1. Díky datům z API můžeme v komponentě `Drink` zprovoznit obrázky a ingredience. Adresu obrázku z API předáte přes prop `image`. 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`. Ingredience zobrazíte za využití prop `layers` a komponenty `Layer`, která už také získá opravdová data. +1. Komponentu `Menu` upravte tak, aby přijímala _prop_ s názvem `drinks`. Skrz ni komponentě předejte stažený seznam nápojů a zobrazte uvnitř prvku `drinks-list` za využití komponenty `Drink`. +1. Díky datům z API můžeme komponentě `Drink` předat reálná data a zprovoznit tak obrázky a ingredience. Adresu obrázku z API předáte přes prop `image`. Nezapomeňte, že z API vám přijde pouze relativní cesta souboru, např. `/assets/cups/romano.png`, které musí předcházet url adresa, kde běží váš backend server, např. `http://localhost:4000`. Pomocí interpolace řetězců složte správně url adresu obrázku a použijte uvnitř `src`. +1. Ingredience zobrazíte za využití prop `layers` a komponenty `Layer`, která už také získá opravdová data. 1. Stránka by nyní měla zobrazovat všechny nápoje s obrázky i ingrediencemi. 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 898158d4..ea93d90d 100644 --- a/daweb/js2/cafe-lora-2/cvlekce/objednavani.md +++ b/daweb/js2/cafe-lora-2/cvlekce/objednavani.md @@ -9,7 +9,7 @@ context: lekce 1. Na objednávací tlačítko také přidejte třídu `.order-btn--ordered` v případě, že nápoj je objednaný. 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: +1. Samotné objednání nápoje provedete pomocí PATCH požadavku na API endpoint `/api/drinks/:id`. `:id` zde představuje dynamickou část url, kam vložíte `id` formuláře. Požadavek bude mít v těle JSON pole s objektem, tělo požadavku tedy bude vypadat takto: ```js [{ op: 'replace', path: '/ordered', value: true }]; @@ -18,5 +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. **Bonus**: Pokud vám toto cvičení přišlo jako pohodička, zkuste si zprovoznit zrušení objednávky. Stačí upravit vlastnost `value` body požadavku, aby místo `true` posílala opak předchozího stavu nápoje. Přístup k `ordered` stavu nápoje máte díky datům z předchozího GET requestu. Budete muset najít nápoj, který odpovídá `id` použitého formuláře. 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-stranka.md b/daweb/js2/cafe-lora-2/cvlekce/objednavka-stranka.md index 9070fc7e..49c5cb52 100644 --- a/daweb/js2/cafe-lora-2/cvlekce/objednavka-stranka.md +++ b/daweb/js2/cafe-lora-2/cvlekce/objednavka-stranka.md @@ -8,6 +8,6 @@ context: lekce 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.jsx`. +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`. Pokud bude `showMenu` mít hodnotu `true`, komponenta `Header` zobrazí celé menu, jako doposud. Pokud bude `false`, 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. From 9dc7d0cb9162ba9d1e6de98f8d2a27ec16c39ada Mon Sep 17 00:00:00 2001 From: Eva Machova Date: Thu, 2 May 2024 22:04:57 +0200 Subject: [PATCH 2/6] =?UTF-8?q?=C3=BAprava=20form=C3=A1tov=C3=A1n=C3=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- daweb/js2/cafe-lora-1/cvlekce/napoj.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/daweb/js2/cafe-lora-1/cvlekce/napoj.md b/daweb/js2/cafe-lora-1/cvlekce/napoj.md index 1d482249..f513ab28 100644 --- a/daweb/js2/cafe-lora-1/cvlekce/napoj.md +++ b/daweb/js2/cafe-lora-1/cvlekce/napoj.md @@ -10,7 +10,7 @@ V komponentě `Menu` máme příklad tří napojů zatím jako natvrdo vytvořen 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` podle vzoru nápojů z `Menu`. Připravte komponentu, aby očekávala _props_ viz níže. Nebojte se použít destrukturování. +1. V `index.jsx` vytvořte komponentu `Drink` podle vzoru nápojů z `Menu`. Připravte komponentu, aby očekávala _props_ viz níže. Nebojte se použít destrukturování. ```jsx ``` -1. Uvnitř JSX komponenty použijte pouze 2 ze seznamu _props_: `name` a `image`. První bude sloužit jako název nápoje, druhá jako adresa obrázku (atribut `src`). Ostatní _props_ můžete zatím nechat nepoužité. +1. Uvnitř JSX komponenty použijte pouze 2 ze seznamu _props_: `name` a `image`. První bude sloužit jako název nápoje, druhá jako adresa obrázku (atribut `src`). Ostatní _props_ můžete zatím nechat nepoužité. 1. Nyní máte komponentu připravenou. Vraťte se do komponenty `Menu`, smažte ukázkové příklady nápojů a místo nich použijte komponentu `Drink`. Zatím na stránce klidně zobrazte pouze jeden nápoj, ať se moc nenadřete. Předejte `Drink` _props_ podle příkladu výše, nebo si vymyslete vlastní data, ať můžete otestovat, že komponenta funguje. (Nevadí že předáte všechny _props_, i když komponenta zatím používá jenom `name` a `image`). 1. Po předání _props_ by komponenta měla minimálně správně zobrazovat vámi zadané jméno přes `name` a případně i obrázek, pokud jste např. použily adresu obrázku, který máte uložený u sebe na počítači. Adresa obrázku v příkladu nahoře využívá lokální API, které zatím nemáme zprovozněné, takže se vám tento obrázek zobrazovat nebude. 1. Tlačítko objednání zatím pouze zobrazte, funkčnost mu přidáme později. From fc04bd8f90cee42a4bf166e3db9f7ef8fe712300 Mon Sep 17 00:00:00 2001 From: Eva Machova Date: Thu, 2 May 2024 22:06:57 +0200 Subject: [PATCH 3/6] fix typo --- daweb/js2/cafe-lora-2/cvlekce/objednavani.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/daweb/js2/cafe-lora-2/cvlekce/objednavani.md b/daweb/js2/cafe-lora-2/cvlekce/objednavani.md index ea93d90d..d76fb5e8 100644 --- a/daweb/js2/cafe-lora-2/cvlekce/objednavani.md +++ b/daweb/js2/cafe-lora-2/cvlekce/objednavani.md @@ -18,5 +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. **Bonus**: Pokud vám toto cvičení přišlo jako pohodička, zkuste si zprovoznit zrušení objednávky. Stačí upravit vlastnost `value` body požadavku, aby místo `true` posílala opak předchozího stavu nápoje. Přístup k `ordered` stavu nápoje máte díky datům z předchozího GET requestu. Budete muset najít nápoj, který odpovídá `id` použitého formuláře. +1. **Bonus**: Pokud vám toto cvičení přišlo jako pohodička, zkuste si zprovoznit zrušení objednávky. Stačí upravit vlastnost `value` v body požadavku, aby místo `true` posílala opak předchozího stavu nápoje. Přístup k `ordered` stavu nápoje máte díky datům z předchozího GET requestu. Budete muset najít nápoj, který odpovídá `id` použitého formuláře. 1. Commitněte váš kód se zodpovědně napsanou commit zprávou a pushněte do vzdáleného repozitáře. From a8be08e0abb76dade2ee73ad066c9dac40f8f2a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Jirs=C3=A1k?= Date: Sat, 4 May 2024 23:32:17 +0200 Subject: [PATCH 4/6] =?UTF-8?q?Zv=C3=BDrazn=C4=9Bn=C3=AD=20=5Fprop=5F,=20o?= =?UTF-8?q?prava=20zkratky=20URL?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- daweb/js2/cafe-lora-2/cvlekce/napoje-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md b/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md index 9bdd5173..8c101bcf 100644 --- a/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md +++ b/daweb/js2/cafe-lora-2/cvlekce/napoje-api.md @@ -11,6 +11,6 @@ V tomto cvičení konečně zobrazíme celou nabídku nápojů, které si stáhn 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. Komponentu `Menu` upravte tak, aby přijímala _prop_ s názvem `drinks`. Skrz ni komponentě předejte stažený seznam nápojů a zobrazte uvnitř prvku `drinks-list` za využití komponenty `Drink`. -1. Díky datům z API můžeme komponentě `Drink` předat reálná data a zprovoznit tak obrázky a ingredience. Adresu obrázku z API předáte přes prop `image`. Nezapomeňte, že z API vám přijde pouze relativní cesta souboru, např. `/assets/cups/romano.png`, které musí předcházet url adresa, kde běží váš backend server, např. `http://localhost:4000`. Pomocí interpolace řetězců složte správně url adresu obrázku a použijte uvnitř `src`. +1. Díky datům z API můžeme komponentě `Drink` předat reálná data a zprovoznit tak obrázky a ingredience. Adresu obrázku z API předáte přes _prop_ `image`. Nezapomeňte, že z API vám přijde pouze relativní cesta souboru, např. `/assets/cups/romano.png`, které musí předcházet url adresa, kde běží váš backend server, např. `http://localhost:4000`. Pomocí interpolace řetězců složte správně URL adresu obrázku a použijte uvnitř `src`. 1. Ingredience zobrazíte za využití prop `layers` a komponenty `Layer`, která už také získá opravdová data. 1. Stránka by nyní měla zobrazovat všechny nápoje s obrázky i ingrediencemi. Commitněte se srozumitelnou zprávou a pushněte do vzdáleného repozitáře. From d4d8b716ef99e52fec6dad26eca6356aa3e37f05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Jirs=C3=A1k?= Date: Sat, 4 May 2024 23:33:25 +0200 Subject: [PATCH 5/6] =?UTF-8?q?Oprava=20zkratky=20URL,=20zv=C3=BDrazn?= =?UTF-8?q?=C4=9Bn=C3=AD=20metody=20PATCH?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- daweb/js2/cafe-lora-2/cvlekce/objednavani.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/daweb/js2/cafe-lora-2/cvlekce/objednavani.md b/daweb/js2/cafe-lora-2/cvlekce/objednavani.md index d76fb5e8..6b2e176b 100644 --- a/daweb/js2/cafe-lora-2/cvlekce/objednavani.md +++ b/daweb/js2/cafe-lora-2/cvlekce/objednavani.md @@ -9,7 +9,7 @@ context: lekce 1. Na objednávací tlačítko také přidejte třídu `.order-btn--ordered` v případě, že nápoj je objednaný. 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`. `:id` zde představuje dynamickou část url, kam vložíte `id` formuláře. Požadavek bude mít v těle JSON pole s objektem, tělo požadavku tedy bude vypadat takto: +1. Samotné objednání nápoje provedete pomocí `PATCH` požadavku na API endpoint `/api/drinks/:id`. `:id` zde představuje dynamickou část URL, kam vložíte `id` formuláře. Požadavek bude mít v těle JSON pole s objektem, tělo požadavku tedy bude vypadat takto: ```js [{ op: 'replace', path: '/ordered', value: true }]; From 1b7ed7c1cd88db1b99ad76b8406ad2032c5d3dbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Filip=20Jirs=C3=A1k?= Date: Sat, 4 May 2024 23:34:37 +0200 Subject: [PATCH 6/6] =?UTF-8?q?up=C5=99esn=C4=9Bn=C3=AD=20zdroje=20dat?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- daweb/js2/cafe-lora-2/cvlekce/objednavani.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/daweb/js2/cafe-lora-2/cvlekce/objednavani.md b/daweb/js2/cafe-lora-2/cvlekce/objednavani.md index 6b2e176b..a8297176 100644 --- a/daweb/js2/cafe-lora-2/cvlekce/objednavani.md +++ b/daweb/js2/cafe-lora-2/cvlekce/objednavani.md @@ -18,5 +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. **Bonus**: Pokud vám toto cvičení přišlo jako pohodička, zkuste si zprovoznit zrušení objednávky. Stačí upravit vlastnost `value` v body požadavku, aby místo `true` posílala opak předchozího stavu nápoje. Přístup k `ordered` stavu nápoje máte díky datům z předchozího GET requestu. Budete muset najít nápoj, který odpovídá `id` použitého formuláře. +1. **Bonus**: Pokud vám toto cvičení přišlo jako pohodička, zkuste si zprovoznit zrušení objednávky. Stačí upravit vlastnost `value` v body požadavku, aby místo `true` posílala opak předchozího stavu nápoje. Přístup k `ordered` stavu nápoje máte díky datům z předchozího GET requestu. Budete muset v poli se všemi nápoji najít nápoj, který odpovídá `id` použitého formuláře. 1. Commitněte váš kód se zodpovědně napsanou commit zprávou a pushněte do vzdáleného repozitáře.