Front-End Web Development: The Big Nerd Ranch Guide

Creating the ChatForm Class

As you did with CoffeeRun, you will create an object to manage the form element in the DOM. This will be the ChatForm class. Using ES6 classes will make your code a bit more readable than your code from CoffeeRun.

Creating a ChatForm instance and initializing its event handlers will occur in two separate steps, because a constructor’s job should only be to set the properties of an instance. Other work (like attaching event listeners) should be done in other methods.

Define ChatForm in dom.js with a constructor that accepts selectors. In the constructor, add properties for the elements the instance will need to track.

import $ from 'jquery';

class ChatForm {
  constructor(formSel, inputSel) {
    this.$form ...