VCHS Computer Science: Swatch

Swatch

Red		128
Green		128
Blue		128

Source Code

<style>
  #swatch {
    width: 200px;
    height: 200px;
    display: block;
  }
  table {
  }
  #rgb-range-inputs {
    display: block;
  }
  #rgb-range-inputs td {
    vertical-align: bottom;
  }
</style>

<div id="swatch" style="background-color: rgb(128, 128, 128);"></div>
<table id="rgb-range-inputs">
  <tbody><tr>
    <td>Red</td>
    <td><input id="red" type="range" min="0" max="255" step="1"></td>
    <td><span id="red-value">128</span></td>
  </tr>
  <tr>
    <td>Green</td>
    <td><input id="green" type="range" min="0" max="255" step="1"></td>
    <td><span id="green-value">128</span></td>
  </tr>
  <tr>
    <td>Blue</td>
    <td><input id="blue" type="range" min="0" max="255" step="1"></td>
    <td><span id="blue-value">128</span></td>
  </tr>
</tbody></table>

<script>
  const redInputElement = document.getElementById("red");
  const greenInputElement = document.getElementById("green");
  const blueInputElement = document.getElementById("blue");
  const redValueElement = document.getElementById("red-value");
  const greenValueElement = document.getElementById("green-value");
  const blueValueElement = document.getElementById("blue-value");
  const swatchElement = document.getElementById("swatch");
  redInputElement.addEventListener("change", updateSwatch);
  greenInputElement.addEventListener("change", updateSwatch);
  blueInputElement.addEventListener("change", updateSwatch);
  updateSwatch();
  
  function updateSwatch() {
    const r = redInputElement.value;
    const g = greenInputElement.value;
    const b = blueInputElement.value;
    const rgb = "rgb(" + r + ", " + g + ", " + b + ")";
    redValueElement.innerHTML = r;
    greenValueElement.innerHTML = g;
    blueValueElement.innerHTML = b;
    swatchElement.style.backgroundColor = rgb;
  }  
</script>