Merge branch 'master' into 498-js1-lekce-2-vyhodit-praci-s-konzoli

html-a-css/responzivni-design/cvresponsive/banner/exercise.md

@@ -15,3 +15,19 @@ HTML není potřeba nijak upravovat.
 
 Výsledek bude vypadat takto:
 ::fig[responsive banner result]{src=assets/banner-result.gif}
+
+:::solution
+
+```css
+.banner {
+  display: none;
+}
+
+@media (min-width: 800px) {
+  .banner {
+    display: block;
+  }
+}
+```
+
+:::

html-a-css/responzivni-design/cvresponsive/galerie/exercise.md

@@ -22,3 +22,41 @@ HTML není potřeba nijak upravovat.
 
 Výsledek bude vypadat takto:
 ::fig[responsive layout result]{src=assets/galerie-result.gif}
+
+:::solution
+
+```css
+.foto img {
+  width: 100%;
+}
+
+@media (min-width: 500px) {
+  .galerie {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .foto {
+    width: 50%;
+  }
+}
+
+@media (min-width: 650px) {
+  .foto {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 800px) {
+  .foto {
+    width: calc(100% / 4);
+  }
+}
+
+@media (min-width: 1000px) {
+  .foto {
+    width: calc(100% / 6);
+  }
+}
+```
+
+:::

html-a-css/responzivni-design/cvresponsive/layout-01/exercise.md

@@ -15,3 +15,29 @@ Rozložení stránky se mění v breakpointech:
 - 1000px
 
 HTML není potřeba nijak upravovat.
+
+:::solution
+
+```css
+@media (min-width: 640px) {
+  .kontejner {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .druhy,
+  .prvni {
+    width: 50%;
+  }
+}
+
+@media (min-width: 1000px) {
+  .prvni,
+  .druhy,
+  .treti {
+    width: calc(100% / 3);
+  }
+}
+```
+
+:::

html-a-css/responzivni-design/cvresponsive/layout-02/exercise.md

@@ -15,3 +15,32 @@ Rozložení stránky se mění v breakpointech:
 - 1000px
 
 HTML není potřeba nijak upravovat.
+
+:::solution
+
+```css
+@media (min-width: 640px) {
+  .kontejner {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .menu {
+    width: 30%;
+  }
+  .obsah {
+    width: 70%;
+  }
+}
+
+@media (min-width: 1000px) {
+  .menu,
+  .reklama {
+    width: 20%;
+  }
+  .obsah {
+    width: 60%;
+  }
+}
+```
+
+:::

html-a-css/responzivni-design/cvresponsive/sloupce/exercise.md

@@ -15,3 +15,18 @@ HTML není potřeba nijak upravovat.
 
 Výsledek bude vypadat takto:
 ::fig[responsive columns result]{src=assets/sloupce-result.gif}
+
+:::solution
+
+```css
+@media (min-width: 800px) {
+  .kontejner {
+    display: flex;
+  }
+  .sloupec {
+    width: calc(100 / 3);
+  }
+}
+```
+
+:::

js1/uvod-do-js/cteni-na-doma.md

@@ -8,9 +8,9 @@ Podobně jako má čeština :i[Pravidla českého pravopisu], má i JavaScript s
 
 Ve verzi ES5 se například proměnné nevytvářejí pomocí `let` a `const` nýbrž pomocí `var`. Náš příklad s výplatou by tedy ve verzi ES5 vypadal takto.
 
