JSFiddle - React, Tailwind, and code Playground

by joevallender

HTML

<textarea id="tags"></textarea>
<div id="tagButtons"></div>
<div id="debug"></div>

CSS

body {
  padding: 20px;  font-family: Arial, helvetica;  
}
textarea {
  width: 300px; height: 70px;
}
#tagButtons span {
  display: inline-block; border-radius: 3px; background: #0a0; padding: 4px 7px; margin: 0 5px 0 0; font-size: 12px; font-weight: bold; color: #fff; cursor: pointer;
  -webkit-transition: background-color .1s linear;
  transition: background-color .1s linear;
}
#tagButtons span:hover {
  background: #0c0;
}
#tagButtons span.selected {
  text-decoration: underline
}
#debug {
  font-family: 'Courier New'; color: #bbb; padding: 40px 0 0 0;
}
#debug div {
  border-top: 1px solid #ddd; padding: 5px    
}

JavaScript

$(document).ready(function(){

  var suggestedTags = [
    'JavaScript',    
    'jQuery',
    'HTML5',    
    'CSS3'
  ];

  var selectedTags = [];

  function tagButton(text){
    return $('<span>').text(text)        
  }

  for(var i = 0; i < suggestedTags.length; i++) {
    $('#tagButtons').append(tagButton(suggestedTags[i]));
  }

  $('#tagButtons span').click(function(){
    var val = $(this).text();
    var index = selectedTags.indexOf(val);
    if(index > -1) {
      removed = selectedTags.splice(index,1); 
      $(this).removeClass('selected');
    } else {
      selectedTags.push(val);
      $(this).addClass('selected');
    }
    $('#tags').val(selectedTags.join(', '));
    console.log(selectedTags);
  });

  $('#tags').keyup(function(){
    selectedTags = [];
    var textTags = $(this).val().split(',');
    for(var i = 0; i < textTags.length; i++) {
      var text = $.trim(textTags[i]);
      if(text) {
        selectedTags.push(text);
      }
    }
    console.log(selectedTags);
  });

});