JSFiddle - React, Tailwind, and code Playground

by giovanni gokhan morkoc

HTML

<div class="container">
  <div id="buttons"></div>
  <div id="gallery">
    <img data-tags="Animators,Illustrators" src="http://lorempixel.com/g/351/220/fashion/1" alt="" />
    <img data-tags="Photographers,Filmmakers" src="http://lorempixel.com/g/351/220/fashion/" alt="" />
    <img data-tags="Photographers,Filmmakers" src="http://lorempixel.com/g/351/220/fashion/3" alt="" />
    <img data-tags="Designers" src="http://lorempixel.com/g/351/220/fashion/4" alt="" />
    <img data-tags="Filmmakers" src="http://lorempixel.com/g/351/220/fashion/5" alt="" />
    <img data-tags="Designers" src="http://lorempixel.com/g/351/220/fashion/6" alt="" />
    <img data-tags="Animators,Photographers" src="http://lorempixel.com/g/351/220/fashion/7" alt="" />
    <img data-tags="Designers" src="http://lorempixel.com/g/351/220/fashion/8" alt="" />
    <img data-tags="Animators,Illustrators" src="http://lorempixel.com/g/351/220/fashion/9" alt="" />
    <img data-tags="Animators,Illustrators" src="http://lorempixel.com/g/351/220/fashion/10" alt="" />
  </div>
</div>

CSS

.container {
  width: 1170px;
  margin: 0 auto;
}

#gallery {
  border: 1px solid #efefef;
  padding: 4px 0 0 0;
}

#gallery img {
  margin: 8px;
  width: 214px;
  cursor: pointer;
  border-radius: 3px;
}

#gallery img:hover {
  margin: 8px;
  opacity: .8;
}

header h1 {
  font-weight: 700;
  margin-left: 8px;
}

#buttons button {
  border: 1px solid #efefef;
  margin-right: 8px;
  border: 0;
  padding: 8px;
  border-radius: 3px;
}

#buttons button.active {
  background-color: #bbb;
  color: #111;
}

#buttons {
  margin: 8px;
  padding-bottom: 8px;
}

button:hover{
  background-color: #111;
  color: #fff;
}

JavaScript

(function() {
  var $imgs = $('#gallery img');
  var $buttons = $('#buttons');
  var tagged = {};

  $imgs.each(function() {
    var img = this;
    var tags = $(this).data('tags');

    if (tags) {
      tags.split(',').forEach(function(tagName) {
        if (tagged[tagName] == null) {
          tagged[tagName] = [];
        }
        tagged[tagName].push(img);
      })
    }
  })

  $('<button/>', {
    text: 'Show All',
    class: 'active',
    click: function() {
      $(this)
        .addClass('active')
        .siblings()
        .removeClass('active');
      $imgs.show();
    }
  }).appendTo($buttons);

  $.each(tagged, function(tagName) {
    var $n = $(tagged[tagName]).length;
    $('<button/>', {
      text: tagName + '(' + $n + ')',
      click: function() {
        $(this)
          .addClass('active')
          .siblings()
          .removeClass('active');
        $imgs
          .hide()
          .filter(tagged[tagName])
          .show();
      }
    }).appendTo($buttons);
  });
}())