-```jscon
-> var celkem = 1 + 2 + 4 + 1 + 6
-> var prumer = celkem / 5
+```js
+var sazba = 500;
+var vyplata = 8 * 21 * sazba;
 ```
 
 Proměnné vytvořené pomocí `var` se dají měnit podobně jako proměnné vytvořené pomocí `let`. Platí pro ně ovšem trochu jiná pravidla a ta jsou právě často na překážku dobrému programátorskému stylu. To je důvod, proč toto klíčové slovo bylo v ES6 nahrazeno klíčovými slovy `let` a `const`. Klíčové slovo `var` už je tedy zastaralé a není žádný důvod jej používat. My v tomto kurzu budeme striktně používat `let` a `const`. Pokud v nějakém starším online kurzu nebo knize narazíte na `var`, použíjte místo něj vždy `let` nebo `const`.

js1/uvod-do-js/cvdoma/hazeni-kostkou.md

@@ -1,6 +1,8 @@
 ---
 title: Házení kostkou
 demand: 3
+lead: Vymyslete funkci, která simuluje hod kostkou.
+solutionAccess: lock
 ---
 
 Vymyslete, jak použít funkci `Math.random` a různé zaokrouhlovací funkce probírané v této lekci k simulování hodu klasickou šestistěnnou kostkou. S použitím vhodných funkcí sestavte výraz, který vygeneruje náhodné celé číslo **mezi 1 a 6**.

js1/uvod-do-js/cvdoma/prijem-divadla.md

@@ -1,6 +1,8 @@
 ---
 title: Příjem divadla
 demand: 2
+lead: Spočítejte příjem divadla ze vstupného.
+solutionAccess: lock
 ---
 
 1. Jeden lístek do divadla :i[Pěst na oko] stojí **12 euro**. Spočítejte měsíční příjem divadla ze vstupného, přichází-li průměrně **174 návštěvníků** na jedno představení a divadlo hraje **15 představení** měsíčně. Uložte výsledek do proměnné `prijem`.

js1/uvod-do-js/cvdoma/schopnejsi-zaokrouhlovani-2.md

@@ -1,6 +1,7 @@
 ---
 title: Schopnější zaokrouhlování 2
 demand: 3
+lead: Zaokrouhlete číslo na zadaný počet cifer.
 ---
 
 Představte si, že máme v proměnné se jménem `x` uloženo nějaké desetinné číslo a v proměnné `k` údaj na kolik cifer chceme zaokrouhlovat. Například `k=3` znamená, že chceme zaokrouhlit na tisíciny. Naopak `k=-2` znamená, že zaokrouhlujeme na celé stovky. Hodnota `k=0` tedy znamená běžné zaokrouhlování na jednotky.

js1/uvod-do-js/cvdoma/schopnejsi-zaokrouhlovani.md

@@ -1,6 +1,8 @@
 ---
 title: Schopnější zaokrouhlování
 demand: 3
+lead: Zaokrouhlete číslo na desetiny, setiny a celé stovky.
+solutionAccess: lock
 ---
 
 Mějme v proměnné `x` uloženo nějaké desetinné číslo. Pomocí funkce `Math.round` jej můžeme zaokrouhlit na celá čísla takto.

js1/uvod-do-js/cvlekce/delka-filmu.md

@@ -1,6 +1,8 @@
 ---
 title: Délka filmu
 demand: 2
+lead: Spočítejte, kolik hodin a minut trvá film Pán prstenů.
+solutionAccess: lock
 ---
 
 V programu kin se často uvádí délka filmu v minutách. Například rozšířená verze filmu :i[Pán prstenů: Dvě věže] trvá 223 minut. My bychom ovšem délku filmu raději věděli v hodinách a minutách. Za použití funkcí a operátorů z této lekce spočítejte, kolik hodin a minut trvá film :i[Pán prstenů: Dvě věže].

js1/uvod-do-js/cvlekce/email.md

@@ -1,16 +1,16 @@
 ---
 title: E-mail
 demand: 1
+lead: Vytvořte řetězec obsahující vaši e-mailovou adresu.
+solutionAccess: lock
 ---
 
-Vytvořte řetězec obsahující vaši e-mailovou adresu.
-
-1. Sestavte e-mailovou adresu tak, že sečtete dohromady vaše křestní jméno, znak tečka, vaše příjmení a koncovku `@mujmail.com`.
+Sestavte e-mailovou adresu tak, že sečtete dohromady vaše křestní jméno, znak tečka, vaše příjmení a koncovku `@mujmail.com`.
 
 :::solution
 
 ```js
