Name Sorter

You ARE allowed to work in pairs on this project.

You can do this homework individually or in a pair (2 people) ONLY.
If you work with a partner make sure that you put BOTH of your names on the assignment and then have ONE person hand in the assignment via Canvas.

The Due Date for this assignment is listed on the course schedule page


In this assignment you will make a web page that will alphabetize a list of names. You will use an accumulator pattern to build an array which contains the list. You will then sort the list. After the user clicks the button, your webpage will display both the original, and the sorted list of names.

This assignment will exercise your skills in jQuery, looping, arrays, and function decomposition.


Additional notes:

You will be given a starter HTML file that contains the basic layout of the page. You should feel free to modify it for appearance, and you will need to ensure that the names of all team member's is at the top.

You should consider basic error checking - if the user does not enter any names, you should produce a message that states this instead of the lists. Your sorter can be written to work for numbers as well as Strings, but if you wish to check for NaN that might be interesting.

Use an accumulator pattern with a prompt to add more names to the array.

If the user doesn't enter any names, you should let them know!

The final product shows both the starting and ending list. Notice that you can see the arrays in the console log.


This coding assignment is meant to stretch your skills beyond what has been presented in lecture. The following resources might help you.

Technical Requirements

For full marks your page must meet all of the following requirements:

Personal Requirements

For full marks you must meet all of the following requirements:

Other Requirements

Your page should be portable in the sense that when one opens the .HTML file, the page should properly open and display all elements on the page.  At this point this mostly means that you should not use absolute file names for extra files (like image files).

What to hand in:

  1. Your modified Homework3.html
  2. Any extra files that your page uses.  This includes image files, CSS files, external JavaScript files, etc, etc.