JSFiddle - React, Tailwind, and code Playground

by Giorgio Malvone

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<label>Red:<input id="r" type="text" placeholder="R"></input></label>
<label>Green:<input id="g" type="text" placeholder="G"></input></label>
<label>Blue:<input id="b" type="text" placeholder="B"></input></label>
<input type="button" value="Convert" onclick="buttonPress()"></input>
<div id="colorBlock"></div>
<p id="result"></p>

CSS

body{
    background-color:#FAFAFA;
    color:#333;
}

label{
    display:block;
}

input{
    display:block;
    margin-bottom:10px;
}

#result{
    display:block;
    font-size:17px;
    font-family:Helvetica;
    margin-left:5%;
    text-align:center;
    width:100px;
}

#colorBlock{
    height:100px;
    width:100px;
    border:1px solid #999;
    border-radius:50%;
    margin-top:2%;
    margin-left:5%;
    margin-bottom:-12px;
    text-align:center;
    line-height: 2.2;
    font-size: 45px;
    color:#B24532;
    -webkit-transition: all 0.3s;
    transition: all ease-out 0.4s;
}

JavaScript

var red = document.getElementById("r");
var green = document.getElementById("g");
var blue = document.getElementById("b");
var result = document.getElementById("result");
var colorBlock = document.getElementById("colorBlock");

function buttonPress(){
    var redHex = convert(red);
    var greenHex = convert(green);
    var blueHex = convert(blue);
    
  
    if (redHex === "invalidInput" || greenHex === "invalidInput" || blueHex === "invalidInput" )
    {
         result.innerHTML = ("Invalid input! Make sure you have no numbers greater than 255 or less than 0, and no invalid characters.");  
        colorBlock.innerHTML = "<i class='fa fa-exclamation-triangle'></i>";
        colorBlock.style.backgroundColor = "tomato";
        colorBlock.style.color = "#B24532";
    }
    else
    {
        var converted = redHex.concat(greenHex,blueHex);
        console.log(converted);
        result.innerHTML = ("#" + converted);
        colorBlock.innerHTML = "";
        colorBlock.style.color = "none";
        colorBlock.style.backgroundColor = ("#" + converted);   
    }
}

function convert(c)
{
   var color = Number(c.value);

    color = color.toString(16).toUpperCase();
    console.log(c.placeholder + ":" + color);
    
    if (color.length === 1)
    {
         return color.concat(color);   
    }
    else if (color.length > 2 || c < 0 )
    {
        return("invalidInput");        
    }
    else
    {
    return color;
    }
}