...
Meanwhile, JavaScript and jQuery was used for a number of reasons:
- to write code that generates a Child’s ID card (for Check-In/Out), Lunch Log card (for Report Lunches), Log card (for Report Daily Log), and Archive entry (for Archives). This is done using Javascript closures to create an initializable class for each of these abstract objects, and implementing an “insert” function which uses jQuery to insert the proper HTML of these cards into the desired containers.
- to implement the “Report Lunches” meal adding, removal, and setting which meals each child had
- to implement different types of validation, such as disabling form buttons on submit, or not allowing submit until values are interested in some boxes, etc.
- to communicate with the backend through asynchronous GET and POST requests, and receive responses.
Different jQuery components were also used to implement UI components:
- jQuery UI draggables for Check-In/Out, along with a jQuery touch plugin to translate touch events to mouse events, allowing draggables to work on the iPad and other devices
- jQuery UI sliders for daily log and lunch report screens, allowing tool tips to be used with the sliders
- jQuery UI multi-select for archives, allowing the user to easily filter through archives by opting to view archives for subsets of the children, or events
- jQuery UI modal dialog, used in the share story screen to allow users to refer to a list of children
- jQuery tokenized input plugin, used in the share story screen to allow users to search for children by typing part of their names and autocompleting, removing individual children, etc.
Back-end
The Templating System
...