Okay, now remember that since socket dot io is bi directional, we have to handle the client side events and service side events for sending and receiving a chat messages. So let's work inside of the socket dot Js for now. And first, what we're going to do is we're going to reference to dom elements with an I. D. Of let's go to room dot html. And we're going to be referencing to elements with the idea of message container and message form. So, message container is where all the messages are going to be displayed. And on our web page on the left side, this is the diff with I. D. Of message container on the left side. And out here on the right side where we have this input box and the send button. This is within the div, which has an idea of message form. So let's go back to socket dot Js. And we're going to say, well, let form is equal to document dot get element by ID D. Oops get element by I. D. And the I. D. Out here is message dash form. So out here we are getting this um element. Right? So we're not getting the diff. But actually it's the form I. D. So the form is inside a div. And the form has an idea of message form. And then we are going to say, well, let messages is equal to document dot get element by ID D again. And this time the I D out here is let's go back. It's this one message dot container. So out here, I'm going to say message dash container. Okay, so that's done. Now let's work on a function which is going to insert a user's message in the message container and we can call this function ah insert message. And this function is going to take data as a program. A data out here refers to basically whatever the user typed in. So the strength and let's close this function. So end of a function right now within this function, let's work on a pending the data to the message container. So what we're going to do is number one, we're going to create a div element and a span element. And we'll append the span element whose inner html is the message um to this container. The div that we will create and then we will append this div this wrapper div to the message container deaf. Okay. So I'm going to say let rapper is equal to document dot create element. And out here I'm creating the element a diff. And after that I'm going to create um a span element. So I'll just call it message document dot create element. And I'm creating a span. And out here, I'm going to basically what we have to do is we have to now um we're going to say message. Got inner text. So you can use inner text or inner html. I'm just going to say inner text is equal to the data. Okay, so data is an object which has a message key. Right? And after that I'm going to say, well, wrapper dot append child. And what am I a pending? Will I have to append the span whose inner html is the user's message? So this is called msg that's the span element. And we'll also show the current time that the message was sent. So we'll say let the time is equal to let's say document dot create another element. And we'll just create another span. And now let's format the time in a 24 hours format with only one with only the hour and minute showing. So we don't need to show seconds and all of that. So inner text is equal to new dates. So we'll use the data object and out here it will take the time of property of the data object and which is this program passed to the insert message function. And then I'll just use this method to locate a little um time string. And then basically we have to do a bit of formatting and I'll just say e en dash us. And um out here, what I can do is also pass in a couple of optional uh cramps so our 12 falls and then comma our is two digits only show two digits and then come up the same thing for a minute. Rich should oops. What is this too? It should only be two digit. And then a minute is basically also to dash digit. right? Um, so everything looks fine out here. And lastly, let's append the time to the wrapper DiV. And then we'll append the newly made wrapper Div which is created for each message to the message container which is referenced by this variable out here called messages. So we're just doing a bit of dom manipulation here. So out here I'm going to say well wrapper dot append child and I'm a pending the time. So I've I've already upended this message which refers to the chat message. Then I'm going to also upend the current time that the chat chat message was sent. And then lastly we're going to say, well messages, so message continue append a child and what am I a pending? Well, I'm going to upend the rapper. Yes. Right. Um, so let's just go over this. Let's make sure there's no ceiling mistakes, no syntax errors. Um, and so far everything looks fine except here. This is also supposed to be in coats and okay, so that's all for now. And in the next part we'll work on handling the form submission. So we'll work on this part which is the send button