Generador de Colores para Web

Transcripción

Se estarán preguntando Cómo poder crear un generador de colores para web. Pues aquí se los voy a presentar. Lo primero que vamos a realizar es la parte html. Para el código vamos a crear una tarjeta con un botón que cuál va a permitir que generaremos varios contenidos. Todos los colores van a estar generados usando JavaScript.

Crear el generador de colores para web

Vamos a crear el html, Para esto, vamos a vincular el estilo que ya lo tengo realizado vamos a agregar un fichero de JavaScript y en él es donde vamos a comenzar a crear ya todo el contenido. Aquí esta el HTML, compuesto por una section que incluirá una cabecera, un contenedor con la acción de generar los colores (botón), y un contenedor en donde se generaran las cajas de colores.

<section>
    <header>
        <h1>Generator de colores para web</h1>
    </header>
    <div class="actions">    
        <button>Generate</button>
        </div>
    <div class="contentBox" id="contentBox">
    <!-- Ejemplo de Patron HTML a Crear AQUI
     -->
    </div>
</section>

generador de colores para web html page — Agrega el estilo debajo para obtener este resultado.

Agregar el CSS al generador

Aquí esta el estilo para el generador de colores para web, incluyendo la parte que se le sera asignada las cajas de colores usando JavaScript.

