JSFiddle - React, Tailwind, and code Playground

by jay_tuckey

HTML

<script src="https://unpkg.com/hyperscript.org@0.9.5"></script>
<form>
  <label for="item">Item: </label><input name="item">
  <input type="hidden" name="tags" id="tags-input"
  _="on newtag(tag)
       append `,$tag` to @value
       make a <li/> then put tag into it
       put it at the start of #shown-tags
     end
     
     on deltag(tag)
       call (@value of me).split(',')
       make a Set from it then set s to it
       call s.delete(tag) then call s.delete('')
       call Array.from(s) then set my @value to it.join(',')
       for el in #shown-tags.children
         if innerHTML of el == tag
           remove el
         end
       end
     end">
  <ul id="shown-tags"
  _="on click send deltag(tag: innerHTML of target) to #tags-input"></ul>
</form>
<form id="tagform"
 _="on submit
      halt the event
      set taginput to (first <input/> in me).value
      send newtag(tag: taginput) to #tags-input
      set value of first <input/> in me to ''">
  <label for="tags">Tags: </label><input name="tags"> (Hit enter to add a tag)
</form>