JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<div id="hero">Steven Spielberg and Harrison Ford announce new Indiana Jones movie</div>
<ul id="itemsList">
  <li data-title="Steven Spielberg and Harrison Ford announce new Indiana Jones movie">Indiana Jones</li>
</ul>
<button id="addItemsButton">Add items</button>

JavaScript

(function(window) {

  var _data1 = [{
    blurb: "Iron Man",
    title: "Robert Downey Jr. says there probably won't be an Iron Man 4"
  }, {
    blurb: "True Sadness",
    title: "The Avett Brothers announce new album True Sadness"
  }, {
    blurb: "TV Ax",
    title: "14 TV Shows Likely to Get the Ax After This Season"
  }, {
    blurb: "Ben & Jenn",
    title: "Ben Affleck addresses Jennifer Garner’s Vanity Fair interview about their split"
  }, {
    blurb: "Unfortunate Events",
    title: "Patrick Warburton joins Netflix's A Series of Unfortunate Events series"
  }, {
    blurb: "Cruel Intentions",
    title: "Peter Gallagher joins NBC's Cruel Intentions revival"
  }, {
    blurb: "Taylor Swift",
    title: "More people watch Taylor Swift music videos than network TV"
  }, {
    blurb: "The Good Wife",
    title: "The Good Wife cast and creators to say goodbye with Tribeca Film Festival panel"
  }];

  var _data2 = [{
    blurb: "Star Trek",
    title: "Star Trek fan film accused of copyright infringement"
  }, {
    blurb: "Ted",
    title: "Mark Wahlberg doesn't think Pope Francis appreciated his Ted joke"
  }, {
    blurb: "Batman vs Superman",
    title: "Behind the brawl of Batman v Superman: Dawn of Justice"
  }];

  function createListItem(item) {
    if (item && item.title && item.blurb) {
      var li = document.createElement("li");
      li.dataset.title = item.title;
      li.innerHTML = item.blurb;
      return li;
    }
  }

  function populate(array, listContainer) {
    if (!Array.isArray(array) || !(listContainer instanceof Element)) {
      return;
    }
    array.forEach(function(item) {
      var li = createListItem(item);
      if (li) {
        listContainer.appendChild(li);
      }
    });
  }

  window.createListController = function(listContainer, heroDisplay, addButton) {
    listContainer = document.getElementById(listContainer);
    heroDisplay = document.getElementById(heroDisplay);
    addButton =...