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)

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>
 

<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>