Now our send location message is still going to look like trash. If I click on Send Location, it's going to take a few seconds to get the job done and here it is! It's unstyled because it is not using a template. What we're going to do is add a template for the newLocationMessage. We're going to set up the markup for the template, and then we'll be to render it and pass in the necessary values.

Over inside index.html we can get started doing this by creating a second template. Now the second template is going to be pretty similar to the first. We can actually go ahead and duplicate this template by copying and pasting it next. All we need to do is change the id attribute from message-template to location-message-template:

<script id="location-message-template" type="text/template">
  <li class="message">
    <div class="message__title">
    <h4>{{from}}</h4>
    <span>{{createAt}}</span>
  </div>
  <div class="message__body">
    <p>{{text}}</p>
  </div>
</li>
</script>

Now the title area is going to be the same. We're going to have our from property as well as createdAt; it's the body that's going to change.

Instead of rendering a paragraph with the text. We're going to render a paragraph that has the link using an anchor tag. Now to add that anchor tag, we're going to add the a tag. Then inside the href attribute, we're going to be injecting the value. This is going to be the URL that gets passed from server to client. We're going to add our equal signs, our curly braces, and the value we want to add is url:

<div class="message__body">
  <p>
    <a href="{{url}}"
  </p>
</div>

Next up, we are going to carry over that target property, setting an equal to _blank, which will open up the link in a new tab. And finally, we can go ahead and close the anchor tag, adding the text for the link inside. Some good text for this link would be My current location, just like we have right now:

<script id="location-message-template" type="text/template"> 
  <li class="message"> 
    <div class="message__title"> 
      <h4>{{from}}</h4> 
      <span>{{createdAt}}</span> 
    </div> 
    <div class="message__body"> 
      <p> 
        <a href="{{url}}" target="_blank">My current location</a> 
      </p> 
    </div> 
  </li> 
</script> 

This is all we need to do for the template. Next, we are going to wire up all of this inside of index.js, which means inside newLocationMessage, you want to do something pretty similar to what we have previous in newMessage. Instead of rendering everything with jQuery, you're going to render the template, passing in the necessary data, text, URL, and the formatted timestamp.