Search⌘ K
Home
Courses
Building Web-Based Games and Utility Projects Using JavaScript

Connect the Chat Handler with UI

Explore how to connect your JavaScript ChatHandler class to a web page UI to dynamically generate and delete chat messages. Understand event listeners, DOM manipulation, and managing chat data with arrays and linked lists to build a real-time chat interface similar to popular messaging apps.

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