Ú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 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í:

  1. se změní barva textu na nějakou pevně zadanou (např. red)
  2. se změní barva textu na jednu náhodnou z nějakého seznamu barev v kódu (např. red,green,blue)
  3. 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ý
  4. se změní barva na zcela náhodnou (vygenerují se tři čísla 0-255 - hodnoty RGB)

Nápovědy

Událost onlick: Buď v HTML: 

 <script>
 /* Definice funkce, ktera bude pote prirazena k onclick */
 function zmacknuto(){
  console.log("Zmacknul jsem to!");
  }
 </script>
 
 <button onclick="zmacknuto()">Ťuk</button>

Nebo přiřazení v javascriptu: 

 <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>
 
Změna vzhledu v javascriptu
 <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>
Vyjádření barev

Různé zápisy barev:

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

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: 

document.getElementById("odstavec").style.color="rgb(127,255,212)"

Co když ale do řetězce potřebujeme vložit nějaké číslo, které nám vznikne přímo ve programu/uživatelský vstup? 

var cislo=124; /* Promenna cislo - nejak jsme ho vypocitali, zjistili od uzivatele, vygenerovali... */
 
document.getElementById("odstavec").style.color="rgb("+ cislo +",255,212)"