RGB Color Slider w Master Array

by pleonardmusic1664

HTML

<!DOCTYPE html>
<html>

<body>
<h1>Color Harmony</h1>
<span>by Peter Leonard</span>
<div class="row">
  <div id="COLOR1" class="column">
    <h2>Color 1</h2>
  </div>
  
  <div id="COLOR2" class="column">
    <h2>Color 2</h2>
  </div>
  
  <div id="COLOR3" class="column">
    <h2>Color 3</h2>
  </div>
  
  <div id="COLOR4" class="column">
    <h2>Color 4</h2>
  </div>
  
  <div id="COLOR5" class="column">
    <h2>Color 5</h2>
  </div>

  <div id="COLOR6" class="column">
    <h2>Color 6</h2>
  </div>
  
  <div id="COLOR7" class="column">
    <h2>Color 7</h2>
  </div>
  
  <div id="COLOR8" class="column">
    <h2>Color 8</h2>
  </div>  

</div><!-- END div class=row -->

<p><strong>Number of Colors to harmonize with Color 1: </strong><input type="number" id="colorsDivInput" name="quantity" min="1" max="8" value="1"></p>

<span><strong><i>Adjust the slider to move across the color wheel.</i></strong></span>
<div class="slidecontainer">
  <input onchange="changeColor(myRange)" type="range" min="0" max="1535" value="0" class="slider" id="myRange">

</div>

<span><button onclick="reset()"><h2>RESET</h2></button></span> Click to make all boxes white.

  <p>Slider Position: <span id="sliderValue"></span></p>
  
<p id="demo"></p>

</body>
</html>

CSS

body {
  font-family: Optima, sans-serif;
  font-size: 18px;
  }

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

#COLOR1, #COLOR2, #COLOR3, #COLOR4, #COLOR5, #COLOR6, #COLOR7, #COLOR8  {
  width: 120px;
  height: 120px;
  /*background-color: red;*/
  color: black;
  border: 1px solid black;
}

.column {
  float: left;
  padding: 0px;
  /*height: 200px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

JavaScript

let text = "";
var r1 = [];
var r2 = [];
var r3 = [];
var r4 = [];
var r5 = [];
var r6 = [];
var g1 = [];
var g2 = [];
var g3 = [];
var g4 = [];
var g5 = [];
var g6 = [];
var b1 = [];
var b2 = [];
var b3 = [];
var b4 = [];
var b5 = [];
var b6 = [];


for (let i = 0; i < 256; i++) {
  r1[i] = 255;
  r2[i] = 255 - i;
  r3[i] = 0;
  r4[i] = 0;
  r5[i] = i;
  r6[i] = 255;
  
  g1[i] = 0;
  g2[i] = 0;
  g3[i] = i;
  g4[i] = 255;
  g5[i] = 255;
  g6[i] = 255 - i;
  
  b1[i] = i;
  b2[i] = 255;
  b3[i] = 255;  
  b4[i] = 255 - i;
  b5[i] = 0;
  b6[i] = 0;    
}

var redArray = r1.concat(r2,r3,r4,r5,r6);
var greenArray = g1.concat(g2,g3,g4,g5,g6);
var blueArray = b1.concat(b2,b3,b4,b5,b6);

let rgbArray = [];
let rgbTextArray = "";

for (let i = 0; i < 1536; i++) {
	rgbArray[i] = [redArray[i],greenArray[i],blueArray[i]]
    rgbTextArray+= rgbArray[i] + "<br>";
}

//document.getElementById("demo").innerHTML = rgbTextArray;//rgbArray;
//rgbArray;

function changeColor(myRange) {
var divisionsInput = document.getElementById("colorsDivInput").value;
var selectedColor = 1500;

var divisions = divisionsInput;

var quotient = Math.round(1536 / divisions);
var myRangeNum = parseInt(myRange);
  document.getElementById("COLOR1").style.backgroundColor = "rgb(" + rgbArray[myRangeNum] + ")";


for (let i = 0; i < divisions; i++) {
		document.getElementById("COLOR" + (i+1)).style.backgroundColor = "rgb(" + rgbArray[(myRangeNum+ (i*quotient) ) % 1536] + ")";
    
}// ^ end for loop to set color of active boxes

      
      document.getElementById("demo").innerHTML = "RGB Value = " + rgbArray[myRange] + "<br>Quotient: " + quotient;
  document.getElementById("sliderValue").innerHTML = myRange; 

}//END function changeColor

function reset() {
var divisionsInput = document.getElementById("colorsDivInput").value;
var divisions = divisionsInput;
for (let i = 0; i < 8; i++) {
		document.getElementById("COLOR" + (i+1)).style.backgroundColor = "white";
    }//end for loop
}//END function...