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">
function sortByLength(a,b) {
  var lenA = a.elm.textContent.length;
  var lenB = b.elm.textContent.length;
  return lenA === lenB ? 0 : (lenA > lenB ? 1 : -1);
}  
</script>

FAILING...: Sort by <button style="font-weight:bold;color:red;" onclick='tinysort("div#mylist>ol>li", {sortFunction: sortByLength, selector:&quot;span.code&quot;}); document.getElementById("messages").innerHTML="";'>code length</button>
<p>
<div id="mylist">
<ol>
<li><span class="name">Pop corn</span>. 
<span class="code">Product.1-2.3</span></li>
<li><span class="name">Croissant</span>. 
<span class="code">Product.1.02332</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> (should by 1st)</li>
</ol>
</div>

CSS

.code {color:red; font-weight:bold;}
.char {color:brown; font-weight:bold;}
#messages {background-color:yellow; color:red; font-weight:bold;}