More controls + skeleton

form.js

@@ -16,9 +16,12 @@ const onMetricChange = (elements) => {
   elements.mean.disabled = kind !== "mean";
   elements.statistic.disabled = kind !== "statistic";
   elements.sortMetric.value = elements[kind].value;
+
+  sortImages();
+  showResults(selectors.sortControl.resultsToDisplay.value);
 };
 
-const syncColorInputs = (inputValue) => {
+const onColorChange = (inputValue) => {
   console.log(inputValue);
   const colorInput = "#" + (inputValue?.replace("#", "") ?? "FFFFFF");
 
@@ -34,6 +37,22 @@ const syncColorInputs = (inputValue) => {
   const refomatted = rgb.formatHex();
   selectors.sortControl.colorText.value = refomatted;
   selectors.sortControl.colorPicker.value = refomatted;
+
+  scoreImages();
+  sortImages();
+  showResults(selectors.sortControl.resultsToDisplay.value);
+};
+
+const scoreImages = () => {
+  // TODO
+};
+
+const sortImages = () => {
+  // TODO
+};
+
+const showResults = (resultsToDisplay) => {
+  // TODO
 };
 
 window.onload = () => {

index.html

@@ -70,14 +70,30 @@
           name="colorText"
           type="text"
           maxlength="7"
-          oninput="syncColorInputs(event.target.value)"
+          oninput="onColorChange(event.target.value)"
         />
         <input
           name="colorPicker"
           type="color"
-          onchange="syncColorInputs(event.target.value)"
+          onchange="onColorChange(event.target.value)"
         />
       </div>
+      <div>
+        <label>
+          <input
+            name="resultsToDisplay"
+            type="range"
+            min="1"
+            max="100"
+            value="10"
+            oninput="
+              event.target.form.elements.resultsToDisplayOutput.value = event.target.value
+            "
+            onchange="showResults(event.target.value)"
+          />
+          Results:&nbsp;<output name="resultsToDisplayOutput">10</output>
+        </label>
+      </div>
       <div>Color Space</div>
       <div>
         <label>