Connect the Chat Handler with UI

Implement the script to connect the ChatHandler class with the HTML web page and finish the project.

We'll cover the following

Introduction

So far, we've completed the implementation of the ChatHandler class to store the chats in a linked list and hashmap. Now, we need to connect the class with UI to render the chats on the HTML web page. We'll follow the steps mentioned below:

  1. Access all the required HTML elements from the web page using getElementById() and querySelector() functions.

  2. Attach an event listener on the button to generate one operation out of the following:

    1. Based on a random integer, delete a message if the random number generated is less than 0.75 (for example) and there is at least one message in the chat list.

    2. Generate a new message if any one of the above-mentioned conditions fails.

  3. Update the text message on the right side of the screen to display which operation has occurred.

Implementation of the script to connect with the UI

We'll execute all the steps mentioned above when the web page is loaded. Here's the implementation:

Get hands-on with 1400+ tech skills courses.