JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<form>

<input type="radio" name="filter" value="0" checked/>ALL
<input type="radio" name="filter" value="a"/>A
<input type="radio" name="filter" value="b"/>B
<input type="radio" name="filter" value="c"/>C
<input type="radio" name="filter" value="d"/>D
<input type="radio" name="filter" value="e"/>E
</form>

<section id="x">
<div data-cat="a">0</div>
<div data-cat="a">1</div>
<div data-cat="a">2</div>
<div data-cat="a">3</div>
<div data-cat="a">4</div>
<div data-cat="a">5</div>
<div data-cat="b">6</div>
<div data-cat="b">7</div>
<div data-cat="b">8</div>
<div data-cat="b">9</div>
<div data-cat="b">10</div>
<div data-cat="c">11</div>
<div data-cat="c">12</div>
<div data-cat="c">13</div>
<div data-cat="c">14</div>
<div data-cat="c">15</div>
<div data-cat="d">16</div>
<div data-cat="d">17</div>
<div data-cat="d">18</div>
<div data-cat="d">19</div>
<div data-cat="d">20</div>
<div data-cat="e">21</div>
<div data-cat="e">22</div>
<div data-cat="e">23</div>
<div data-cat="e">24</div>
<div data-cat="e">26</div>
<div data-cat="e">27</div>
<div data-cat="e">28</div>
<div data-cat="e">29</div>
</section>

<div>

</div>

CSS

#x {
display: flex;
  flex-wrap: wrap;
  width:50%; margin:auto; border:1px solid red;
}

#x div {
  display:block; position:relative;
  height:100px; width:150px;
  background:#ccc;
  margin:5px;
  font-size:2em;
}
#x div[data-cat="a"] {background:red;}
#x div[data-cat="b"] {background:blue;}
#x div[data-cat="c"] {background:green;}
#x div[data-cat="d"] {background:purple;}
#x div[data-cat="e"] {background:orange;}

input:not([value="0"]):checked ~ #x div {display:none}
input[value="a"]:checked ~ #x div[data-cat="a"] {display:block}
input[value="b"]:checked ~ #x div[data-cat="b"] {display:block}
input[value="c"]:checked ~ #x div[data-cat="c"] {display:block}
input[value="d"]:checked ~ #x div[data-cat="d"] {display:block}
input[value="e"]:checked ~ #x div[data-cat="e"] {display:block}

JavaScript

let f = document.querySelector("form");
let container = document.getElementById("x");
let cards = document.querySelectorAll("div[data-cat]");
/*
function randomIntFromInterval(min, max) { // min and max included 
  return Math.floor(Math.random() * (max - min + 1) + min)
}

(function jumbleFlexOrder() {
	for (i = 0; i < cards.length; ++i) {
  	cards[i].style.order = randomIntFromInterval(1, 25);
	}
})()*/

(function jumbleDomOrder() {
	for (var i = container.children.length; i >= 0; i--) {
    container.appendChild(container.children[Math.random() * i | 0]);
	}
})()

/*f.addEventListener('change', (event) => {
console.log("xx")
  alert(document.querySelectorAll("div[data-cat]:visible").length);
});*/