===== Úloha: Přebarvování textu =====

=== Zadání ===
Vytvoř jednoduchou html stránku s odstavcem textu. Pokud se ti nechce nic psát, můžeš použít [[https://www.lipsum.com/|lorem ipsum generátor]]. Nastav textu jiný než defaultní font (např. ''%%font-family:Arial%%''), tučnost (''%%font-weight%%''), odstup písmenek (''%%letter-spacing%%''), odstupy řádků (''%%line-height%%''), a případně další vlastnosti. Použij [[https://www.jakpsatweb.cz/css/ jakpsatweb.cz/css]] pro referenci.

Textu nastav nějakou výchozí barvu. Dej do stránky tlačítko (nebo odkaz), po jehož zmáčknutí:
  - se změní barva textu na nějakou pevně zadanou (např. ''%%red%%'')
  - se změní barva textu na jednu **náhodnou** z nějakého seznamu barev v kódu (např. ''%%red%%'',''%%green%%'',''%%blue%%'')
  - se změní barva textu na následující ze seznamu barev v kódu - tedy když je text červený, změní se vždy na zelený, když je zelený, změní se vždy na modrý, když je modrý, změní se zas na červený
  - se změní barva na zcela náhodnou (vygenerují se tři čísla 0-255 - hodnoty RGB)


=== Nápovědy ===
 == Navázání akce ==
 [[https://www.w3schools.com/jsref/event_onclick.asp|Událost onlick]]:
Buď v HTML:
<code html>
 <script>
 /* Definice funkce, ktera bude pote prirazena k onclick */
 function zmacknuto(){
  console.log("Zmacknul jsem to!");
  }
 </script>

 <button onclick="zmacknuto()">Ťuk</button>
</code>  
Nebo přiřazení v javascriptu:
 <code html>

 <button id="tlacitko">Ťuk</button>

 <script>
 /* Definice funkce, ktera bude pote prirazena k onclick */
 function zmacknuto(){
  console.log("Zmacknul jsem to!");
  }
  
  /* Prirazeni k onclick */
  document.getElementById('tlacitko').onclick = function(){
  console.log("Zmacknuto tlacitko!");
  };
 </script>
 </code>

 == Změna vzhledu v javascriptu ==
<code html>

 <p id="odstavec">Ťuk</p>

 <script>
 /* Nejprve si najdeme v dokumentu element(prvek), ktery chceme ovlivnit */
 var prvek = document.getElementById('odstavec')

 /* Muzeme zmenit jeho barvu, css atribut color */
 prvek.style.color="yellow";

 /*
  CSS vlastnosti s pomlčkou se v javascriptu mění na camelCase
  např. background-color se mění na backgroundColor 
 */
 prvek.style.backgroundColor="black";

  
 </script>
</code>

 == Vyjádření barev ==
 [[https://www.jakpsatweb.cz/barvy-zapis.html|Různé zápisy barev]]:
  * [[https://www.jakpsatweb.cz/archiv/barvy-pojmenovane.html|pojmenování]] (pouze některé): ''%%Aquamarine%%''
  * v šestnáctkové soustavě (tři dvojciferná čísla): ''%%#7fffd4%%''
  * v desítkové soustavě (tři čísla 0-255 oddělená čárkami)" ''%%rgb(127,255,212)%%''
 [[https://www.webtoolkitonline.com/hexadecimal-decimal-color-converter.html|Převod mezi šetnáctkovým a desítkovým zápisem]] dokážeš spočítat i ručně, zkus si to!


 == Náhodné číslo ==
 V javascriptu volání funkce ''%%Math.random()%%'' vrací desetinné číslo mezi nulou(včetně) a jedničkou(nevčetně). Vyzkoušej si napsat //Math.random()// do konzole!

My ale potřebujeme - pro zápis v desítkovém formátu //rgb(127,255,212)// číslo bez desetinné čárky - a z rozsahu 0-255, ne 0-1
  * Jak "zvětšit" rozsah? Vynásobením.
  * Jak se zbavit desetinné části? Zaokrouhlením ''%%Math.round(15.3541)%%''

 == Spojování řetězců (string) ==
Do CSS vlastnosti odstavce chceme vložit například //rgb(127,255,212)//. Z hlediska javascriptu jde o string (řetězec písmenek). Pokud jej víme napevno dopředu, je to snadné - stačí použít úvozovky kolem:
<code javascript>
document.getElementById("odstavec").style.color="rgb(127,255,212)"
</code>
Co když ale do řetězce potřebujeme vložit nějaké číslo, které nám vznikne přímo ve programu/uživatelský vstup?
<code javascript>
var cislo=124; /* Promenna cislo - nejak jsme ho vypocitali, zjistili od uzivatele, vygenerovali... */

document.getElementById("odstavec").style.color="rgb("+ cislo +",255,212)"
</code>
  * Zde generujeme pouze červenou složku barvy, ty poté budeš generovat všechny tři čísla.
  * Ukončím řetězec ''%%"rgb("%%'' (úvozovkou) a zprava k němu připojím (operátor ''%%+%%'' ) obsah proměnné nazvané //cislo//. K výsledku ještě zprava připojuji zbytek řetězce ''%%",255,212)"%%'' - výsledkem tak bude validní zápis rgb barvy.
  * Neztrať se v úvozovkách :-)