Zadání:
Vygenerujte sadu náhodných čísel od 1 do 10, která vykreslíte s náhodnými styly.
Řešení využívá pokročilejší koncept - funkci!
Prvně vždy vytvoříme HTML div, kterému dáme id. Do divu budeme později vypisovat výstup.
JavaScriptový kód vždy začínáme otevíracím tagem scriptu(<script>), ukončujeme ho uzavíracím tagem scriptu
(</script>).
Prvně vytvoříme funkci nahoda, které dáme atributy minimum a maximum. Do funkce potom dáme náhodný generátor, který bude pracovat s těmtito zatím neurčenými čísly (minimum,
maximum).
Dále pak vytvoříme proměnnou zprava, do které vložíme prázdné uvozovky.
Vytvoříme cyklus FOR(). Cyklus nastavíme od jedničky a jeho počet opakování na 500.
V cyklu vygenerujeme náhodné číslo pomocí funkce nahoda, která umí generovat náhodné číslo mezi čísly v závorce. Vytváříme HTML element <span> s tímto číslem.
V CSS stylování tohoto čísla znovu použijeme funkci nahoda pro náhodnou velikost, pozici, průhlednost a rotaci čísla.
Toto vložíme do zprava.
Nakonec zprávu vložíme do HTML divu.
<div id="generator"></div>
<script>
function nahoda(minimum, maximum){
let nahodnecislo = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
return nahodnecislo;
}
let zprava = "";
for (let i = 1; i <= 500; i++){
zprava += `<span style=\"
position: absolute; top: ` + nahoda(0,100) + "%; left: " + nahoda(0,100) + `%;
font-size: ` + nahoda(10,70) + `px;
color: rgba(107,6,15,` + 1/nahoda(1,10) + `);
rotate: `+ nahoda(0,360) + `deg;
\">` + nahoda(0,9) + `</span>`;
}
document.getElementById("generator").innerHTML = zprava;
</script>