JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script>
  <h2></h2>
  <table class="munch-madness-table">
    <thead>
      <tr class="row-label">
        <td class="column-label"></td>
        <td>Creativity/<br />Presentation</td>
        <td>Condiments/<br />Bun</td>
        <td>Burger/<br />Taste</td>
      </tr>
    </thead>
  </table>
  <br />
  <h2>Winner: </h2>
  <br />
  <a href="#" target="_blank"></a>

CSS

body {
  background-color: rgb(60, 50, 42);
  color: white;
}





.munch-madness-table {
  border-spacing: 0;
}

.munch-madness-table tr td {
  padding: 4px 0 4px 0;
}

.munch-madness-table div.ballContainer {
  width: 167px;
}


.munch-madness-table .row-group {
  background-color: rgba(200, 200, 200, .1);
}

.munch-madness-table .reviewer-row.row-odd {
  background-color: rgba(200, 200, 200, .05);
}

.munch-madness-table .row-spacer {
  height: 4px;
}

.munch-madness-table tr td.column-label {
  width: 100px;
  padding: 0 0 0 4px;
}

.munch-madness-table .row-label,
.munch-madness-table .chain-title-row .column-label {
  font-weight: bold;
}

.munch-madness-table .chain-title-row .column-label {
  font-size: 125%;
  padding: 6px;
}

.munch-madness-table div.ball,
.munch-madness-table div.ballLabel {
  display: inline-block;
  vertical-align: middle;
  line-height: 25px;
}

.munch-madness-table div.ball {
  background: url(http://static.tumblr.com/q7ntr7v/yW1o3niv6/basketball.png) no-repeat top left;
  font-size: 25px;
  width: 25px;
  height: 25px;
  margin: 0 4px 2px 0;
  overflow: hidden;
}

.munch-madness-table div.ballLabel {
  font-size: 14px;
  font-weight: bold;
}

JavaScript

var reviews = [
  {"reviewer": "Nick",  "name": "Shake Shack", "presentation": 7.5,  "bun": 8.5, "burger": 10},
  {"reviewer": "Nick",  "name": "Wendy's", "presentation": 8.5,  "bun": 8.5, "burger": 9},
  {"reviewer": "Mitch", "name": "Shake Shack", "presentation": 8,  "bun": 9, "burger": 10},
  {"reviewer": "Mitch", "name": "Wendy's", "presentation": 9,  "bun": 9, "burger": 9.5},
  {"reviewer": "Nicole", "name": "Shake Shack", "presentation": 10,  "bun": 8.5, "burger": 7.5},
  {"reviewer": "Nicole", "name": "Wendy's", "presentation": 5,  "bun": 8, "burger": 7.5}
];

var winner = "Shake Shack";
var episodeName = "Tournament of Chompions: Minisode Winner v. Wendy’s";
var episodeUrl = "http://www.feralaudio.com/45-tournament-of-chompions-minisode-winner-v-wendys/";
var guestName = "Nicole Byer";
var guestUrl = "https://twitter.com/nicolebyer";

var h2 = document.getElementsByTagName('h2')[0];
h2.innerText = episodeName + ' with ';

var guestEl = element('a');
guestEl.href = guestUrl;
guestEl.innerText = guestName;
h2.appendChild(guestEl);

var a = document.getElementsByTagName('a')[1];
a.innerText = episodeUrl;
a.href = episodeUrl;

var winnerEl = document.getElementsByTagName('h2')[1];
winnerEl.appendChild(element('b', winner))

var chains = _.groupBy(reviews, 'name');

var avgs = _.map(chains, function (chain) {

  var start = {"name": chain[0].name, presentation: 0, bun: 0, burger: 0};

  var sum = _.reduce(chain, function (c, h) {
    c.presentation += h.presentation;
    c.bun += h.bun;
    c.burger += h.burger;
    return c;
  }, start);
  
  sum.presentation /= chain.length;
  sum.bun /= chain.length;
  sum.burger /= chain.length;
  
  return sum;
});

var chainTable = document.getElementsByClassName('munch-madness-table')[0];

_.forEach(avgs, function (avg, i) {
	var rowGroup = element('tbody');
	rowGroup.className = 'row-group ' + (i % 2 ? 'row-even' : 'row-odd');

  var row = element('tr', '', "chain-title-row");
  var titleCell = element('td', avg.name,...