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

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

var selectedTags = [];

for(var i = 0; i < tags.length; i++) {
  var el = $('<span>').text(tags[i]);
  $('#tagButtons').append(el);
}

$('#tagButtons span').click(function(){
  var val = $(this).text();
  var index = selectedTags.indexOf(val);
  if(index > -1) {
    var removed = selectedTags.splice(index,1); 
    $(this).removeClass('selected');
    $('#debug').prepend($('<div>').html('Removed: ' + removed));
  } else {
    selectedTags.push(val);
    $(this).addClass('selected');
    $('#debug').prepend($('<div>').html('Added: ' + val));
  }
  $('#tags').val(selectedTags.join(', '));
});