In the last chapter, you built the FormHandler
module. It serves as a bridge between the form that the user interacts
with and the rest of your code. By intercepting its submit event,
you supply the user’s input to your Truck
module, which saves it to its DataStore instance.
In this chapter, you will build the other piece of UI code, the CheckList module. Like the Truck module, it will receive data from the FormHandler, but its job is to add a checklist of pending orders to the page. When a checklist item is clicked, the CheckList will remove it from the page and signal the Truck to remove it from the DataStore. Figure 11.1 shows CoffeeRun equipped with its checklist of pending orders.
You will continue to use Bootstrap classes for styling
your form elements. Begin in index.html by
adding a pair of <div> elements with the
Bootstrap class names panel, panel-default, and panel-body,
as you did for your coffee order form.
Inside of them, add a header and another <div>
that will hold the actual checklist items.
This markup should be added after the <div>s that hold your form.
...
<header>
<h1>CoffeeRun</h1>
</header>
<section>
<div class="panel panel-default">
<div class="panel-body">
<form data-coffee-order="form">
...
</form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h4>Pending Orders:</h4>
<div data-coffee-order="checklist">
</div>
</div>
</div>
</section>
...
As before, you added <div>s to
carry the styling provided by Bootstrap. The main part of your
checklist is the [data-coffee-order="checklist"]
element. It will be the target for the JavaScript that creates an individual coffee order
checklist item and adds it to the DOM.
Save index.html, start browser-sync, and make sure CoffeeRun
shows an empty Pending Orders area (Figure 11.2).
Now you are ready to dive back into the JavaScript.