JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.3.6/tinysort.min.js"></script>
<script type="text/javascript">
var myvar=[];
function sortByCodeLength(a,b) {
  var lenA = a.elm.textContent.length;
  var lenB = b.elm.textContent.length;
  // the above values would use the whole li element length
  lenA=a.elm.getElementsByClassName("code")[0].textContent.length;
  lenB=b.elm.getElementsByClassName("code")[0].textContent.length;
  return lenA === lenB ? 0 : (lenA > lenB ? 1 : -1);
}  
</script>

Sort by <button style="font-weight:bold;color:red;" onclick='tinysort("div#mylist>ol>li", {sortFunction: sortByCodeLength});'>code length</button>
<p>
<div id="mylist">
<ol>
<li><span class="name">Pop corn</span>. 
<span class="code">Product.1-2.3</span> ... lets make this list element longer, longer, longer, longer, longer, longer ... much longer</li>
<li><span class="name">Croissant</span>. 
<span class="code">Product.1.02332.LONGEST.CODE</span></li>
<li><span class="name">Beer</span>. 
<span class="code">Product.1-111</span></li>
<li><span class="name">Coffee</span>. 
<span class="code">Product.1-1</span> (shouldn't this be 1st after sorting by product code length??)</li>
</ol>
</div>

CSS

.code {color:red; font-weight:bold;}