Merge pull request #477 from Czechitas-podklady-WEB/476-kodim-verze-2

Přechod na kodim verzi 2
Czechitas-podklady-WEB · Aug 25, 2023 · 08e87ec · 08e87ec
2 parents 3cca45b + 17bb72a
commit 08e87ec
Show file tree

Hide file tree

Showing 265 changed files with 699 additions and 674 deletions.
diff --git a/assets/academy.svg b/assets/academy.svg
diff --git a/assets/intro-image.svg b/assets/intro-image.svg
diff --git a/entry.yml b/entry.yml
@@ -1,6 +1,6 @@
 title: Digitální akademie Web
 lead: Intenzivní prezenční kurz webového frontendu
-image: intro-image.svg
+image: assets/academy.svg
 chapters:
   - priprava
   - html-a-css

diff --git a/html-a-css/bem-a-responzivni-design/cv-bem.md b/html-a-css/bem-a-responzivni-design/cv-bem.md
@@ -1,3 +1,3 @@
 ## Cvičení: BEM
 
-::exc[cvlekce>bem]
+::exc[cvlekce/bem]
diff --git a/html-a-css/bem-a-responzivni-design/cv-responzivni-layout.md b/html-a-css/bem-a-responzivni-design/cv-responzivni-layout.md
@@ -1,3 +1,3 @@
 ## Cvičení: Flexibilní layout
 
-::exc[cvlekce>responsive-layout]
+::exc[cvlekce/responsive-layout]
diff --git a/html-a-css/bem-a-responzivni-design/cvlekce/bem/exercise.md b/html-a-css/bem-a-responzivni-design/cvlekce/bem/exercise.md
@@ -18,7 +18,8 @@ Pokud vám zbyde čas, můžete si odkomentovat obsah a nastylovat i další kar
 
 ::fig[výsledek]{src=assets/BEM_cviceni_result.gif}
 
----solution
+:::solution
+
 V souboru `style.css` se nic neupravuje. Upravuje se poize souboru `index.html`, ve kterém se přidávají třídy (atribut `class`) elementu `article` a vnořeným elementům.
 
 ```html
@@ -46,3 +47,5 @@ V souboru `style.css` se nic neupravuje. Upravuje se poize souboru `index.html`,
   </div>
 </article>
 ```
+
+:::
diff --git a/html-a-css/bem-a-responzivni-design/cvlekce/responsive-layout/exercise.md b/html-a-css/bem-a-responzivni-design/cvlekce/responsive-layout/exercise.md
@@ -17,7 +17,8 @@ Každou variantu si zkontrolujte v devtools a udělejte si printscreen celé str
 Podívejte se na výsledek:
 ::fig[výsledek]{src=assets/result.png}
 
----solution
+:::solution
+
 Varianty pro tři a čtyři sloupce jsou níže uvedeny v blocích `@media(…)` – co znamenají se dozvíte v příští lekci.
 Ve vašem řešení budete mít obsah příslušného bloku přímo u selektoru třídy `.foto`.
 Když použijete níže uvedené řešení s `@media(…)`, bude se počet sloupců měnit v závislosti na šířce okna prohlížeče.
@@ -57,3 +58,5 @@ header {
   }
 }
 ```
+
+:::
diff --git a/html-a-css/flexbox/cv-flexbox.md b/html-a-css/flexbox/cv-flexbox.md
@@ -1,4 +1,4 @@
 ## Cvičení: Flexbox
 
-::exc[cvlekce>flexorder]
-::exc[cvlekce>contacts]
+::exc[cvlekce/flexorder]
+::exc[cvlekce/contacts]
diff --git a/html-a-css/flexbox/cv-flexcontainer.md b/html-a-css/flexbox/cv-flexcontainer.md
@@ -1,3 +1,3 @@
 ## Cvičení: Procvičení flex-containeru
 
-::exc[cvlekce>sidebar]
+::exc[cvlekce/sidebar]
diff --git a/html-a-css/flexbox/cv-nadoma.md b/html-a-css/flexbox/cv-nadoma.md
@@ -1,5 +1,5 @@
 ## Doporučené cvičení na doma
 
-::exc[cvdoma>travelweb]
-::exc[cvdoma>navbar]
-::exc[cvdoma>cardio]
+::exc[cvdoma/travelweb]
+::exc[cvdoma/navbar]
+::exc[cvdoma/cardio]
diff --git a/html-a-css/flexbox/cvdoma/cardio/exercise.md b/html-a-css/flexbox/cvdoma/cardio/exercise.md
@@ -11,7 +11,7 @@ Nastylujte jednotlivé stránky podle zadání na výsledných obrázcích.
 
 Nezapomeňte, že při spouštění pomocí `npx serve` musíte být v terminálu ve správné složce – v tomto případě tedy ve složce konkrétního cvičení, třeba `flex1`.
 
----solution
+:::solution
 
 V řešení jsou uváděny pouze styly doplněné v rámci cvičení. Původní styly ani HTML kód se nemění.
 
@@ -165,3 +165,5 @@ V řešení jsou uváděny pouze styly doplněné v rámci cvičení. Původní
   */
 }
 ```