-'Tom' + '.' + 'Jedno' + '@mujmail.com';
+'Franta' + '.' + 'Dobrota' + '@mujmail.com';
 ```
 
 :::

js1/uvod-do-js/cvlekce/nahodna-cisla.md

@@ -1,6 +1,8 @@
 ---
 title: Náhodná čísla
 demand: 1
+lead: Zobrazte na stránce náhodné číslo.
+solutionAccess: lock
 ---
 
 Založte si JavaScriptový program a pomocí `document.body.innerHTML` a funkce `Math.random` zobrazte na stránce náhodné číslo. Zkuste stránku několikrát po sobě obnovit a ověřte si, že pokaždé obdržíte jiné číslo.

js1/uvod-do-js/cvlekce/prevod-meny.md

@@ -1,8 +1,11 @@
 ---
 title: Převod měny
 demand: 2
+lead: Spočítejte, kolik si vyděláte v českých korunách.
+solutionAccess: lock
 ---
 
+1. Založte si novou prázdnou stránku s JavaScriptovým programem.
 1. Dejme tomu, že si jako programátoři vyděláváte 20 euro na hodinu. Uložte tuto hodnotu do proměnné `wageInEur`.
 1. Spočítejte, kolik je vaše hodinová mzda v českých korunách, jestliže kurz eura je `26.58` Kč. Výsledek zaokrouhlete na celé koruny a uložte do proměnné :var[wageInCzk].
 1. Vypište obsah proměnné :var[wageInCzk] do webové stránky tak, aby na stránce byl nadpis `h1` s obsahem:

js1/uvod-do-js/cvlekce/ultramaraton.md

@@ -1,11 +1,16 @@
 ---
 title: Ultramaraton
 demand: 2
+lead: Spočítejte, v kolik hodin skončí ultramaratonský závod.
+solutionAccess: lock
 ---
 
 Představte si, že jste pořadatelé ultramaratonského závodu. Závod začíná ve **tři hodiny odpoledne**, což ve 24hodinovém formátu zapíšeme jako **15**. Nejlepší běžec zvládne vaši brutální trasu za **10 hodin**. Doběhne tedy **v jednu hodinu ráno**, v našem formátu zapsáno jako **1**.
 
-Založte si JavaScriptový program a uložte čas startu závodu do proměnné `start`. Do proměnné `delka` uložte délku závodu pro nějakého běžce. Klidně může být pomalejší než náš šampion. Do proměnné `konec` spočítejte, v kolik hodin závod pro našeho běžce skončí a vypište její obsah do stránky. Vyzkoušejte různé délky a ověřte, že váš postup funguje.
+1. Založte si JavaScriptový program a uložte čas startu závodu do proměnné `start`.
+1. Do proměnné `delka` uložte délku závodu pro nějakého běžce. Klidně může být pomalejší než náš šampion.
+1. Do proměnné `konec` spočítejte, v kolik hodin závod pro našeho běžce skončí a vypište její obsah do stránky.
+1. Vyzkoušejte různé délky a ověřte, že váš postup funguje.
 
 :::solution
 

js1/uvod-do-js/cvlekce/vyplata.md

@@ -1,23 +1,26 @@
 ---
 title: Výplata
 demand: 1
+lead: Pomocí jednoduché aritmetiky spočítejte, kolik si jako programátor vyděláte.
+solutionAccess: lock
 ---
 
-1. Spočítejte svůj měsíční příjem, víte-li, že pracujete 7 hodin denně se mzdou 265 Kč na hodinu. Řekněme, že měsíc má 21 pracovních dní.
+1. Založte si novou prázdnou stránku s JavaScriptovým programem.
+1. V programu spočítejte svůj měsíční příjem, víte-li, že pracujete 7 hodin denně se mzdou 320 Kč na hodinu. Řekněme, že měsíc má 21 pracovních dní.
 1. Pokud pracujete na živnostenský list, můžete si odečíst 60 % příjmů jako paušál a ze zbytku zaplatíte 15% daň. Spočítejte, jak velkou daň zaplatíte ze své výplaty. Pomocí funkce `Math.floor` zaokrouhlete výsledek dolů na celé koruny.
 
 :::solution
 
 #### Měsíční příjem
 
 ```js
-21 * 7 * 265;
+document.body.innerHTML += 21 * 7 * 320;
 ```
 
 #### Daň
 
 ```js
