Toto je starší verze dokumentu!
Výběr barvy
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">
Postupné úkoly:
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"