Pessoal, tudo bem , alguém poderia me ajudar urgente, tenho uma trabalho para terça e estou totalmente perdido, o trabalho é este.
Construa, utilizando HTML, CSS e JavaScript puro, uma aplicação para a visualização de cores a partir da escala RGB.
- você cria 3 input do tipo range
- 3 input normal desabilitada que vai mostrar o valor quando mexe o input range
- uma div que mostra a cor, definir a cor da div, utilize style.backgroundColor, O valor deve ser uma string que, por sua vez, interpola a função rgb() do CSS.
eu fiz a parte HTML e consegui selecionar os inputs com querySelector, porem ele me mostra 0 e não sei atualizar o valor quando a pessoa muda o input. E estou pedido como fazer tudo.
Pessoal eu tentei fazer uma função , mas aprendi com onclick, como seria chamado esse evento do input range, para eu recuperar o valor dele quando mexer a barra.
Vou postar o que consegui fazer primeiro o HTML e depois o JavaScript
<body>
<h1>RGB</h1>
<form action="/action_page.php">
<label for="vol">(R) Red:</label>
<input type="range" id="red" name="red" min="0" max="255" step="10" value ="0">
<input type="text" id="textRed" name="textRed" value="0" readonly disabled><br>
<label for="vol">(G) Green:</label>
<input type="range" id="green" name="green" min="0" max="255" step="10" value ="0">
<input type="text" id="textGreen" name="textGreen" value="0" readonly disabled><br>
<label for="vol">(B) Blue:</label>
<input type="range" id="blue" name="blue" min="0" max="255" step="10" value ="0">
<input type="text" id="textBlue" name="textBlue" value="0" readonly disabled><br>
</form>
<div class="cor">
</div>
<script src="index.js"></script>
</body>var red = document.querySelector("#red").value;
console.log(red);
var green = document.querySelector("#green").value;
console.log(red);
var blue = document.querySelector("#blue").value;
console.log(red);
var textRed = document.querySelector("#textRed").value;
console.log(red);
var textGreen = document.querySelector("#textGreen").value;
console.log(red);
var textBlue = document.querySelector("#textBlue").value;
console.log(red);
var div = document.querySelector(".cor");
div.style.backgroundColor = "black";
