diff --git a/js1/dom-innerhtml/cv-manipulace.md b/js1/dom-innerhtml/cv-manipulace.md index a7abcd63..04c56fbc 100644 --- a/js1/dom-innerhtml/cv-manipulace.md +++ b/js1/dom-innerhtml/cv-manipulace.md @@ -1,4 +1,8 @@ ## Cvičení: Manipulace s DOMem ::exc[cvlekce/novinky] +::exc[cvlekce/hod-minci] + +### Bonus + ::exc[cvlekce/kviz] diff --git a/js1/dom-innerhtml/cvlekce/hod-minci/assets/hod.gif b/js1/dom-innerhtml/cvlekce/hod-minci/assets/hod.gif new file mode 100644 index 00000000..965f08f0 Binary files /dev/null and b/js1/dom-innerhtml/cvlekce/hod-minci/assets/hod.gif differ diff --git a/js1/dom-innerhtml/cvlekce/hod-minci/exercise.md b/js1/dom-innerhtml/cvlekce/hod-minci/exercise.md new file mode 100644 index 00000000..6904b09c --- /dev/null +++ b/js1/dom-innerhtml/cvlekce/hod-minci/exercise.md @@ -0,0 +1,51 @@ +--- +title: Hod mincí +demand: 2 +lead: Oživte virtuální minci. +solutionAccess: lock +--- + +Vytvořte si repozitář ze šablony [cviceni-hod-minci](https://github.com/Czechitas-podklady-WEB/cviceni-hod-minci). Repozitář obsahuje stránku s nedokončenou simulací hodu mince. Vaším úkolem bude mincí „hodit“. + +1. V souboru `index.js` si do proměnné `padlOrel` uložte hodnotu `true` nebo `false` na základě náhodné hodnoty z funkce `Math.random()`. Pravděpodobnost 50:50 zajistíte porovnáním výsledku funkce s hodnotou `0.5`. + + ```js + const padlOrel = Math.random() < 0.5; + ``` + +1. Pomocí `document.querySelector` vyberte ze stránky prvek `.vysledek` a nahraďte jeho obsah textem `Padl orel` nebo `Padla panna` na základě náhodné hodnoty z předchozího kroku. + + ```js + if (padlOrel) { + // Nahraďte text pro orla + } else { + // Nahraďte text pro pannu + } + ``` + +1. Vyzkoušejte stránku několikrát načíst a koukněte, jestli se text mění. +1. Kromě změny textu ještě přidejte prvku `.mince` druhou třídu `mince--orel` nebo `mince--panna` opět podle hodnoty v proměnné `padlOrel`. +1. Znovu několikrát vyzkoušejte, že obrázek mince odpovídá textu pod ním. + +::fig[ukázka výsledku]{src=assets/hod.gif} + +:::solution + +Náhled výsledku: [czechitas-podklady.cz/cviceni-hod-minci/](https://czechitas-podklady.cz/cviceni-hod-minci/) + +```js +const vysledek = document.querySelector('.vysledek'); +const mince = document.querySelector('.mince'); + +const padlOrel = Math.random() < 0.5; + +if (padlOrel) { + vysledek.textContent = 'Padl orel'; + mince.classList.add('mince--orel'); +} else { + vysledek.textContent = 'Padla panna'; + mince.classList.add('mince--panna'); +} +``` + +::: diff --git a/js1/dom-innerhtml/entry.yml b/js1/dom-innerhtml/entry.yml index 421437e8..4339d523 100644 --- a/js1/dom-innerhtml/entry.yml +++ b/js1/dom-innerhtml/entry.yml @@ -9,4 +9,3 @@ sections: - pokrocile-tridy - cv-tridy-innerhtml - shrnuti - - ulozky-na-doma diff --git a/js1/dom-innerhtml/ulozky-na-doma.md b/js1/dom-innerhtml/ulozky-na-doma.md deleted file mode 100644 index 8bb0eb43..00000000 --- a/js1/dom-innerhtml/ulozky-na-doma.md +++ /dev/null @@ -1,3 +0,0 @@ -## Doporučené úložky na doma - -::exc[cvdoma/dovednosti] diff --git a/js1/dom-innerhtml/cvdoma/dovednosti.md b/js1/knihovny-vlastni-funkce/cvdoma/dovednosti.md similarity index 100% rename from js1/dom-innerhtml/cvdoma/dovednosti.md rename to js1/knihovny-vlastni-funkce/cvdoma/dovednosti.md diff --git a/js1/knihovny-vlastni-funkce/ulozky-na-doma.md b/js1/knihovny-vlastni-funkce/ulozky-na-doma.md index d2c72f80..fa7031fb 100644 --- a/js1/knihovny-vlastni-funkce/ulozky-na-doma.md +++ b/js1/knihovny-vlastni-funkce/ulozky-na-doma.md @@ -3,3 +3,4 @@ ::exc[cvdoma/parsovani-data] ::exc[cvdoma/formatovani-data] ::exc[cvdoma/python-round] +::exc[cvdoma/dovednosti]