This is a sample block to read a list of names, order them and also create a random ordered list. The code even allows to drag and drop files into the text area for easier manipulation of long lists, and also to avoid storing any data on our server - because there is no need to do it.

The working area is next and below that is the description of the code

Enter a list of names:

Ordered

Randomized

Description of the code

Javascript file in github

To read the names, the code takes the contents of the textarea and puts it into an array line by line to be able to manipulate it. JQuery makes it easy by using the textarea locator, retrieving the value and the using split() by newline, then sorting is native in javascript for an array:

var names = $('#names').val().split("\n");
names.sort();

Javascript provides a pseudo-random number generator that produces number in the range (0, 1). For the case presented here we need an integer number in the range [0, names.length] for that we can write a simple function to take an upper boundary and produce a pseudo-random integer in that range:

random = function(bound) {
  return Math.floor(Math.random() * bound);
}

To be able to generate a random list, the code needs to iterate through the whole list of names and randomly select a new position for every entry:

for(i = 0; i < names.length; i++) {
  var dest = random(names.length);
  if (dest != i) {
    var t = names[dest];
    names[dest] = names[i];
    names[i] = t;
  }
}

Handling files

To be able to manipulate files, the browser will generate events related to drag and drop, for which the program needs to handle dragOver, dragEnter, and drop. Within the drop handler, the program can instantiate the HTML5 FileReader object, that will read the local file. The reader works on events to avoid blocking the main (and only) thread executing the script. Within the handler of the reader, I load the contents of the file into the textarea using JQuery $.text() method.

var reader = new FileReader();
reader.addEventListener("load", function () {
    var fileText = reader.result;
    $('#names').text(fileText);
}, false);
reader.readAsText(file);

Conclusion

Reading a file is now part HTML5, array manipulation is done easily with javascript, and that includes the sort method, as well as a pseudo-random number generator. Javascript provides also handling of the DOM but in this case I opted for JQuery which in my opinion is easier to read.