JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="https://rawgit.com/tjvantoll/clock-face/master/bower_components/document-register-element/build/document-register-element.js"></script>
<script src="https://rawgit.com/tjvantoll/clock-face/master/clock-face.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tjvantoll/clock-face/master/clock-face.css">
<clock-face hour="9" minute="30" second="10"></clock-face>

<label for="hour">Hour:</label>
<input type="number" value="9" min="1" max="12" id="hour">
    
<label for="minute">Minute:</label>
<input type="number" value="30" min="0" max="59" id="minute">
    
<label for="second">Second:</label>
<input type="number" value="10" min="0" max="59" id="second">

CSS

/* A little spacing for the demo */
clock-face {
    margin-bottom: 0.5em;
}

JavaScript

var inputs = document.querySelectorAll( "input" );
for ( var i = 0; i < inputs.length; i++ ) {
    inputs[ i ].addEventListener( "change", function() {
        document.querySelector( "clock-face" )
            .setAttribute( this.id, this.value );
    });
}