JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<form class="initial">
  <label>Username*</label><br>
  <input id="user" type="text" value="huppde" placeholder="Songkick Username" required>
  <input type="submit" value="submit">
</form>

<div class="menu">Sorting:
  <span class="date curr desc">Date</span>
  <span class="artist desc">Artist</span>
  <input id="search" type="text" placeholder="Count search term" value="">
  <span class="search result"></span>
  <span class="search showme">show</span>
  <span class="search clear">clear</span>
</div>

<div id="output">
  <ol>
  </ol>
</div>

CSS

body {
  font-family: Arial;
}

form.initial {
  position:absolute;
  width:200px;
  height:40px;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
}

form {
  position:relative;
}

.menu span {
  cursor: pointer;
  outline: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  padding: 0 5px 0 5px;
  margin-right: 12px;
}

.headliner {
  font-weight: 600;
}

.highlight {
  background-color: #FF0;
}

.supporter {
  font-style: italic;
}

.menu {
  display: none;
  margin-top: 20px;
}

.menu span:not(.search).curr.desc:after {
  content: "\25BE";
  margin-right: -10px;
  margin-left: 5px;
  display: inline-block;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  top: 0;
}

.menu span:not(.search).curr:after {
  content: "\25BE";
  margin-right: -10px;
  margin-left: 5px;
  position: absolute;
  top: -2px;
}

JavaScript

(function($) {
  $(document).ready(function() {
    var sortby;

    function sorting() {
      if (sortby == "date") {
        $("#output li").sort(function(a, b) {
          var d1 = $(a).data('date');
          var d2 = $(b).data('date');
          return d1 > d2 ? 1 : -1;
        }).appendTo('#output ol');
        //console.log("sorting by date asc");
      } else if (sortby == "date desc") {
        $("#output li").sort(function(a, b) {
          var d1 = $(a).data('date');
          var d2 = $(b).data('date');
          return d2 > d1 ? 1 : -1;
        }).appendTo('#output ol');
        //console.log("sorting by date desc");
      } else if (sortby == "artist") {
        $("#output li").sort(function(a, b) {
          var d1 = $(a).data('artist');
          var d2 = $(b).data('artist');
          return d1 > d2 ? 1 : -1;
        }).appendTo('#output ol');
        //console.log("sorting artist asc");
      } else if (sortby == "artist desc") {
        $("#output li").sort(function(a, b) {
          var d1 = $(a).data('artist');
          var d2 = $(b).data('artist');
          return d1 < d2 ? 1 : -1;
        }).appendTo('#output ol');
        //console.log("sorting artist desc");
      } else {
        $("#output li").sort(function(a, b) {
          var d1 = $(a).data('date');
          var d2 = $(b).data('date');
          return d2 > d1 ? 1 : -1;
        }).appendTo('#output ol');
        //console.log("sorting standard");
      }
    } //function sorting

    function songkick() {

      together = [];
      var api = "YUjJryDAglORHVPO";
      var sortby;

      //RESULTS AJAX READ XML AND OUTPUT TO HTML
      $.ajax({
        //https://api.songkick.com/api/3.0/users/huppde/gigography.xml?apikey=YUjJryDAglORHVPO
        url: "https://api.songkick.com/api/3.0/users/" + user + "/gigography.xml?apikey=" + api,
        type: "GET",
        dataType: "html",
        success: function(data) {
          var xml = $.parseXML(data);
         ...