JSFiddle - React, Tailwind, and code Playground

by sc0rp10

HTML

<label>
    <input id="h" />
    <span>H</span>
</label>
<label>
    <input id="s" />
    <span>S</span>
</label>
<label>
    <input id="v" />
    <span>V</span>
</label>
<br/>
<input type="button" id="go" value="go"/>
<div id="marker"></div>

CSS

#marker {
    width: 200px;
    height: 200px;
    border: 2px solid #000;
    margin: 20px;
}

JavaScript

var marker = document.getElementById("marker");
document.getElementById("go").onclick = function(e) {
    var h = document.getElementById("h").value;
    var s = document.getElementById("s").value;
    var v = document.getElementById("v").value;
    
    var colors = [h, s, v];
    console.log("hsv(" + colors.join(",") + ")");
    
    marker.style.backgroundColor = "hsb(" + colors.join(",") + ")";
}