JSFiddle - React, Tailwind, and code Playground

by rdillman

HTML

<input type="text" required class="input" />
<button class="clear">Clear</button>
<button class="search">Search</button>

CSS

input:valid { background: green; }
input:invalid { background: red; }
input:valid ~ .clear { display: inline-block; }
input:valid ~ .search { display: none; }
input:invalid ~ .clear { display: none; }
input:invalid ~ .search { display: inline-block; }

JavaScript

const setup = () => {
  const input =  document.querySelector("input");
  const clear = document.querySelector(".clear");
  clear.onclick = () => input.value = "";
};

const ready = (fn)  => {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
};

ready(setup);