JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<div id="selectContainer">
  <select name="select-1" id="select-1">
    <option value="allColors">All</option>
    <option value="Red">Red</option>
    <option value="Blue">Blue</option>
  </select>
  <select name="select-2" id="select-2">
    <option value="allShapes">All</option>
    <option value="Square">Square</option>
    <option value="Circle">Circle</option>
  </select>
  <select name="select-3" id="select-3">
    <option value="allStyles" selected>All</option>
    <option value="Solid">Solid</option>
    <option value="Outline">Outline</option>
  </select>
</div>
<hr />
<div class="object allColors allShapes allStyles Red Square Solid">
  <p><a href="nextpage.html"> This is a solid, red square. </a> </p>
</div>
<div class="object allColors allShapes allStyles Red Square Outline">
  <p>This is a red, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Solid">
  <p>This is a solid, red circle.</p>
</div>
<div class="object allColors allShapes allStyles Red Circle Outline">
  <p>This is a red, circle outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Solid">
  <p>This is a solid, blue square.</p>
</div>
<div class="object allColors allShapes allStyles Blue Square Outline">
  <p>This is a blue, square outline.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Solid">
  <p>This is a solid, blue circle.</p>
</div>
<div class="object allColors allShapes allStyles Blue Circle Outline">
  <p>This is a blue, circle outline.</p>
</div>

JavaScript

let saveObjectFilterSettings = () => {
	let filters = $('#selectContainer select').map((i, el) => ({ 
  	id: el.id,
    val: el.value
  })).get();
  localStorage.setItem('filter', JSON.stringify(filters));
}

let retrieveObjectFilterSettings = () => {
  let filters = JSON.parse(localStorage.getItem('filter') || '[]');
  filters.forEach(obj => $(`#${obj.id}`).val(obj.val));
}

let filterObjects = () => {
  var color = $('#select-1').val();
  var shape = $('#select-2').val();
  var style = $('#select-3').val();

  $('div.object').each(function() {
    let $el = $(this);
    $el.toggle($el.hasClass(color) && $el.hasClass(shape) && $el.hasClass(style))
  });
}

jQuery($ => {
  retrieveObjectFilterSettings();
  filterObjects();

  $('#selectContainer select').on('change', function() {
  	saveObjectFilterSettings();
    filterObjects();
  });
});