-Math.floor(21 * 7 * 265 * (1 - 0.6) * 0.15);
+document.body.innerHTML += Math.floor(21 * 7 * 265 * (1 - 0.6) * 0.15);
 ```
 
 :::

js1/uvod-do-js/entry.yml

@@ -2,14 +2,14 @@ title: Úvod do JavaScriptu
 lead: Seznámíme se s jazykem JavaScript a ukážeme si, jak se v JavaScriptu píší jednoduché programy.
 sections:
   - javascript
+  - prvni-program
   - hodnoty-operatory
   - funkce
   - cv-vyrazy-funkce
-  - prvni-program
   - promenne
   - vypis-do-stranky
   - promenne-pravidla
   - cv-programy-promenne
   - shrnuti
   - cv-ulozky
-  - cteni-na-doma
+  - cteni-na-doma

js1/uvod-do-js/funkce.md

@@ -2,13 +2,12 @@
 
 Pouze s hodnotami a operátory bychom se v programování daleko nedostali. Často budeme potřeboval vykonat složitější operaci než jen matematický výpočet. Pokud nějakou takovou složitější operaci programátoři používají často, šance je, že pro ni existuje :term{cs="funkce" en="function"}.
 
-Funkce je kousek programu řešící nějakou konkrétní úlohu. Většinou jde o úlohu, kterou řešime často a opakovaně. Příkladem může být například zaokrouhlování desetinných čísel na celá čísla. To je operace, která se hodí skoro ve všech výpočtech, a bylo by zbyteční ji programovat neustále znova. V JavaScriptu proto máme k dispozici funkci jménem `Math.round`.
+Funkce je kousek programu řešící nějakou konkrétní úlohu. Většinou jde o úlohu, kterou řešime často a opakovaně. Příkladem může být například zaokrouhlování desetinných čísel na celá čísla. To je operace, která se hodí skoro ve všech výpočtech, a bylo by zbytečné ji programovat neustále znova. V JavaScriptu proto máme k dispozici funkci jménem `Math.round`.
 
 Pokud chceme nějakou funkci použít, uděláme to tak, že napíšeme její jméno a do kulatých závorek vložíme hodnotu, se kterou má funkce pracovat. Takto například použijeme naši funci `Math.round`.
 
-```jscon
-> Math.round(3.14)
-3
+```js
+document.body.innerHTML += Math.round(3.14);
 ```
 
 Hodnotě uvnitř kulatých závorek říkáme :term{cs="vstup" en="input"} funkce. Spuštění funkce se mezi programátory říká :term{cs="volání" en="call"}. Jakmile funkce dokončí operaci, :term{cs="vrátí" en="return"} nám takzvaný :term{cs="výstup" en="output"}. V programátorském žargonu tedy říkáme, že když **zavoláme** funkci s nějakým **vstupem**, ona nám **vrátí výstup**.
@@ -25,9 +24,8 @@ Můžeme si představovat, že funkce je něco jako stánek s rychlým občerstv
 
 Volání funkce je také výraz, podobně jako operace s hodnotami a proměnnými. Můžeme jej tedy použít uvnitř libovolného jiného výrazu. Navíc vstup pro funkci lze také vytvořit pomocí výrazu. Nabízí se tedy mnoho způsobů, jak skládat složitější výpočty, jako například tento.
 
-```jscon
-> 70 % Math.round(100 / 3)
-4
+```js
+document.body.innerHTML += 70 % Math.round(100 / 3);
 ```
 
 ### Užitečné funkce
@@ -36,35 +34,26 @@ JavaScript obsahuje spousty a spousty funkcí, díky kterým lze provádět mnoh
 
 Pokud bychom místo klasického zaokrouhlování chtěli zaokrouhlovat vždy dolů nebo vždy nahoru, můžeme použít funkce `Math.floor` a `Math.ceil`.
 
-```jscon
-> Math.floor(3.9)
-3
-> Math.ceil(3.1)
-4
+```js
+document.body.innerHTML += Math.floor(3.9);
+```
+
+```js
+document.body.innerHTML += Math.ceil(3.1);
 ```
 
 Jednou z funkcí, se kterými si užijeme více zábavy, je `Math.random`. Ta při každém zavolání vrátí náhodné desetinné číslo mezi 0 a 1.
 
-```jscon
-> Math.random()
-0.5533144240115158
-> Math.random()
-0.30269146855422213
-> Math.random()
-0.8730206392247666
+```js
+document.body.innerHTML += Math.random();
 ```
 
 Všimněte si, že tato funkce nemá žádný vstup. I takové funkce jsou možné a nejsou žádnou velkou výjimkou.
 
 Chytrým použitím zaokrouhlování a trochou matematiky můžeme pomocí `Math.random` generovat náhodná celá čísla například v rozmezí 0 až 9.
 
-```jscon
-> Math.floor(Math.random() * 10)
-8
-> Math.floor(Math.random() * 10)
-2
-> Math.floor(Math.random() * 10)
-5
+```js
+document.body.innerHTML += Math.floor(Math.random() * 10);
 ```
 
 To se nám může hodit pokud programujeme nějakou hru nebo třeba chceme-li vygenerovat náhodná testovací data.