rgb(255,0,255) respektive #ff00ff Cíl: mít tři slidery reprezentující červenou, zelenou a modrou složku barvy. Při změně (libovolné r g b hodnoty) chci výslednou barvu zobrazit uživateli.

  <input type="range" min="0" max="255" value="50" class="slider" id="redValue">
  <input type="range" min="0" max="255" value="50" class="slider" id="greenValue">
  <input type="range" min="0" max="255" value="50" class="slider" id="blueValue">

1) ze šablony vytvoř stránku, na které bude <div id="color"></div> - ten nebude vidět

2) zobraz ten div jako čtverec ve stránce, třeba s použitím následujícího css: #color {width:100px; height:100px; background-color: rgb(255,0,0)}

3) nastav divu background-color pomocí javascriptu. Pozor, pomlčka se mění na camelCase:

document.getElementById('color').style.backgroundColor='rgb(0,255,0)'

4) vytvoř funkci zmenBarvu() do které dej kód co mění barvu divu - z předchozího bodu

5) změnu barvy navaž na stisknutí tlačítka <button onclick="zmenBarvu()">

6) uvniř funkce zmenBarvu vytvoř tři proměnné obsahující číslo a jejich hodnoty pošli do řetězce specifikujícího barvu:

 const red = 120
 const green = 200
 const blue = 0
 document.getElementById('color').style.backgroundColor=`rgb(${red},${green},${blue})`

(s použitím Šablon hodnot )

7) do html vlož 3 inputy, nazvi je red, green, blue - uživatel tam bude psát čísla, tak můžeš použít <input type="number" id="red">

8) uvnitř svojí funkce zmenBarvu() hodnoty red, green a blue načti z hodnot příslušných inputů:

 const red = parseInt(document.getElementById('red').value)

9) přidej kód, který při změně hodnoty inputu zavolá funkci zmenBarvu (<input type="number" id="red" oninput="zmenBarvu()">)

10) Změň vstupy z type="number" na type="range" a přidej atributy min="0" max="255"