Live Chat Application Lab

Live Chat Application Lab

In this lab, you will create a basic live chat application using HTML and JavaScript. The user should be able to enter their username and message, and the chatbox will display the messages along with the sender's username. For simplicity, this lab does not involve online chat platforms or a back-end server. The messages will appear in the same browser window for demonstration purposes.

Steps

1. Create a text input with id username, you can add a placeholder text of your choice.

2. Create a textarea element having the id message with a placeholder text of your choice.

3. Create a button with id send-btn containing text Send

4. Create a div with id chatbox , this is where the chat messages will be displayed.

5. Create a click event listener for the send-btn

6. The callback function of the event listener should get the text for the input elements #username and #message, create a new div element and with username text having a strong tag followed by : with the message. Append the newly created div element to the #chatbox element

Make sure to use the correct element ids specified in the challenges.