Hi everyone in this cast, we're going to be working on the display room link function which is called up here, but not as yet declared. So let's go ahead and declare the function, which we've called online number nine. Uh And the name of the function is display room link. And it takes room I. D. As an argument and all that we are going to do right now is just console log the room I. D. The display room link location. And then let's use this template, variable room I. D. And there you go. So I'm going to go ahead and control s and for now, all that we're doing is just console logging the room I. D. Argument, which is passed to the display room link function from the get room link function, which we worked on up here. So if I go here and go to chatty chat and now I'm just going to check the console, so go down click on the button and there you go. So we've got the room link location. So this is the room chat rooms I. D. Now coming back to our code editor, let's do a bit of dom manipulation because remember, get room link, This function has gotten the chat room link or I. D. From the back end and now it's at the front end, but it's not actually being inserted into the dom. So, let's go ahead and work on that. And first off, I'm just going to create a diV here. So let deV is equal to document dot create element. And I'm creating a div element. And after that I'm also going to create an anchor tag. So let a is equal to document dot create element. And I'm creating an anchor tag. So okay, now let's work on the next part which is let link location. So we are now declaring another local variable called link location whose value is window dot location dot origin. And to this we will add the path and plus room I. D. Okay, so we've declared a variable called link location whose value is the location of the windows origin and the origin property returns the protocol, host name and port number of A U R L. And appended to that is the room I. D. So we're in fact we're just constructing a u r L. Now after that I am going to write a dot h ref So we are setting the h ref attribute off the anchor tag to be the value of the link, location variable. And next we want to open it up in a new tab so we can set its target attribute to be Mhm underscored blank and just forgot that equal to sign. Okay, after that we also give the anchor tag and I. D. So that we can select it and style it in CSS. So this is already being done in CSS in the CSS uh in the style dot CSS style sheet. So we say well dot sorry, anchor dot um I d. Is equal to and I believe the I. D. Is a room dash link. And after that um we put let's also give it some inner text otherwise we don't actually see anything. So let's use the inner text property and we'll say join. Okay? And next we put the value of the link location variable to be the inner html of the dev. So we're going to say, well, dave dot inner html is equal to link location. And once that is done, we're going to upend the anchor tag to the dev which is referenced by the variable deV. So we're going to say they've got upended child and to this, we're appending the anchor tag. So in html we would have just made a div tag and then nested within the div tag. We would have had an anchor tag since we're doing this dynamically. This is how you can do it by using a pen child. Inner html. And then I'm going to control s to save this and now let's try this out. So going to close the console and create Okay, so let's see what's going on here. Um This seems fine. So let me maybe I have to restart this and know this seems okay as well, so let's see what's going on here. Um link location. Everything seems to be fine here. Window dot location dot origin. And I have the spare room link function and we could comment this out. We don't need it. And uh let's try this again. Mhm. I wonder what is happening here. So we've created a create element, It creates element um lead link location. I wonder if maybe we console dot link location but let's actually maybe the reason why this is not happening is uh the divx is not appended to the body of the document is so this is a possible reason, so document dot body dot upended child, I do believe this could be the reason. And let's go ahead and check this out and hope all works okay. So there you go. It is being upended down here, it should be appended instead. Uh down below the button but I'm sure we can work on that. And now if I click on the join button which you can't see because it's in white. So let's go ahead and actually just fix this up. So go to style dot CSS and now I will room link. There you go. So why don't we change the color to something else? Great control. S and now create and there you go. So now we have this joint link and we also have the whole U R. L. Which you can copy, paste and open up in a new browser tab or basically you can just click on this joint link and what it does is that it opens up this meeting room page and right now the meeting room page is in fact static, so nothing much going on here, For example, if I type in something, nothing is gonna happen. We will work on that part next. But what you should see is basically when we make, when we click on, create and then click on, join, look at the U. R. L. In the address bar. So we've appended the room I. D. To our local window origin. So that's pretty much it for this cast in the next cast. We will work on using the socket dot io Library, which allows users to chat with one another. And so far in our app, we've created a room and we've redirected a user to a room with a unique uh unique I. D.