RGB to Hex Color Converter With Javascript

// Get references to the HTML input elements
let hexInput = document.getElementById("hex");
let rgbInput = document.getElementById("rgb");

// Execute when the window has loaded
window.onload = () => {
    // Reset input values on page load
    hexInput.value = "";
    rgbInput.value = "";
}

// Function to set valid state for an input element
function valid(element) {
    element.style.color = "#202040"; // Set text color for valid input
}

// Function to set invalid state for an input element and reset the other element's value
function invalid(element, otherElement) {
    element.style.color = "#f04624"; // Set text color for invalid input
    otherElement.value = 0; // Reset the value of the other element
}

// Function to convert Hex to RGB
function toRgb() {
    let hexCode = hexInput.value;
    let rgbArr = [];

    // Check if the Hex code is valid
    if (/^#?[A-Fa-f0-9]{6}$/.test(hexCode)) {
        valid(hexInput);
        hexCode = hexCode.split("#")[1] || hexCode;

        // Convert each pair of hex digits to decimal and push to the array
        for (let i = 0; i < hexCode.length; i += 2) {
            rgbArr.push(parseInt(hexCode[i] + hexCode[i + 1], 16));
        }

        // Log the RGB array to the console
        console.log(rgbArr);

        // Display the RGB value in the input and change the background color
        rgbInput.value = "rgb(" + rgbArr.join(", ") + ")";
        document.body.style.backgroundColor = "rgb(" + rgbArr.join(", ") + ")";
    } else {
        // Handle invalid Hex input
        invalid(hexInput, rgbInput);
    }
}

// Function to convert RGB to Hex
function toHex() {
    let rgbCode = rgbInput.value;

    // Regular expressions for valid RGB formats
    let rgbRegex1 = /^rgb\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3}\)$/;
    let rgbRegex2 = /^[0-9]{1,3},[0-9]{1,3},[0-9]{1,3}$/;

    // Initial Hex code
    let hex = "#";

    // Check if the RGB code is valid
    if (rgbRegex1.test(rgbCode) || rgbRegex2.test(rgbCode)) {
        rgbCode = rgbCode.replace(/[rgb()]+/g, "") || rgbCode;
        rgbCode = rgbCode.split(",");

        // Check if all RGB values are within the valid range (0-255)
        let condition = rgbCode.every((value) => {
            return parseInt(value) <= 255;
        });

        if (condition) {
            // Handle valid RGB input
            valid(rgbInput);

            // Convert each RGB value to hexadecimal and concatenate
            rgbCode.forEach(value => {
                value = parseInt(value).toString(16);
                hex += value.length == 1 ? "0" + value : value;
            });

            // Set Hex input value and change the background color
            hexInput.value = hex;
            document.body.style.backgroundColor = hex;
        } else {
            // Handle invalid RGB input
            invalid(rgbInput, hexInput);
        }
    } else {
        // Handle invalid RGB input
        invalid(rgbInput, hexInput);
    }
}