JSFiddle - React, Tailwind, and code Playground

by p337

HTML

<h4>Query:</h4>
<p id="query"></p>
<hr/>
<div id="main">
  <div id="siteSide">
    <input id="site" />
    <button id="btnAdd">+</button>
    <button id="btnExclude">-</button>
    <div class="listContainer">
      <ul id="siteList">

      </ul>
    </div>

    <div class="listContainer">
      <ul id="exclusionList">

      </ul>
    </div>
  </div>
  <div id="querySide">
    <input id="dork" />
  </div>
</div>

CSS

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.listContainer {
  border: 1px solid lightgray;
  margin: 10px;
  margin-left: 0px;
  padding: 5px;
}

ul {
  list-style: none;
  padding-left: 0px;
  margin: 5px;
}

li {
  padding: 5px;
  overflow: hidden;
}

ul p {
  display: inline-block;
  max-width:85%;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:0;
}

li button {
  display: inline;
  float: right;
}

button {
  min-width: 24px;
}

h4 {
  margin-bottom: 5px;
}

#query {
  margin-top: 0px;
  margin-bottom: 25px;
}

#querySide {
  float: right;
  margin-right:20px;
}

#siteSide {
  width: 60%;
  display: inline-block;
}

JavaScript

$('#site').on('keypress', function(e) {
  if (e.which === 13) {
    addItem($('#site').val());
  }
});

$('#btnAdd').on('click', function() {
  addItem($('#site').val());
});
$('#btnExclude').on('click', function() {
  addItem($('#site').val(), true);
});

$('body').on('click', '.delete', function() {
  removeItem($(this));
});

// First, checks if it isn't implemented yet.
if (!String.prototype.format) {
  String.prototype.format = function() {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function(match, number) {
      return typeof args[number] != 'undefined' ? args[number] : match;
    });
  };
}

function addItem(item, exclusion) {
  $('#site').val('');
  if (!item) {
    return;
  }
  var li = $(document.createElement('li'));
  var btn = $(document.createElement('button'));
  btn.addClass('delete');
  btn.text('-')
  var p = $(document.createElement('p'));
  p.text(item);
  li.append(p);
  li.append(btn);
  if (!exclusion) {
    $('#siteList').append(li);
  } else {
    $('#exclusionList').append(li);
  }
  updateQuery();
}

function removeItem(item) {
  item.parent().remove();
  updateQuery();
}

function updateQuery() {
  var sites = [];
  $('#siteList p').each(function() {
    sites.push('site:{0}'.format($(this).text()));
  });

  var exclusions = [];
  $('#exclusionList p').each(function() {
    exclusions.push('-site:{0} '.format($(this).text()));
  });
  $('#query').text('({0}) {1} {2}'.format(sites.join(' || '), 'filetype:pdf', exclusions.join(' ')));
}