In this coding kata, your application needs a way to capture information about a household applying for health insurance coverage. Develop a UI for building a household up from individual people.
You have been given an HTML page with a form and a placeholder for displaying a household. In the given index.js file, replace the “Your code goes here” comment with JavaScript that can:
- Validate data entry (age is required and > 0, relationship is required)
- Add people to a growing household list
- Remove a previously added person from the list
- Display the household list in the HTML as it is modified
- Serialize the household as JSON upon form submission as a fake trip to the server
Do not modify the given index.html file in any way. You’re of course still allowed to modify the DOM through Javascript.
You must write JavaScript, not a language that compiles down to JavaScript. You must use ES3 or ES5/5.1 standard. Assume the capabilities of a modern mainstream browser in wide use, i.e., no bleeding-edge features. No 3rd party libraries — i.e., no jQuery.
On submission, put the serialized JSON in the provided “debug” DOM element and display that element. After submission the user should be able to make changes and submit the household again. The focus here is on the quality of your JavaScript, not the beauty of your design.
Given the above constraints, I decided to write a solution using vanillaJS. The index.js entrypoint loads all necessary files via promise, then initializes the application.
I implemented a very basic MVC framework with service layer. The controller handles all user interactions and delegates actions to the model and view. The view itself is dumb (this is a good thing), aside from the pure functions I wrote to filter output strings. The model employes the native JavaScript prototype. Services include:
- store: a collection of household entries with methods for managing them
- dom registry: provides an interface for working with DOM elements
- sanitizer: basic user input sanitization
Input is sanitized, values are validated, required fields are required. The user is notified with a proper error when attempting to add household entry with invalid values. Entries appear in the list when added, and can be deleted by clicking a corresponding remove button. The JSON payload appears in a debug panel once the list of entries is submitted.
The app is resilient. It will continue to show errors when they occur, add and remove entries on demand, and submit without breakage. The application works on all modern browsers.
You can find the application here.