*{margin:0;padding: 0;box-sizing: border-box;}
body{width: 100%;justify-content: center;align-items: center;}
section{max-height: 100%;height:100%;display:block;width:100%;margin:15px auto;padding:5px;}
header{text-align: center;display:block;margin:15px auto;}
.contentBox{width: 100%;height: 17vh;display: flex; flex-wrap: wrap; justify-content: space-evenly;align-items: center;margin: auto;position: relative;}
.contentBox .cpalert{position: absolute;top: 0;width: 100%;}
.contentBox .colorBox {width:48%;height: 100%;justify-content: space-between;align-items: center;position:relative; margin:2px;transition: all .5s;}
.contentBox .colorBox:hover{transform: scale(1.05);box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.3);}
.contentBox .colorBox .color{width:100%;height: 100%;background-color: aqua;}
.contentBox .colorBox .code{width:auto;position: absolute; left:50%; top: 50%;transform: translate(-50%, -50%); font-weight: 700;font-size: 26px;background-color: #ffffff66;padding:5px 15px; border-radius: 5px;color: #111;}
.actions {width: 100%;height: 10%;display: grid;justify-content: center;align-items: center;}
.actions p{box-shadow: 0 10 25px -10px rgba(0, 0, 0, 0.3);padding: 12px 60px;background-color: #212121;border-radius: 10px;font-size: 1.2rem;color: #fff;margin: 0 25px;}
.actions button{box-shadow: 0 10 25px -10px rgba(0, 0, 0, 0.3);padding: 12px 60px;background-color: #212121;border-radius: 10px;font-size: 1.2rem;color: #fff;margin: 15px;border:none;outline: none;transition: 0.3s;}
.actions button:hover {background-color: skyblue;color:#212121;cursor: pointer;}

.ani{animation: show 1s forwards;}
@keyframes show{
    0%{opacity: 0;}
    25%{opacity: 1;}
    75%{opacity: 1;}
    100%{opacity: 0;}
}

Generar colores JavaScript

Variables

Lo primero que vamos a realizar es crear las variables que vamos a necesitar, tanto la del botón como otras que voy a utilizar para generar el contenido.

var button = document.querySelector('button'),
    contBox = document.getElementById('contentBox'),
    boxNumber = 4;

Accion onclick

En nuestro siguiente paso, vamos a agregar un «listener» al botón. En este caso le vamos a agregar la acción de clic para cuando le demos click al botón se ejecute una función la cual vamos a generar. Para esto, voy a estar llamando a una función que es la que se va a encargar de generar los colores.

button.onclick = () => {
   alert("Hola");
};

Funcion randomColor()

Vamos a empezar utilizando la parte de que va a generar el código Random y vamos a crear una función para ello.Esta funcion nos va a permitir retornar un color aleatorio en código hexadecimal. Vamos a estar haciendo un Math.floor con la información que necesito que es un Math.random que me permite generar un código aleatorio hexadecimal.

function randomColor(){
    return ('#' + Math.floor(Math.random()*16777215).toString(16));
}

Funcion addCont()

La siguiente función es agregar el contenido. Este contenido va a ser no más que el contenido de la caja, todo lo que va dentro. En este caso, es toda la información que vamos a poner adentro.

Lo primero es crear un for loop que me va a permitir interactuar entre la cantidad de números que tengo, que es la variable que voy a estar utilizando para poder definir qué cantidad de cajitas con colores deseo. En mi caso, la tengo configurada en tres. Lo que vamos a hacer es que vamos a hacer un conteo con esta variable y por cada número vamos a estar creando toda la caja. Vamos a crear ahora básicamente todo el contenido que estaba dentro de la caja.

...




function addCont(){
    for(let i=0;i<boxNumber;i++){

        var colorBox = document.createElement('div'),
            colorbg = document.createElement('div'),
            boxcpAlert = document.createElement('p'),
            codetxt = document.createElement('p');

        colorBox.classList.add('colorBox'); 
        boxcpAlert.classList.add('cpalert'); 
        colorBox.appendChild(boxcpAlert); 
        colorbg.classList.add('color'); 
        colorbg.style.backgroundColor = randomColor(); 
        colorBox.appendChild(colorbg); 
        codetxt.classList.add('code'); 
        codetxt.innerHTML = randomColor(); 
        colorBox.appendChild(codetxt); 
        contBox.appendChild(colorBox); 
    }
}
...

Explicando la function de arriba, ya tenemos las variables que necesito. Ahora vamos a empezar a crear el contenido. El colorBox que es el primero le vamos a agregar un estilo que ya lo tengo creado en la zona en el fichero de estilos y vamos a agregar la alerta. Le vamos a agregar una lista, así como le vamos a dar la opción de agregarla una vez. Vamos a estar agregando tanto bgcolor y codetxt los vamos a estar agregando a colorBox. Luego colorBox lo vamos a incluir en el contenido principal para que se pueda generar tantas cajas con colores como pueda. En estos momentos como ven, ya estoy agregando el colorbg que es el background, y ahí estoy incluyendo la función que arriba puse, la cual genera el color de forma Random. Agrego la parte del texto, que es la misma historia que es el codigo hex del color. Ahora, vamos a agregar todo al contenedor maestro.

Completar la funcion del boton

Lo siguiente, es agregar el contenido al boton que generara las cajas. Para comenzar, vamos a agregar a la accion de click del boton, una condición, la que vamos a chequear si el interior de contBox esta vacia o tiene contenido. Si está vacío, entonces llamamos a la funcion addCont(). Si por el contrario, ya hemos generado los colores, cuando hagamos click en el boton, primero limpiaremos contBox y luego volveremos a llamar a la funcion addCont(). Aqui abajo dejo esta parte del codigo.

button.onclick = () => {
        if(contBox.innerHTML == ""){
            addCont();
        } else{            
            contBox.innerHTML = "";
            addCont();
        }
};

Ahora vamos a crear la parte en la que nos va a permitir copiar el código. En este caso, lo que voy a hacer es que vamos a llamar, despues de la condicion, a una nueva variable que guardara las cajas. Luego utilizaremos esta variable en una funion que permoitira copiar el color para poder ser utilizado. Las nuevas lineas a agregar estan en negritas.

button.onclick = () => {
        if(contBox.innerHTML == ""){
            addCont();
        } else{            
            contBox.innerHTML = "";
            addCont();
        }
        
        let tagdiv = document.querySelectorAll('.colorBox');
        copyTxt(tagdiv);
    };

Agregar la funcion copyTxt(tagdiv)

Ahora vamos a generar la funcion copyTxt()

async function copyTxt(tagdiv){
    try{
        tagdiv.forEach(j => {
            j.style.cursor = "pointer";
            j.onclick = function(){                
                let copyTxt = j.lastChild.innerHTML;                    
                if(navigator.clipboard.writeText(copyTxt.toString())){
                    j.firstChild.innerText = 'color copied';
                    j.firstChild.classList.toggle('ani');
                }
            };
        });
    } catch(err){
        console.error('Failed to copy: ', err);
    }
}

La funcion que creamos es asincronica. La funcion tambien llama a una variable tagdiv, la cual vamos a utilizar paraacceder el contenido y copiar el contenido. Dentro de la funcion, generaremos un try – catch, para probar que nuestro codigo este correcto. Dentro de try, haremos un forEach a la variable tagdiv. La primera opcion, es agregar el estilo cursor = «pointer» a las cajas. Luego agregamos a cada caja, un evento click, la cual va a ejecutar una funcion para copiar el contenido.

Lo primero es asignar a una variable copyTxt el ultimo hijo de la caja, lo cual haremos usando lastChild. Luego crearemos una condicion if, en la que chequearemos si la accion de copiar el codigo del color (navigator.clipboard.writeText(copyTxt.toString())) se ejecuta. Cada vez que esta condicion se ejecute, agregaremos al primer hijo de la caja el texto señalando que el color ha sido copiado, asi como un estilio. En caso de que no funcione, generaremos un error usando catch(err). Ya con esto voy a tener la posibilidad de generar los colores. Si le doy clic a cada caja, voy a poder copiar el color. Ademas, se va a ver si le doy click.

Esto es todo lo necesario para este generador de colores. Espero les guste y les sea de utilidad en sus proyectos.

The Digital Mike