Background now changes on transition with colourpicker

css/styles.css

@@ -57,7 +57,7 @@ body {
   height: 100%;
   z-index: -1;
   opacity: 0;
-  transition: opacity 1s ease-in-out;
+  transition: opacity 1s;
 }
 
 h1 {
@@ -90,6 +90,10 @@ h1 {
   right: 0;
   margin: 10px;
   align-items: center;
+
+  padding: 10px;
+  background-color: #ffffff50;
+  border-radius: 10px;
 }
 
 #colorSelector input {

index.html

@@ -13,8 +13,8 @@
         <div id="background-transition"></div>
         <h1 id="titleBanner" class="black">Tom Cornes</h1>
         <div id="colorSelector">
-          <label for="bgColor">Background Color:</label>
+          <label for="bgColour">Background Color:</label>
-          <input id="bgColor" type="color" value="#ffffff">
+          <input id="bgColour" type="color" value="#ffffff">
         </div>
       </div>
     </main>

js/scripts.js

@@ -18,19 +18,92 @@ function changeBackground(R, G, B) {
         [60, 90, 20]
     ]
     
+    let closestDistance = 500;
+    let closest = 0;
+
+    for (let i = 0; i < colours.length; i++) {
+        distance = Math.abs(R - colours[i][0]) + 
+                   Math.abs(G - colours[i][1]) + 
+                   Math.abs(B - colours[i][2]);
+
+        if (distance < closestDistance) {
+            closestDistance = distance;
+            closest = i;
         }
+    }
+
+    switch (closest) {
+        case 0:
+            transitionFog();
+            break;
+        case 1:
+            transitionSunset();
+            break;
+        case 2:
+            transitionSunsetPurple();
+            break;
+        case 3:
+            transitionSunsetYellow();
+            break;
+        case 4:
+            transitionRoadOrange();
+            break;
+        case 5:
+            transitionRoadRed();
+            break;
+        case 6:
+            transitionClouds();
+            break;
+        case 7:
+            transitionForest();
+            break;
+        case 8:
+            transitionAvenue();
+            break;
+        case 9:
+            transitionMountain();
+            break;
+        case 10:
+            transitionGalaxy();
+            break;
+        case 11:
+            transitionThunderstorm();
+            break;
+        case 12:
+            transitionAurora();
+            break;
+        case 13:
+            transitionLake();
+            break;
+        default:
+            transitionFog();
+            break;
+    }
+}
+
+bgColour.addEventListener("input", () => {
+    const R = parseInt(bgColour.value.substring(1, 3), 16);
+    const G = parseInt(bgColour.value.substring(3, 5), 16);
+    const B = parseInt(bgColour.value.substring(5, 7), 16);
+    changeBackground(R, G, B);
+});
 
 function transitionBackground(newUrl, blackwhite) {
     const background = document.getElementById("background");
     const transitionLayer = document.getElementById("background-transition");
     const title = document.getElementById("titleBanner");
 
+    transitionLayer.removeEventListener("transitionend", () => {});
+
     title.className = blackwhite;
 
     transitionLayer.style.background = `url(${newUrl}) 50% 50% / cover`;
     transitionLayer.style.display = "block";
     transitionLayer.style.opacity = "0";
 
+    setTimeout(() => {
+        transitionLayer.style.opacity = '0'; 
+    }, 10);
     setTimeout(() => {
         transitionLayer.style.opacity = '1'; 
     }, 10);