Obsah

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

Postup

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"

Řešení

<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="utf-8" />
    <title>Barvy</title>
 
    <style>
    /* Vychozi CSS stylovani prijde sem*/
	body {background-color: rgb(200,200,200);}
 
	body {
		margin:0;
	}
	div#svetlo {
		background-color: rgb(255, 100, 255);
		border: 10px solid black;
		width: 100px;
		height: 100px;
	}
 
    /* */
    </style>
 
    <script>
    /* <![CDATA[ */
    /* Sem prijde javascript kod */
	console.log('test')
 
	function zmenNeco(){
	const red = parseInt(document.getElementById('redValue').value)
	const green = parseInt(document.getElementById('greenValue').value)
	const blue = parseInt(document.getElementById('blueValue').value)
 
	console.log(red+green+blue)
	document.getElementById('svetlo').style.
		backgroundColor=`rgb(${red}, ${green}, ${blue})`
		"rgb(" + red + ", " + green + ", " + blue + ")"
	}
 
    /* ]]> */
    </script>
</head>
 
<body>
<div id="svetlo"></div>
<h2>Barvy</h2>
  <input type="range" min="0" max="255"
  value="50" class="slider" id="redValue"
  oninput="zmenNeco()"
  >
  <input type="range" min="0" max="255"
  value="50" class="slider" id="greenValue"
  oninput="zmenNeco()"
  >
 
  <input type="range" min="0" max="255"
  value="50" class="slider" id="blueValue"
  oninput="zmenNeco()"
  >
 
 
</body>
</html>