JSFiddle - React, Tailwind, and code Playground

by marlanga

HTML

<h1>Paleta de colores HTML</h1>
<h2>Mueva los controles para elegir el color deseado</h2>
<input type="range" id="rojo" min="0" max="255" value ="25" name ="redcolor" /> Red
<br/>
<input type="range" id="verde" min="0" max="255" value ="25" name ="greencolor" /> Green
<br/>
<input type="range" id="azul" min="0" max="255" value ="25" name ="bluecolor" /> Blue 
<br/>
<br/>
<input id="resultado" type="text" readonly ="readonly" value="" />
<div id="color"></div>

CSS

div#color { width: 100px; height: 100px; }

JavaScript

String.prototype.pad = function( n, p ) {
    var s = '', n = Math.max( 0, n - this.length );
    while( n-- ) {
        s = p.toString() + s;
    }
    return s + this;
};
var ColorPicker = {
    elementos : {
        r : null,
        g : null,
        b : null,
        input : null,
        color : null
    },
    funciones : {
        cargar : function() {
            ColorPicker.elementos.r = document.getElementById( "rojo" );
            ColorPicker.elementos.g = document.getElementById( "verde" );
            ColorPicker.elementos.b = document.getElementById( "azul" );
            ColorPicker.elementos.input = document.getElementById( "resultado" );
            ColorPicker.elementos.color = document.getElementById( "color" );
            
            ColorPicker.elementos.r.addEventListener( 'input', ColorPicker.funciones.change );
            ColorPicker.elementos.g.addEventListener( 'input', ColorPicker.funciones.change );
            ColorPicker.elementos.b.addEventListener( 'input', ColorPicker.funciones.change );
            
            ColorPicker.funciones.change();
        },
        getHex : function( value ) {
            value = parseInt( value );
            return value.toString( 16 ).pad( 2, 0 ).toUpperCase();
        },
        getColor : function() {
            var r = ColorPicker.funciones.getHex( ColorPicker.elementos.r.value );
            var g = ColorPicker.funciones.getHex( ColorPicker.elementos.g.value );
            var b = ColorPicker.funciones.getHex( ColorPicker.elementos.b.value );
            return '#' + r + g + b;
        },
        putColor : function( color ) {
            ColorPicker.elementos.color.style.backgroundColor = color;
            console.log(color);
        },
        change : function() {
            var color = ColorPicker.funciones.getColor();
            ColorPicker.funciones.putColor( color );
            ColorPicker.elementos.input.value = color;
        }
    }
};
window.onload = function(){
   ...