Merge pull request #531 from Czechitas-podklady-WEB/feature/zamek-a-c…

…onsole-pro-sobotu

Zámek řešení a odebrání console pro sobotu

daweb/js1/funkce-arg-udalosti/cvdoma/catering.md

@@ -1,6 +1,8 @@
 ---
 title: Catering
+lead: 'Tři cateringové společnosti dodávající občerstvení na různé akce.'
 demand: 3
+solutionAccess: lock
 ---
 
 Mějme tři cateringové společnosti dodávající občerstvení na různé akce. Jsou to

daweb/js1/funkce-arg-udalosti/cvdoma/kostka/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Kostka
+lead: 'Oživte herní kostku.'
 demand: 2
+solutionAccess: lock
 ---
 
 Vytvořte si repozitář ze šablony [cviceni-kostka](https://github.com/Czechitas-podklady-WEB/cviceni-kostka) se stránkou, která zobrazuje hrací kostku. Doplňte do stránky JavaScriptový program, který zařídí, že když uživatel zmáčkne na stránce libovolnou klávesu, na kostce se zobrazí číslo o jedna vyšší. Po šestce zobrazte opět jedničku.

daweb/js1/funkce-arg-udalosti/cvdoma/minutka/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Minutka
+lead: 'Oživte kuchyňskou minutku.'
 demand: 2
+solutionAccess: lock
 ---
 
 Vytvořte si repozitář ze šablony [cviceni-minutka](https://github.com/Czechitas-podklady-WEB/cviceni-minutka) pro stránku s kuchyňskou minutkou. Využijte funkci `setTimeout` ke splnění následujících úkolů.

daweb/js1/funkce-arg-udalosti/cvlekce/e-mail-2.md

@@ -1,6 +1,8 @@
 ---
 title: E-mail podruhé
+lead: 'Pokračujte s e-maily'
 demand: 2
+solutionAccess: lock
 ---
 
 Pojďme dále rozvinout cvičení s [vyplňováním e-mailu](/kurzy/daweb/js1/funkce-obory/cv-funkce#cvlekce%3Ee-mail-telo) z předchozí lekce.
@@ -48,10 +50,10 @@ const fillSubject = (subject) => {
 };
 
 const fillBody = (body, name, goodbyeFunction) => {
-  const bodyElm = document.querySelector('.email__body');
-  bodyElm.innerHTML = body;
-  const closingElm = document.querySelector('.email__closing');
-  closingElm.textContent = goodbyeFunction(name);
+  const bodyElement = document.querySelector('.email__body');
+  bodyElement.innerHTML = body;
+  const closingElement = document.querySelector('.email__closing');
+  closingElement.textContent = goodbyeFunction(name);
 };
 ```
 

daweb/js1/funkce-arg-udalosti/cvlekce/hesla.md

@@ -1,25 +1,24 @@
 ---
 title: Hesla
+lead: 'Generujte bezpečká i nebezpečná hesla.'
 demand: 2
+solutionAccess: lock
 ---
 
 Vytvořte si repozitář ze šablony [cviceni-hesla](https://github.com/Czechitas-podklady-WEB/cviceni-hesla) se stránkou, která obsahuje tři různé funkce na generování hesel. Každá funkce vygeneruje heslo zadané délky s určitou bezpečnostní silou. Kód funkcí zkoumat nemusíte, obsahuje věci, které jsme zatím neprobírali.
 
 Příklad samostatného použití jednotlivých funkcí:
 
-```jscon
-> weakPassword(5)
-'01234'
+```js
+weakPassword(5); // → '01234'
 ```
 
-```jscon
-> mediumPassword(8)
-'48140525'
+```js
+mediumPassword(8); // → '48140525'
 ```
 
-```jscon
-> strongPassword(6)
-'azc7mw'
+```js
+strongPassword(6); // → 'azc7mw'
 ```
 
 Napište funkci `createAccount`, která se bude tvářit, že zakládá nový uživatelský účet. Funkce bude mít **dva parametry** `user` a `generatePassword`. **První bude uživatelské jméno** a **druhý bude funkce**, pomocí které se má vygenerovat heslo pro tento účet. Funkce `createAccount` **vrátí řetězec**, který bude obsahovat jméno uživatele a heslo vygenerované voláním funkce `generatePassword`. Funkci `generatePassword` při volání předejte **číslo 9** jako délku hesla.
@@ -30,7 +29,7 @@ Na konci javascriptového kódu vyzkoušejte založit více různých účtů s
 document.body.innerHTML += `
 	<p>${createAccount('Míša', weakPassword)}</p>
 	<p>${createAccount('Řízek', mediumPassword)}</p>
-	<p>${createAccount('Hustodémon', strongPassword)}</p>
+	<p>${createAccount('Mápodčepicí', strongPassword)}</p>
 `;
 ```
 
@@ -39,7 +38,7 @@ by mělo vepsat do stránky něco jako:
 ```text
 Uživatel Míša s heslem 012345678
 Uživatel Řízek s heslem 074031827
-Uživatel Hustodémon s heslem mwwf9epts
+Uživatel Mápodčepicí s heslem mwwf9epts
 ```
 
 :::solution
@@ -52,7 +51,7 @@ const createAccount = (user, generatePassword) => {
 document.body.innerHTML += `
 	<p>${createAccount('Míša', weakPassword)}</p>
 	<p>${createAccount('Řízek', mediumPassword)}</p>
-	<p>${createAccount('Hustodémon', strongPassword)}</p>
+	<p>${createAccount('Mápodčepicí', strongPassword)}</p>
 `;
 ```
 

daweb/js1/funkce-arg-udalosti/cvlekce/kontrola-dostupnosti/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Kontrola dostupnosti
+lead: 'Oživte objednávkové tlačítko'
 demand: 2
+solutionAccess: lock
 ---
 
 Vyjděte z řešení předchozího příkladu, kdy se objednává při kliknutí na tlačítko.
@@ -14,11 +16,11 @@ Vyjděte z řešení předchozího příkladu, kdy se objednává při kliknutí
 :::solution
 
 ```html
-<button id="btn-order" disabled>Kontroluji dostupnost…</button>
+<button id="button-order" disabled>Kontroluji dostupnost…</button>
 ```
 
 ```js
-const button = document.querySelector('#btn-order');
+const button = document.querySelector('#button-order');
 setTimeout(() => {
   button.textContent = 'Objednat';
   button.disabled = false;

daweb/js1/funkce-arg-udalosti/cvlekce/objednavka/exercise.md

@@ -1,13 +1,15 @@
 ---
 title: Objednávka
+lead: 'Vytvořte stránku s objednávacím tlačítkem.'
 demand: 1
+solutionAccess: lock
 ---
 
 Vytvoříme jednoduchou stránku s objednávacím tlačítkem.
 
 1. Založte HTML stránku s jedním tlačítkem
    ```html
-   <button id="btn-order">Objednat</button>
+   <button id="button-order">Objednat</button>
    ```
 1. Doplňte do stránky JavaScriptový program, který zařídí, že po stisknutí tlačítka se do stránky za tlačítko vypíše odstavec:
    ```html
@@ -20,7 +22,7 @@ Vytvoříme jednoduchou stránku s objednávacím tlačítkem.
 :::solution
 
 ```js
-const button = document.querySelector('#btn-order');
+const button = document.querySelector('#button-order');
 button.addEventListener('click', () => {
   // document.body.innerHTML += '<p>Objednáno</p>';
   button.textContent = 'Objednáno';

daweb/js1/funkce-arg-udalosti/cvlekce/zarovka/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Žárovka
+lead: 'Ovládejte žárovku.'
 demand: 2
+solutionAccess: lock
 ---
 
 Vytvořte si repozitář ze šablony [cviceni-zarovka](https://github.com/Czechitas-podklady-WEB/cviceni-zarovka) se stránkou, která zobrazuje obyčejnou žárovku.

daweb/js1/funkce-arg-udalosti/udalosti.md

@@ -6,8 +6,8 @@ Abychom mohli na události reagovat, JavaScript nám umožňuje ke každé udál
 
 ```js
 const changeTitle = () => {
-  const h1Elm = document.querySelector('h1');
-  h1Elm.textContent = 'Baf!';
+  const h1Element = document.querySelector('h1');
+  h1Element.textContent = 'Baf!';
 };
 ```
 
@@ -24,12 +24,12 @@ Nejdříve tlačítko z dokumentu vybereme a poté na něm zavoláme speciální
 
 ```js
 const changeTitle = () => {
-  const h1Elm = document.querySelector('h1');
-  h1Elm.textContent = 'Baf!';
+  const h1Element = document.querySelector('h1');
+  h1Element.textContent = 'Baf!';
 };
 
-const btnElm = document.querySelector('button');
-btnElm.addEventListener('click', changeTitle);
+const buttonElement = document.querySelector('button');
+buttonElement.addEventListener('click', changeTitle);
 ```
 
 ### Nástrahy
@@ -39,16 +39,16 @@ S událostmi přichází několik nástrah, na které když si nedáme pozor, na
 Nástraha první spočítá v předávání funkce `changeTitle`. Všimněte si opět toho, že používáme funkci `changeTitle` jako hodnotu a předáváme ji jako vstup metodě `addEventListener`. Nikde v našem kódu funkci sami nevoláme. Zavolá ji až JavaScript runtime ve chvíli, kdy na tlačíku nastane událost `click`. Častou začátečnickou chybou je pokušet se funkci zavolat sami.
 
 ```js
-btnElm.addEventListener('click', changeTitle());
+buttonElement.addEventListener('click', changeTitle());
 ```
 
 V tomto případě se funkce `changeTitle` zavolá už ve chvíli, kdy voláme metodu `addEventListener`. Té se pak jako druhý vstup předá **výsledek** volání funkce `changeTitle`, nikoliv funkce samotná. Jelikož `changeTitle` nic nevrací (přesněji řečeno, vrací `undefined`), k události `click` se žádný posluchač nepřipojí. Naše tlačítko tedy nebude fungovat. Co nás může zmást je to, že takováto stránka nevyhodí žádnou chybu. Náš JavaScript kód totiž funguje jak má. Jen jsme ho napsali tak, že dělá něco jiného než chceme. JavaScript runtime však nemůže telepaticky nahlížet do našich hlav aby věděl, co doopravdy chceme. Prostě dělá to, co jsme mu řekli.
 
 Nástraha druhá spočívá v názvech událostí. To jsou obyčejné řetězce, jak je známe už z první lekce. Není vůbec těžké udělat v názvu události překlep, obzvlášť, pokud je název delší, nebo nejsme tolik zdatní v angličtině.
 
 ```js
-btnElm.addEventListener('clik', changeTitle);
-btnElm.addEventListener('mousdown', changeTitle);
+buttonElement.addEventListener('clik', changeTitle);
+buttonElement.addEventListener('mousdown', changeTitle);
 ```
 
 Správně je `click` a `mousedown`. Toto za nás JavaScript runtime bohužel nezkontroluje. Jenoduše k našemu názvu připojí posluchače a už se nestará o to, že událost se špatným názvem nikdy nenastane. Naše stránka pak prostě nebude fungovat a opět také nenastane žádná chyba. Z hlediska runtimu je však jako v předchozím případě všechno v naprostém pořádku.

daweb/js1/udalosti-formulare/cteni-na-doma.md

@@ -11,19 +11,19 @@
 Pokud chceme zjistit, jaká klávesa byla stisknuta při událostech `keyup` a `keydown`, musíme znát název této klávesy. Názvy kláves snadno najdete na [keycode.info](https://keycode.info). Zjistíme tak například, že klávesa :kbd[Enter] se jmenuje prostě `Enter`, klávesa :kbd[D] se jmenuje `KeyD` a tak dále. Takto pak na stránce můžeme zareagovat například na stisknutí :kbd[Enter].
 
 ```js
-document.addEventListener('keyup', (e) => {
-  if (e.code === 'Enter') {
-    console.log('enter');
+document.addEventListener('keyup', (event) => {
+  if (event.code === 'Enter') {
+    document.body.innerHTML += '<p>enter</p>';
   }
 });
 ```
 
 Nebo na stisknutí :kbd[Ctrl]+:kbd[C].
 
 ```js
-document.addEventListener('keyup', (e) => {
-  if (e.code === 'KeyC' && e.ctrlKey) {
-    console.log('Ctrl+C');
+document.addEventListener('keyup', (event) => {
+  if (event.code === 'KeyC' && event.ctrlKey) {
+    document.body.innerHTML += '<p>Ctrl+C</p>';
   }
 });
 ```

daweb/js1/udalosti-formulare/cvdoma/auto/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Auto
+lead: 'Rozpohybujte auto.'
 demand: 2
+solutionAccess: lock
 ---
 
 1. Založte si HTML stránku s JavaScriptem, třeba následujícím příkazem:

daweb/js1/udalosti-formulare/cvdoma/newsletter-kontrola.md

@@ -1,6 +1,8 @@
 ---
 title: Newsletter, kontrola
+lead: 'Kontrola vstupu ve formuláři.'
 demand: 2
+solutionAccess: lock
 ---
 
 Pokračujte v příkladu Newsletter z lekce. V tomto cvičení zařidíme, aby uživatel při zadávání e-mailu dostal zpětnou vazbu, pokud zadává neplatný vstup.

daweb/js1/udalosti-formulare/cvdoma/prihlaseni.md

@@ -1,6 +1,8 @@
 ---
 title: Přihlášení
+lead: 'Vytvořte přihlašovací formulář.'
 demand: 2
+solutionAccess: lock
 ---
 
 Vytvořte klasický přihlašovací formulář, do kterého uživatel zadá svůj e-mail a heslo a stránka ověří, zda má uživatel přístup do systému. Postupujte podle instrukcí níže.

daweb/js1/udalosti-formulare/cvlekce/kalkulacka/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Kalkulačka
+lead: 'Oživte kalkulačku.'
 demand: 2
+solutionAccess: lock
 ---
 
 Vytvořte si repozitář ze šablony [cviceni-kalkulacka](https://github.com/Czechitas-podklady-WEB/cviceni-kalkulacka) se stránkou, která obsahuje číselník a display jednoduché kalkulačky.

daweb/js1/udalosti-formulare/cvlekce/newsletter/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Newsletter
+lead: 'Formulář na sběr e-mailových adres.'
 demand: 2
+solutionAccess: lock
 ---
 
 Podle postupu níže vyrobte stránku podobnou té na obrázku.

daweb/js1/udalosti-formulare/cvlekce/objednavka/exercise.md

@@ -1,6 +1,8 @@
 ---
 title: Objednávka
+lead: 'Formulář pro dokončení objednávky na e-shopu.'
 demand: 2
+solutionAccess: lock
 ---
 
 Podle instrukcí níže vytvořte jednoduchý formulář pro dokončení objednávky na nějakém e-shopu. Formulář umožní uživateli zadat číslo platební karty a způsob dopravy.

docker-compose.yml

@@ -1,9 +1,9 @@
 version: '3'
 services:
   kodim:
-    image: onset/kodimcz:2.0.0-beta.8
+    image: onset/kodimcz:2.0.0-beta.10
     restart: always
     ports:
       - '3000:3000'
     volumes:
-      - ./:/content/kurzy/kurz
+      - ./daweb:/content/kurzy/kurz # Ignoruje ostatní kurzy. Řešit všechny je komplikované.