![Screenshot_23.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519839691/jfnxiv51jobtunknlaxw.png)

This tutorial is a continuation of the first part of the tutorial series to create a simple chat application with node.js, so if you have not followed the first part of the tutorial, I suggest to follow it first, so you are not confused to follow this second part tutorial, I will add a lot of User Experience (UX), for our chat app more interesting, we just start the tutorial.

#### What Will I Learn?
- Add Style and Add Time
- Add Username in Chat

#### Requirements
- Install nodejs 
- Javascript Intermediate,
- Basic Css , Html

#### Difficulty
- Intermediate

### Add Style and Add Time
Now we will add two things first time and add style to be more clear between the previous chat, and add some  unique in the chat.  
<li><b>Styling Chat</b></li>
I will remove the style list first to remove the black sphere <code>list-style:none;</code>, and give <code>width:35%;</code> , So I like to share the two chats, between chat before ny with the current chat. 
and I will also give background # f5f5f5 in <code>< body ></code> to make the chat balloon look more clear
<pre>
<code>
body{
	background:#F5F5F5;
}
#chats li{
	margin: 10px 0px;
	width: 35%;
	list-style: none;
}</code>
</pre>

![Screenshot_11.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519833027/dzcnksoizuusok5hvde6.png)


Next , I will make a background between the chat before and the current chat, and I will divide the two between the chat. We can use Css <b>: nth-child (even)</b> or <b>: nth-child (odd)</b>.

<b>Chat List Odd</b>
<pre>
<code>
 #chats li:nth-child(odd){
   background: white;
    clear: both;
    color: #4a4a4a;
    padding: 10px 20px;
    border-radius: 5px;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 5px 6px -6px #777;
}
</code>
</pre>

<b>Chat List Even</b>
<pre>
<code>
#chats li:nth-child(even){
	background: #DCF8C6;
	color: #4a4a4a;
	float: right;
	padding: 10px 20px;
       border-radius: 5px;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 5px 6px -6px #777;
}
</code>
</pre>

![Screenshot_12.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519833664/mspwhwnar8ivq4xtid1e.png)

and we will see the result like this, I give <code>float: right</code> there is list Even and clean the float effect<code>clear:both;</code> in list Odd, it is important to do to the list is not messy

<li><b>Add Time</b></li>
Next, to add User Experience , I will add chat time . I will use momen.js to make time format easier to read. We have to install momen.js first.
<br>
<code>npm install moment</code>

![Screenshot_13.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519836312/rf9gswqthkwhiwqa3s8d.png)

And for its use like this, in file <b>server.js</b> .
<code>var moment = require('moment');</code> :  We will import moment .
<code>socket.emit('newMessage',msg, moment().fromNow());</code> : 
Now we will pass two variables, the first variable is the message and the second is the time.
And on its frontend we can capture the parameters that are in the passing of the backend and bring it up.
<b>html</b>
``` html
socket.on('newMessage',function(msg,date){
		 $("#chats").append("<li>"+msg+"<span>"+date+"</span></li>");
	});
```
<br><br>
<b>Css</b>
I will styling the time <code>< span ></code> like this :
<pre>
<code>
#chats li > span{
    color: grey;
    font-size: 17px;
}
</code>
</pre>

![Screenshot_15.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519837453/aws2kho5b7lcwouflnf0.png)

![Screenshot_16.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519837535/lpnbln4t7gbkfgnlzga7.png)

![Screenshot_17.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519837544/ksgrbadohvr3jzllermw.png)

### Add Username in Chat
We see our chat app, there is no username chat, so we will not know who wrote that chat, well in this section I will add the name of the sender of the message.  My first step will be to add name input in our application.
<b>Html</b>
``` html
<div class="wrapper-chat">
				<form>
					<input class="input-username" type="text" id="username" placeholder="Name">
					<input class="input-chat" type="text" id="text_chat" placeholder="Message">
					<button class="button-chat">Send</button>
				</form>
			</div>
```
I added the input name <code>< input class="input-username" type="text" id="username" placeholder="Name" ></code> .

<b>Css</b>
<pre>
<code>
.input-chat{
	width: 50%;
    height: 65px;
    border-radius: 40px;
    display: inline-block;
    border: none;
    padding: 0px 20px;
    font-size: 30px;
    color: #4a4a4a;
}
.input-username{
	width: 14%;
	height: 65px;
    border-radius: 40px;
    display: inline-block;
    border: none;
    padding: 0px 20px;
    font-size: 30px;
    color: #4a4a4a;
}
.button-chat{
	width: 20%;
    height: 65px;
    display: inline-block;
    float: right;
    background: white;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    color: #0770cd;
    font-weight: bold;
}
</code>
</pre>

![Screenshot_19.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519838503/zvhxd6m7uat739mx78sk.png)

Next step, we will add username in chat. The way is quite easy, we just need to pass the username to the backend and merge in the <b>msg</b> parameter . 
<b>Javascript</b>
``` html
<script type="text/javascript">
	var socket = io();
	$('form').submit(function(){
		var username = $('#username').val();
		socket.emit('newMessage',username +'<br>'+ $('#text_chat').val());
		$('#text_chat').val('');
                $('#username').val('')
		return false
	});
	socket.on('newMessage',function(msg,date){
		 $("#chats").append("<li>"+msg+" <span>"+date+"</span></li>");
	});
</script>
```
<code>var username = $('#username').val();</code> : Store the value of the input <b># username</b>  into the <b>var username</b> variable.
<code>socket.emit('newMessage',username +'<br>'+ $('#text_chat').val());</code> :  Combining username and message <b>username +'<br>'+ $('#text_chat').val()</b> in passing into parameter <b>msg</b>
<code>$('#text_chat').val('');</code> : To empty Value Input Id <b># text_chat</b> after Submitted.
<code>$('#username').val('');</code> : To empty Value Input Id <b># username</b> after Submitted.
<pre>
<code>
socket.on('newMessage',function(msg,date){
		 $("#chats").append("<li>"+msg+" <span>"+date+"</span></li>");
	});
</code>
</pre>
Append the  message on the frontend. 

![Screenshot_20.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519839485/qxio0xk5xdfwqdxc8kb3.png)

![Screenshot_21.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519839513/imqjcrnk3bujfyv7xfmi.png)

![Screenshot_22.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519839592/n7sdzw0cjgbluflfptgw.png)

![Screenshot_23.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1519839701/lfkoeaqzlbvcoqge6pl4.png)

If there is no error, then we will see the results as above, the end of this tutorial in this second part, we can add a style and give a better UX to the user. in the next section I will add other features. hopefully this tutorial can help you. thank you

#### Curriculum
- https://utopian.io/utopian-io/@alfarisi94/create-a-simple-chat-app-using-node-js-part1

    

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@alfarisi94/create-a-simple-chat-app-using-node-js-part2">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>