Front-End Web Development: The Big Nerd Ranch Guide

Creating the ChatList Class

That takes care of sending outgoing chat messages. Your next job is to display new messages from the server as they come in. To do that, you will create a second class in dom.js representing the list of chat messages the user sees.

ChatList will create DOM elements for each message, which will display the name of the user who sent the message and the message text. In dom.js, create and export a class definition for a new class called ChatList to fulfill this role:

import $ from 'jquery';

export class ChatForm {
  ...
}

export class ChatList {
  constructor(listSel, username) {
    this.$list = $(listSel);
    this.username = username;
  }
}

ChatList accepts the attribute selector and the username. It needs the attribute ...