Alphabetic sorting

by Jamescodes

HTML

<button id="myBtn">
    Sort Em!
  </button>

    <div class="red sortme">Steve</div>
    <div class="orange sortme">Dex</div>
    <div class="yellow sortme">Bob</div>
    <div style="color: green;" class="sortme">Colin</div>
    <div class="cyan sortme">James</div>
    <div class="blue sortme">Margie</div>
    <div class="purple sortme">Albert</div>

CSS

.red {
 color: red; 
}
.orange {
 color: orange; 
}
.yellow {
 color: yellow; 
}
.cyan {
 color: cyan; 
}
.blue {
 color: blue; 
}
.purple {
 color: purple; 
}
div.sortme {
  text-align: center;
  padding: 2px;
  max-width: 5rem;
  background-color: hsl(0, 0%, 0%, 0.85);
  border-radius: 5px;
}
button {
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
}

JavaScript

function sortThem(s) {
      console.log('sorting');
    Array.prototype.slice.call(document.body.querySelectorAll(s)).sort(function sort (ea, eb) {
      var a = ea.textContent.trim();
      var b = eb.textContent.trim();
      console.log(a, b);
        if (a.textContent < b.textContent) return -1;
        if (a.textContent > b.textContent) return 1;
        return 0;
    }).forEach(function(div) {
        div.parentElement.appendChild(div);
    });
}
// call it like this
  document.getElementById("myBtn").addEventListener("click", function(){
    sortThem('div.sortme')
  });