JSFiddle - React, Tailwind, and code Playground

by Tom Randolph

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<table>
  <tbody>
    <tr>
      <th></th>
      <th>Sorted Correct</th>
      <th>Sorted Incorrect</th>
      <th>Unsorted Correct</th>
      <th>Unsorted Incorrect</th>
    </tr>
    <tr class="debug">
      <td class="row-lead">
        Iterative Debug
      </td>
      <td>
        <textarea id="debug-sorted"></textarea>
      </td>
      <td>
        <textarea id="debug-sortedBad"></textarea>
      </td>
      <td>
        <textarea id="debug-unsorted"></textarea>
      </td>
      <td>
        <textarea id="debug-unsortedBad"></textarea>
      </td>
    </tr>
    <tr class="result">
      <td class="row-lead">
        Final Sorted
      </td>
      <td>
        <p id="result-sorted"></p>
      </td>
      <td>
        <p id="result-sortedBad"></p>
      </td>
      <td>
        <p id="result-unsorted"></p>
      </td>
      <td>
        <p id="result-unsortedBad"></p>
      </td>
    </tr>
  </tbody>
</table>

SCSS

table{
  border-collapse: collapse;
  
  th,
  td{
    padding: .5em;
  }
  
  th{
    border: 1px solid #000000;
  }
  
  .row-lead{
    border: 1px solid #000000;
  }
}

textarea{
  height: 18em;
  width: 10em;
}

JavaScript

var totalSorts = 0;
var outId = "";
var sortedNumbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 ];
var unsortedNumbers = [ 13, 1, 3, 4, 11, 10, 7, 2, 9, 6, 8, 12, 5 ];

function getDebugArea(){
	return document.getElementById( "debug-" + outId );
}

function getFinalArea(){
	return document.getElementById( "result-" + outId );
}

function doCalcs( arr, type ){
	totalSorts = 0;
  outId = type;
  printFinal( _( arr ).clone().sort( numberSorter ) );
  
  totalSorts = 0;
  outId = type + "Bad";
  printFinal( _( arr ).clone().sort( brokenNumberSorter ) );
}

function printComparison( alpha, beta ){ 
  getDebugArea().value += "\n" + alpha + ' and ' + beta;
}

function brokenNumberSorter( numberA, numberB ){
  printComparison( numberA, numberB );
  totalSorts++;
  return 0; // Intentionally broken sorter to expose sort internals
}

function numberSorter( numberA, numberB ){
	var sort = 0;
  if( numberA < numberB ){
  	sort = -1;
  }
  else if( numberA > numberB ){
  	sort = 1;
  }
  
  printComparison( numberA, numberB );
  totalSorts++;
  
  return sort;
}

function printFinal( numbers ){
  getDebugArea().value = "Total Sorts: " + totalSorts + "\n" + getDebugArea().value;
  getFinalArea().textContent = numbers.join( ", " );
}

doCalcs( sortedNumbers, "sorted" );
doCalcs( unsortedNumbers, "unsorted" );