How To Create Color Generator in HTML CSS and JavaScript

				
					let body = document.querySelector("body");
let button = document.querySelector("#btn");
let container = document.querySelector(".container");
let lightbox = document.querySelector("#lightbox")
let cancel = document.querySelector("#cancel")


//create DIV 
let createDiv=(e)=>{
    let div =  document.createElement(e);   
    return div
}
//Random Number  

let Numbgenrate=()=>{
    return Math.floor(Math.random() * 255)
}
//Returns a Number Which is Red Color   

let getRed=()=>{
    let red = Numbgenrate();
    return red
}
//Returns a Number Which is Blue Color   
let getBlue=()=>{
    let Blue = Numbgenrate();
    return Blue
}
//Returns a Number Which is Green Color   
let getGreen=()=>{
    let Green = Numbgenrate();
    return Green
}
let gethaxred=()=>{
    let haxred = getRed().toString(16);
    return haxred
}
let gethaxgreen=()=>{
    let haxgreen = getGreen().toString(16);
    return haxgreen
}
let gethaxblue=()=>{
    let haxblue = getBlue().toString(16);
    return haxblue
}

let RGBcolor=()=>{
   return `${getRed()},${getBlue()},${getGreen()}`
}
let Hexacolor=()=>{
   return `#${gethaxred()}${gethaxgreen()}${gethaxblue()}`
}

// View color code 
let lgbox = document.querySelector("#lgbox");

function colorbox(a, text2) {
    lgbox.innerHTML = "";
    
    lightbox.classList.toggle("showlightbox");

    // Create RGB color box
    let rgbcolor = createDiv("div");
    rgbcolor.classList.add("colorbox-color");
    
    let titlergb = createDiv("h3");
    titlergb.innerHTML = "RGB format :";

    let textrgb = createDiv("p");
    textrgb.innerText = `rgb(${a})`;
    
    rgbcolor.append(titlergb);
    rgbcolor.append(textrgb);
    
    lgbox.append(rgbcolor);

    // Create HEX color box
    let hexcolor =createDiv("div");
    hexcolor.classList.add("colorbox-color");
    
    let titlehex = createDiv("h3");
    titlehex.innerHTML = "HEX format :";

    let texthex =createDiv("p");
    texthex.innerHTML = text2; 
    
    
    hexcolor.append(titlehex);
    hexcolor.append(texthex);
    
    lgbox.append(hexcolor);
}

// shades code--------------------------------
function shades(a) {
    lgbox.innerHTML=""
    lightbox.classList.toggle("showlightbox")
    for (i = 1; i <= 9; i++) {

        let shade = document.createElement("div");
        shade.classList.add("lgshade")
        shade.style.backgroundColor = `rgba(${a},0.${i})`

        let text3 = document.createElement("p")
        shade.append(text3)
        text3.innerHTML = `rgba(${a},0.${i})`

        lgbox.append(shade)
        shade.addEventListener("click", function () {
            // alert(text3.innerHTML)
            navigator.clipboard.writeText(text3.innerHTML);
            showToast(`${text3.innerHTML} code copied!`);
        })

    }
}

// Main Function Which Is Execute 
function colorpelette() {
    container.innerHTML = "";
    for (i = 1; i <= 5; i++) {
        let box = createDiv("div");
        let iconbox = createDiv("div");
        let icon = createDiv("i");
        let icon2 =createDiv("i");
        let icon3 =  createDiv("i");

        iconbox.classList.add("iconbox");

        icon.classList.add("fa-solid", "fa-border-all");
        icon.setAttribute('title', 'View Shades');
        iconbox.append(icon)

        icon2.classList.add("fa-solid", "fa-copy");
        icon2.setAttribute('title', 'Copy HEX Code');
        iconbox.append(icon2)

        icon3.classList.add("fa-solid", "fa-eye");
        icon3.setAttribute('title', 'Color Codes');
        iconbox.append(icon3)

        icon.addEventListener("click", function () {
            shades(text1.innerHTML)
        })

        icon3.addEventListener("click", function () {
            colorbox(text1.innerHTML,text2.innerHTML)
        })

        icon2.addEventListener("click", function () {
            navigator.clipboard.writeText(text2.innerHTML);
            showToast(`${text2.innerHTML} code copied!`);
        })


        let text1 =  createDiv("h2");
        let text2 =  createDiv("h2");
        box.appendChild(text1)
        box.appendChild(text2)

        box.append(iconbox)
        container.appendChild(box);

        //RGB genrate here
        let color = RGBcolor();
        let bgcolor = `rgb(${color})`;
        text1.innerHTML = color;
        box.classList.add("box");
        box.style.backgroundColor = bgcolor;

        //HEXA Code genrate here
        let colorhax = Hexacolor();
        let colorhaxup = colorhax.toUpperCase();
        text1.style.display="none"
        text2.innerHTML = colorhaxup;


        // if Backgorundcolor dark, Text Color Become white  
        if (getRed() < 50) {
            if (getGreen() < 50) {
                text2.style.color = "white";
                iconbox.style.color = "white";
            }
            else {
                if (getBlue() < 50) {
                    text2.style.color = "white";
                    iconbox.style.color = "white";
                }
            }
        }
        else{
            if (getGreen() < 50) {
                text2.style.color = "white";
                iconbox.style.color = "white";
            }
            else {
                if (getBlue() < 50) {
                    text2.style.color = "white";
                    iconbox.style.color = "white";
                }
            }

        }

        cancel.addEventListener("click",function(){
            lightbox.classList.toggle("showlightbox")
        })
    }
}

function showToast(message) {
    Toastify({
        text: message,
        duration: 2000,  // Duration in milliseconds
        close: true,    // Whether to add a close button
        gravity: "top", // toast position (e.g., "top-right", "top-center", "top-left", etc.)
        position: 'right',
        backgroundColor: "linear-gradient(to right, lightgreen, green)", // Set your desired background color
    }).showToast();
}

// onload window
window.onload(colorpelette())