JavaScript

Create the UI

Create the user interface for your web chat.

The following HTML defines a <section> that you will use to display:

The name of the currently logged-in user
The user's current status - that is, whether they are currently typing a message
The messages sent and received so far
A text area for your user to type a new message

The web page loads three scripts once the page body has rendered:

The nexmoClient.js file from the nexmo-client Node module
The chat.js file that will contain your application's code. Create this empty file in the project's root directory

Create a file named index.html in your project directory with the following contents:

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      font: 13px Helvetica, Arial;
    }

    #login,
    #messages {
      width: 80%;
    }

    form input[type=text] {
      font-size: 20px;
      height: 35px;
      padding: 0px;
    }

    button {
      height: 35px;
      background-color: blue;
      color: white;
      width: 75px;
      position: relative;
      font-size: 15px;
    }

    textarea {
      width: 85%;
      font-size: 20px;
    }

    #messageFeed {
      font-size: 18px;
      padding-bottom: 20px;
      line-height: 22pt;
      height: 300px;
      overflow-y: auto;
    }

    #status {
      height: 35px;
      font-size: 12px;
      color: blue;
    }

    #send {
      width: 85%;
    }

    #messages {
      display: none;
    }
  </style>
</head>

<body>

  <form id="login">
    <h1>Login</h1>
    <input type="text" id="username" name="username" value="" class="textbox">
    <button type="submit">Login</button>
  </form>

  <section id="messages">
    <h1 id="sessionName"></h1>

    <div id="loadSection">
      <button id="loadMessages">
        Load Previous Messages
      </button>
      &nbsp; &nbsp;<h3>Showing <span id="messagesCount"></span> starting at <span id="messageDate"></span></h3>
    </div>

    <div id="messageFeed"></div>

    <div>
      <textarea id="messageTextarea"></textarea>
      <button id="send">Send</button>
      <div id="status"></div>
    </div>
  </section>

  <script src="./node_modules/nexmo-client/dist/nexmoClient.js"></script>
  <script src="./chat.js"></script>

</body>

</html>