Add similarity percentage and best score

README.md

@@ -1,3 +1,7 @@
 # Color Guesser
 
-Test your artistic sense and see how well you know your color codes. Enter in a HEX color in the input, and you will be able to see what it is in the box right next to it. Try and see how close you can get your inputted color to the actual color! If you want a different color, you can always refresh or hit "New Color" to try something else.
+Test your artistic sense and see how well you know your color codes. Enter in a HEX color in the input, and you will be able to see what it is in the box right next to it. Try and see how close you can get your inputted color to the actual color! If you want a different color, you can always refresh or hit "New Color" to try something else.
+
+## How this Works
+
+Whenever you input a hexadecimal color, it is converted into an RGB color. This RGB color is then compared to the original color value via the [Euclidean distance](https://en.wikipedia.org/wiki/Color_difference) between the two RGB colors.

index.html

@@ -12,6 +12,7 @@
             <h1>Guess the Color!</h1>
             <h4>How colorful are you...</h4>
         </div>
+        <div id="best"></div>
 
         <!--Don't be a cheater!-->
 
@@ -23,7 +24,8 @@ <h2 id="pound">#</h2>
             <div id="color-preview"></div>
             <button class="btn" id="submit">Submit</button>
         </div>
-
+        <br>
+        <div id="comparison"></div>
         <div id="reset">
             <button class="btn" id="reset-btn">New Color</button>
         </div>

index.js

@@ -1,6 +1,7 @@
 window.onload = () => {
-    const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
+    var randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
     document.documentElement.style.setProperty('--main-bg-color', randomColor);
+    var bestPercentage = 0;
 
     const colorBox = document.getElementById("color-box");
     if (colorBox) {
@@ -26,7 +27,93 @@ window.onload = () => {
 
     document.getElementById('reset-btn').addEventListener('click', function () {
         // Generate a random hex color
-        const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
+        randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0');
+        document.getElementById('comparison').innerHTML = "";
         document.documentElement.style.setProperty('--main-bg-color', randomColor);
+        document.getElementById('submit').disabled = false;
+        document.getElementById('code').value = "";
+        document.getElementById('color-preview').style.backgroundColor = "white";
     })
+
+    document.getElementById('submit').addEventListener('click', function () {
+
+        var userInput = document.getElementById('code').value.trim(); // Get input and remove spaces
+        var userColor = hexToRgb(userInput);
+        var actualColor = hexToRgb(randomColor);
+        const hexPattern = /^[0-9a-fA-F]{6}$/; // Regex for 6-character hex code
+
+        this.disabled = true;
+
+        if (hexPattern.test(userInput)) {
+            const colorInput = document.getElementById('code').value.trim();
+            const description = document.createElement("div");
+            description.id = "description";
+            const textNode = document.createTextNode("Your color was ");
+            description.appendChild(textNode);
+
+
+            const similarity = calculateSimilarityPercentage(userColor, actualColor);
+            if (similarity > bestPercentage) {
+                bestPercentage = similarity;
+            } else if (similarity == 100) {
+                bestPercentage = 100.00;
+            }
+            const similarityText = document.createTextNode(`${similarity}` + "% close to the actual color, " + `${randomColor}`);
+            const similarityNum = document.createTextNode("Best: " + `${bestPercentage}` + "%");
+
+            // Create a new anchor (<a>) element
+            const link = document.createElement("a");
+
+            link.href = "https://en.wikipedia.org/wiki/Color_difference";
+            link.textContent = "How this is calculated";  // Link text
+            link.target = "_blank";
+
+
+            description.appendChild(document.createElement("h1").appendChild(similarityText));
+            if (similarity == 100) {
+                description.appendChild(document.createElement("br"));
+                description.appendChild(document.createElement("h1").appendChild(document.createTextNode("Nice job! Makes me wonder if you cheated...🧐")));
+            }
+            description.appendChild(document.createElement("br"));
+            description.appendChild(document.createElement("br"));
+            description.appendChild(link);
+            document.getElementById("comparison").appendChild(description);
+            document.getElementById("best").innerHTML = "";
+            document.getElementById("best").appendChild(similarityNum);
+        } else {
+            // Input is invalid
+            alert("Invalid hex code. Please enter 6 hexadecimal characters.");
+        }
+
+    })
+
+
+    // Convert hex color to RGB
+    function hexToRgb(hex) {
+        // Remove '#' if it exists
+        hex = hex.replace('#', '');
+        // Convert to RGB
+        const bigint = parseInt(hex, 16);
+        const r = (bigint >> 16) & 255;
+        const g = (bigint >> 8) & 255;
+        const b = bigint & 255;
+        return { r, g, b };
+    }
+
+    // Calculate the Euclidean distance between two RGB colors
+    function calculateColorDistance(color1, color2) {
+        return Math.sqrt(
+            Math.pow(color2.r - color1.r, 2) +
+            Math.pow(color2.g - color1.g, 2) +
+            Math.pow(color2.b - color1.b, 2)
+        );
+    }
+
+    // Calculate the similarity percentage
+    function calculateSimilarityPercentage(inputColor, actualColor) {
+        const maxDistance = Math.sqrt(255 * 255 + 255 * 255 + 255 * 255); // Maximum distance in RGB space
+        const distance = calculateColorDistance(inputColor, actualColor);
+        const similarity = (1 - distance / maxDistance) * 100;
+        return similarity.toFixed(2); // Limit to 2 decimal places
+    }
 };

style.css

@@ -23,6 +23,12 @@ h4 {
     margin-top: 0;
 }
 
+#description {
+    font-weight: 100;
+    text-align: center;
+    margin-top: 5;
+}
+
 #color {
     background-color: var(--main-bg-color);
     width: 100px;
@@ -34,6 +40,16 @@ h4 {
     filter: drop-shadow(1px 1px 1px black);
 }
 
+#selected-color {
+    width: 100px;
+    height: 100px;
+    margin-right: auto;
+    margin-left: auto;
+    border-radius: 50%;
+    /* border: 1px solid black; */
+    filter: drop-shadow(1px 1px 1px black);
+}
+
 .input-area {
     display: flex;
     justify-content: center;
@@ -78,7 +94,7 @@ input[type="text"]::placeholder {
 #reset {
     display: flex;
     justify-content: center;
-    margin-top: 200px;
+    margin-top: 100px;
     height: 40px;
     border: none;
 }
@@ -118,4 +134,11 @@ input[type="text"]::placeholder {
     height: 50px;
     border: 1px solid #ccc; /* Optional: border for visibility */
     border-radius: 5px; /* Rounded corners for aesthetics */
+}
+
+#best {
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+    display: flex;
+    justify-content: center;
 }