Create a new file in your scripts folder called checklist.js and add a link to it in index.html:

...
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"
      charset="utf-8"></script>
    <script src="scripts/checklist.js" charset="utf-8"></script>
    <script src="scripts/formhandler.js" charset="utf-8"></script>
    <script src="scripts/datastore.js" charset="utf-8"></script>
    <script src="scripts/truck.js" charset="utf-8"></script>
    <script src="scripts/main.js" charset="utf-8"></script>
...

Save index.html. In checklist.js, add the standard module code using an IIFE. Import the App namespace and jQuery, assigning each to a local variable. Create a constructor for CheckList, making sure to confirm that there is a selector passed in and that the selector matches at least one element in the DOM. At the end of the IIFE, export the CheckList constructor as part of the App namespace.

(function (window) {
  'use strict';

  var App = window.App || {};
  var $ = window.jQuery;

  function CheckList(selector) {
    if (!selector) {
      throw new Error('No selector provided');
    }

    this.$element = $(selector);
    if (this.$element.length === 0) {
      throw new Error('Could not find element with selector: ' + selector);
    }
  }

  App.CheckList = CheckList;
  window.App = App;
})(window);

The CheckList module will need three methods to do its work. One will create a checklist item, including the checkbox and the text description. Think of this group of elements as a row in a table.

Another method will remove a row from the table. The third method will add a listener for click events, so that your code knows when to remove a row.

The first method you will tackle is the one to create a row for a new order. Figure 11.3 shows how CheckList will add checklist items to the page when the order form is submitted.

Figure 11.3  Order of events when the order form is submitted