JSFiddle - React, Tailwind, and code Playground

by ikbelkirasan

HTML

<label><b>API KEY:</b></label><br>
<input type='text' id='api'><br><br>
<label><b>Location ID:</b></label><br>
<input type='text' id='loc'><br><br>
<label><b>Time for low tide:</b></label><br>
<input type='datetime-local' id='ep'>
<span id='d'>Text</span>
<br><br>
<button id='b' class='button' onclick='setValue()'>Update</button>

CSS

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
button[disabled] { 
  background-color: #400F50;
}
input {
    width: 100%;
}

JavaScript

var epoch = document.getElementById('ep'),
    d = document.getElementById('d'),
    b = document.getElementById('b');
window.onload = function start() {
    window.setInterval(function () {
      if (isNaN(ep.valueAsNumber)){
      	d.innerHTML = '<b style="color: red;">Not Valid</b>';
        b.disabled = true;
      } else {
         d.innerHTML = '<b>Epoch: ' + ep.valueAsNumber + '</b><b style=\"color: green;\"> (Valid)</b>';
         b.disabled = false;
      }      
    }, 100);
}
function setValue(){
  var epoch = ep.valueAsNumber;
  window.location.href = document.location.origin + '?epoch=' + epoch;
}