+
+:::
diff --git a/html-a-css/flexbox/cvdoma/navbar/exercise.md b/html-a-css/flexbox/cvdoma/navbar/exercise.md
@@ -14,7 +14,7 @@ Nastylujte hlavičku s navigací podle výsledku:
 - Položky v navigaci jsou vedle sebe, mají margin 1px, žadný padding
 - Odkazy v seznamu zabírají celou výšku rodiče a jsou vertikálně vycentrované
 
----solution
+:::solution
 
 ```css
 .hlavicka {
@@ -61,3 +61,5 @@ a {
     */
 }
 ```
+
+:::
diff --git a/html-a-css/opakovani-a-position/cv-opakovani.md b/html-a-css/opakovani-a-position/cv-opakovani.md
@@ -1,4 +1,4 @@
 ## Procvičení základů HTML a CSS
 
-::exc[cvlekce>vision-board]
-::exc[cvlekce>devtools]
+::exc[cvlekce/vision-board]
+::exc[cvlekce/devtools]
diff --git a/html-a-css/opakovani-a-position/cv-position.md b/html-a-css/opakovani-a-position/cv-position.md
@@ -1,4 +1,4 @@
 ## Cvičení: CSS position
 
-::exc[cvlekce>kocici-domecek]
-::exc[cvlekce>okno]
+::exc[cvlekce/kocici-domecek]
+::exc[cvlekce/okno]
diff --git a/html-a-css/opakovani-a-position/cvlekce/kocici-domecek/exercise.md b/html-a-css/opakovani-a-position/cvlekce/kocici-domecek/exercise.md
@@ -20,7 +20,7 @@ Každá z pěti kočiček si musí najít svoje místo.
 
 V souboru style.css je také přímo u daných tříd návod. Na počítání některých vzdáleností se bude hodit použití funkce [calc](https://www.vzhurudolu.cz/prirucka/css3-calc).
 
----solution
+:::solution
 
 Níže jsou uvedené pouze přidané styly. Mohou však být klidně přidané přímo k původním stylům.
 
@@ -104,3 +104,5 @@ Níže jsou uvedené pouze přidané styly. Mohou však být klidně přidané p
   bottom: 0;
 }
 ```
+
+:::
diff --git a/html-a-css/responzivni-design/cv-kontakty.md b/html-a-css/responzivni-design/cv-kontakty.md
@@ -1,3 +1,3 @@
 ## Projekt na doma: kontakty
 
-::exc[cvkontakty>projekt-kontakty]
+::exc[cvkontakty/projekt-kontakty]
diff --git a/html-a-css/responzivni-design/cv-nadoma.md b/html-a-css/responzivni-design/cv-nadoma.md
@@ -2,5 +2,5 @@
 
 V následujících cvičeních se mezi prvky, které budeme responzivně skládat objeví i prvky s textem „reklama“. Často jsou naše ad blockery tak chytré, že i takové prvky skryjí. Kdyby se vám tyto prvky nezobrazovaly, vypněte si ad blocker, případně použijte jiný prohlížeč (např. Brave má v sobě ad blocker už automaticky).
 
-::exc[cvnadoma-responsive>layout-03]
-::exc[cvnadoma-responsive>menu]
+::exc[cvnadoma-responsive/layout-03]
+::exc[cvnadoma-responsive/menu]
diff --git a/html-a-css/responzivni-design/cv-responsive.md b/html-a-css/responzivni-design/cv-responsive.md
@@ -2,8 +2,8 @@
 
 V následujících cvičeních se mezi prvky, které budeme responzivně skládat objeví i prvky s textem „reklama“. Často jsou naše ad blockery tak chytré, že i takové prvky skryjí. Kdyby se vám tyto prvky nezobrazovaly, vypněte si ad blocker, případně použijte jiný prohlížeč (např. Brave má v sobě ad blocker už automaticky).
 
-::exc[cvresponsive>sloupce]
-::exc[cvresponsive>banner]
-::exc[cvresponsive>galerie]
-::exc[cvresponsive>layout-01]
-::exc[cvresponsive>layout-02]
+::exc[cvresponsive/sloupce]
+::exc[cvresponsive/banner]
+::exc[cvresponsive/galerie]
+::exc[cvresponsive/layout-01]
+::exc[cvresponsive/layout-02]
diff --git a/html-a-css/selektory-a-specificita/cvselektory/exercise.md b/html-a-css/selektory-a-specificita/cvselektory/exercise.md
@@ -26,7 +26,7 @@ Uvidíte podobnou stránku s kontakty jako ze cvičení flexboxu. V tomto cviče
 
 Pro plynulé zvětšení si můžete najít použití CSS vlastnosti `transition`.
 
----solution
+:::solution
 
 ```css
 /*
@@ -57,3 +57,5 @@ div img:hover {
   transition: 0.2s ease-in-out;
 }
 ```
+
+:::
diff --git a/js1/chyby-pole/cv-ladeni.md b/js1/chyby-pole/cv-ladeni.md
@@ -1,3 +1,3 @@
 ## Cvičení: Ladění
 
-::exc[cvlekce>recitaly]
+::exc[cvlekce/recitaly]
diff --git a/js1/chyby-pole/cv-pole.md b/js1/chyby-pole/cv-pole.md
@@ -1,4 +1,4 @@
 ## Cvičení: Práce s poli
 
-::exc[cvlekce>pole-v-divadle]
-::exc[cvlekce>sachovnice]
+::exc[cvlekce/pole-v-divadle]
+::exc[cvlekce/sachovnice]
diff --git a/js1/chyby-pole/cvdoma/minutka2/exercise.md b/js1/chyby-pole/cvdoma/minutka2/exercise.md
@@ -13,7 +13,7 @@ Zařiďte, aby minutka správně odpočítávala vteřiny a začala zvonit ve ch
 1. Při kliknutí na :i[Start] nastavte časovač pomocí `setInterval`. Ten se bude opakovat každou vteřinu a pokaždé sníží hodnotu v proměnné `time` o jedna.
 1. Jakmile proměnná `time` dosáhne nuly, zapněte zvonění a zrušte časovač aby nezačal počítat do mínusu.
 
----solution
+:::solution
 
 ```js
 const nastartujMinutku = (e) => {
@@ -46,3 +46,5 @@ const nastartujMinutku = (e) => {
 const formularElm = document.querySelector('.controls');
 formularElm.addEventListener('submit', nastartujMinutku);
 ```
+
+:::
diff --git a/js1/chyby-pole/cvdoma/minutka3.md b/js1/chyby-pole/cvdoma/minutka3.md
@@ -7,7 +7,7 @@ Vylepšete program naší kuchyňské minutky tak, aby zobrazovala nejen vteřin
 
 Dejte pozor na správné formátování, kdy jednociferné hodnoty je zvykem zobrazovat s nulou na začátku. Vzpomeňte si, že na řetězcích máme metodu `padStart`, která nám s tímto může velmi pomoct.
 
----solution
+:::solution
 
 ```js
 const nastartujMinutku = (e) => {
@@ -49,3 +49,5 @@ const nastartujMinutku = (e) => {
 const formularElm = document.querySelector('.controls');
 formularElm.addEventListener('submit', nastartujMinutku);
 ```
+
+:::
diff --git a/js1/chyby-pole/cvdoma/pocitadlo/exercise.md b/js1/chyby-pole/cvdoma/pocitadlo/exercise.md
@@ -8,6 +8,8 @@ Vytvořte si repozitář ze šablony [cviceni-pocitadlo](https://github.com/Czec
 1. Bez použítí `console.log` opravte všechny chyby, které runtime vypisuje do konzole.
 1. Když vyřešíte všechna chybová hlášení, program stejně nebude fungovat. Použijte tedy své detektivní schopnosti spolu s funkcí `console.log` a odhalte poslední problémy, které brání programu ve správném fungování.
 
----solution
+:::solution
 
 [index.js](https://github.com/Czechitas-podklady-WEB/cviceni-pocitadlo/blob/reseni/index.js)
+
+:::
diff --git a/js1/chyby-pole/cvlekce/pole-v-divadle.md b/js1/chyby-pole/cvlekce/pole-v-divadle.md
@@ -10,7 +10,7 @@ Celé toto cvičení provádějte v JavaScript konzoli.
 1. Vytvořte nějaké pole řetězců, například seznam názvů několika divadelních představení, která divadlo hraje. Uložte toto pole do proměnné `plays`. Uložte do nějaké proměnné druhou položku tohoto pole. Pomocí metody `shift` odstraňte z pole první představení, které už divadlo nehraje.
 1. Do proměnné `reviews` uložte pole hodnocení, které obdržela divadelní hra :i[Plyšáci na útěku] v různých recenzních časopisech. Hodnocení je vždy dvouprvkové pole obsahující název recenzního časopisu jako řetězec a samotné hodnocení jako číslo mezi 1 až 10. Pomocí metody `unshift` přidejte na začátek nové hodnocení z časopisu :i[Divadelní oběžník].
 
----solution
+:::solution
 
 ```js
 // Vytvořte nějaké pole celých čísel, například počty diváků na několika po sobě jdoucích divadelních představeních. Použije metodu push a přidejte do pole počet diváků na novém představení.
@@ -36,3 +36,5 @@ const reviews = [
 ];
 reviews.unshift(['Divadelní oběžník', 5]);
 ```
+
+:::
diff --git a/js1/chyby-pole/cvlekce/recitaly.md b/js1/chyby-pole/cvlekce/recitaly.md
@@ -34,7 +34,7 @@ U všech následujících úryvků kódů vytvořte technický popis jejich fung
     });
     ```
 
----solution
+:::solution
 
 ### 1
 
@@ -117,3 +117,5 @@ document.addEventListener('keyup', (event) => {
 1. Pokud je podmínka splněna, zavolá se metoda `log` na objektu `console` s parametrem – textem „paused“.
 
 Pokaždé, když uživatel kdekoli v dokumentu stiskne a pak pustí klávesu „P“, vypíše se do konzole v DevTools text „paused“.
+
+:::
diff --git a/js1/chyby-pole/cvlekce/sachovnice/exercise.md b/js1/chyby-pole/cvlekce/sachovnice/exercise.md
@@ -57,7 +57,7 @@ Sem přijde váš kód, který na poli sachovnice provede tah koněm.
 zobraz(sachovnice);
 ```
 
----solution
+:::solution
 
 ```js
 const zobraz = (data) => {
@@ -82,3 +82,5 @@ sachovnice[5][5] = 0;
 
 zobraz(sachovnice);
 ```
+
+:::
diff --git a/js1/chyby-pole/ulozky-na-doma.md b/js1/chyby-pole/ulozky-na-doma.md
@@ -1,4 +1,4 @@
 ## Doporučené úložky na doma
 
-::exc[cvdoma>pocitadlo]
-::exc[cvdoma>minutka2]
+::exc[cvdoma/pocitadlo]
+::exc[cvdoma/minutka2]
diff --git a/js1/chyby-pole/volitelne-ulozky.md b/js1/chyby-pole/volitelne-ulozky.md
@@ -1,3 +1,3 @@
 ## Volitelné úložky na doma
 
-::exc[cvdoma>minutka3]
+::exc[cvdoma/minutka3]
diff --git a/js1/cykly/cv-foreach.md b/js1/cykly/cv-foreach.md
@@ -1,5 +1,5 @@
 ## Cvičení: Cykly s `forEach`
 
-::exc[cvlekce>pocitani-ovecek]
-::exc[cvlekce>palindromy]
-::exc[cvlekce>pexeso]
+::exc[cvlekce/pocitani-ovecek]
+::exc[cvlekce/palindromy]
+::exc[cvlekce/pexeso]
diff --git a/js1/cykly/cv-map.md b/js1/cykly/cv-map.md
@@ -1,4 +1,4 @@
 ## Cvičení: Metoda `map`
 
-::exc[cvlekce>nezaplacene-objednavky]
-::exc[cvlekce>piskvorky-3x3]
+::exc[cvlekce/nezaplacene-objednavky]
+::exc[cvlekce/piskvorky-3x3]
diff --git a/js1/cykly/cvdoma/algoritmy-fajnsmekri.md b/js1/cykly/cvdoma/algoritmy-fajnsmekri.md
@@ -17,7 +17,7 @@ const numbers = [
 1. Najděte druhý největší prvek v seznamu.
 1. Najděte nejnižší vrchol a nejvyšší údolí. Údolí je číslo, které je menší než jeho předchůdce i následovník.
 
----solution
+:::solution
 
 **a. Vypište na výstup délku nejdelší rostoucí sekvence čísel, které v poli následují přímo po sobě.**
 
@@ -122,3 +122,5 @@ for (let i = 0; i < numbers.length; i++) {
 
 console.log(`Druhý největší prvek v seznamu je ${secondMaximumNumber}`);
 ```
+
+:::
diff --git a/js1/cykly/cvdoma/cekani-na-sestku.md b/js1/cykly/cvdoma/cekani-na-sestku.md
@@ -9,7 +9,7 @@ Založte JavaScriptový program a splňte následující úkoly.
 1. Váš program nechť hází kostkou tak dlouho, až poprvé padne šestka. Vypište na výstup na kolikátý pokus šestka padla.
 1. Spusťte váš program desetkrát za sebou a zaznamenejte výsledky. Sdílejte vaše výsledky s ostatními abychom nasbírali co nejvíce dat.
 
----solution
+:::solution
 
 ```js
 const roll = () => {
@@ -26,3 +26,5 @@ while (rolledNumber !== 6) {
 
 console.log(`Šestka se hodila na ${counter}. pokus`);
 ```
+
+:::
diff --git a/js1/cykly/cvdoma/for-each-cisla.md b/js1/cykly/cvdoma/for-each-cisla.md
@@ -31,7 +31,7 @@ const shoppingList = [
    'moukamáslocukrjablkaskořicemlékocibule'
    ```
 
----solution
+:::solution
 
 1. ```js
    const shoppingList = [
@@ -58,3 +58,5 @@ const shoppingList = [
 
    console.log(shoppingListString);
    ```
+
+:::
diff --git a/js1/cykly/cvdoma/male-algoritmy.md b/js1/cykly/cvdoma/male-algoritmy.md
@@ -25,7 +25,7 @@ const numbers = [
 1. Spočítejte průměr všech čísel v poli.
 1. Spočítejte součet všech kladných čísel v poli.
 
----solution
+:::solution
 
 1. Vypište na výstup všechna čísla.
    ```js
@@ -151,3 +151,5 @@ const numbers = [
    });
    console.log('Průměr všech:', positiveSum);
    ```
+
+:::
diff --git a/js1/cykly/cvdoma/nakupni-seznam-funkce.md b/js1/cykly/cvdoma/nakupni-seznam-funkce.md
@@ -14,7 +14,7 @@ demand: 2
 
 1. Upravte výsledek předchozího cvičení tak, že obsah číslovaného seznamu vytvoříte voláním funkce `shoppingList`.
 
----solution
+:::solution
 
 1. ```js
    const shoppingList = (polozky) => {
@@ -30,3 +30,5 @@ demand: 2
    const list = ['mouka', 'máslo', 'cukr', 'jablka', 'skořice'];
    document.querySelector('ol').innerHTML = shoppingList(list);
    ```
+
+:::
diff --git a/js1/cykly/cvdoma/nakupni-seznam.md b/js1/cykly/cvdoma/nakupni-seznam.md
@@ -29,7 +29,7 @@ const list = ['mouka', 'máslo', 'cukr', 'jablka', 'skořice'];
 
 1. Vytvořte někde na stránce prázdný číslovaný seznam `ol` a pomocí vlastnosti `innerHTML` do něj vložte řetězec sestavený v předchozím kroku.
 
----solution
+:::solution
 
 1. ```js
    const list = ['mouka', 'máslo', 'cukr', 'jablka', 'skořice'];
@@ -64,3 +64,5 @@ const list = ['mouka', 'máslo', 'cukr', 'jablka', 'skořice'];
 1. ```js
    document.querySelector('ol').innerHTML = vysledek;
    ```
+
+:::