Color compare

by arcm111

HTML

<body>
    <div id="cont">
        <div id="left" onClick="focusInput (this.children[0])">
            <input type="text" onChange="update()"/>
        </div>
        <div id="right" onClick="focusInput (this.children[0])">
            <input type="text" onChange="update()"/>
        </div>
    </div>
    
    <body>

CSS

#cont {
    position: absolute;
    height: 100%;
    width: 100%;
    background: beige;
    display: block;
}
#left {
    background: teal
}
#right {
    background: turquoise
}
#left, #right {
    position: relative;
    float: left;
    width: 50%;
    height: 100%;
}
input[type='text'] {
    position:absolute;
    bottom: 10px;
    width: 50%;
    left: 25%;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 2px;
    padding: 2px 10px;
    font-size: 12px;
    line-height: 18px;
    color: #333;
    box-sizing: border-box;
}

JavaScript

var left = document.getElementById("left");
var right = document.getElementById("right");
var inpl = left.children[0];
var inpr = right.children[0];

function update()
{
    left.style.backgroundColor = inpl.value;
    right.style.backgroundColor = inpr.value;
}

function focusInput (elm)
{
    elm.focus();
    elm.select();
}