TDD and DOM Manipulation: The Chat Client - Test-Driven JavaScript Development - page 430

Listing 15.81 Final bootstrapping script
/* ... */
userController.observe("user", function (user) {
/* ... */
var mForm = document.getElementById("messageForm");
var messageFormController =
Object.create(c.messageFormController);
messageFormController.setModel(model);
messageFormController.setView(mForm);
model.connect();
});
</script>
Firing up the client in a browser should now present you with a fully functional,
if not particularly feature rich, chat client, implemented entirely using TDD and
JavaScript, both server and client side. If you experience trouble posting messages,
make sure you completed messageFormController by making its handle-
Submit method abort the default event action.
15.6.1 Finishing Touches
To get a feeling of how the chat application behaves, try inviting a friend to join
you over the local network. Alternatively, if you're alone, fire up another browser,
or even just another tab in your current browser. There are currently no cookies
involved, so running two sessions from different tabs in the same browser is entirely
doable.
15.6.1.1 Styling the Application
An unstyled webpage is a somewhat bleak face for the chat application. To make
it just a tad bit nicer to rest our eyes on, we will add some CSS. I am no designer,
so don't get your hopes up, but updating css/chapp.css with the contents of
Listing 15.82 will at least give the client rounded corners, box shadow, and some
light grays.
Listing 15.82 “Design” for the chat client
html { background: #f0f0f0; }
form, dl { display: none; }
.js-chat { display: block; }