emadehsan/Guide To Chat Room

## Guide To Chat Room

Start with:
Create a file `index.html` and paste the following code
```
<!doctype html>
<html>

<head>
  <title>Chat Room</title>
</head>

<body>

  <div class="chat" id="app">
    Chat Room
  </div>

</body>

</html>

```

Include VueJS Script in the Header
```
<script src="https://unpkg.com/vue"></script>
```

Create folders `public` & `public/js`

Create file `master.js`
```
console.log('master included')
```

In `index.html`, at the end just above closing `</body>`, include our local `master.js`
```
<script src="js/master.js"></script>
```

In `master.js`, initialize the VueJS app
```
let app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello World'
  }
})
```

Replace 'Chat Room' with heading:
```
<div class="chat-history">
  <h1><i class="fa fa-comments"></i> Chat Room</h1>
</div>
```

Include Fontawesome
```
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
```

Add `master.css` CSS from https://raw.githubusercontent.com/emadehsan/chat-room/master/public/css/master.css
in `css/master.css`

Include the Font
```
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
```

Include locals css file
```
<link rel="stylesheet" href="css/master.css">
```

## VueJS Loops
Include following code below Header
```
<br>
<hr>
<br>

<ul class="chat-ul">

  <div v-for="m in messages">

    <li>
      <h3><i class="fa fa-circle"></i> {{ m.by }}</h3>
      <p> {{ m.text }} </p>

    </li>

    <br>
  </div>

</ul>
```

## Add VueJS Data member `messages`
...

## Add a VueJS Method date formatting
`humanReadable(date)`

Call it from DOM:
```
<div class="gray"> {{ humanReadable(m.when) }} </div>
```


## Add Send Box
```
<div id="send">
  <input autofocus id="msg" v-model="msg" autocomplete="off" /><button v-on:click="send"><i class="fa fa-send"></i> Send</button>
</div>
```

## add send method

	Start with:
	Create a file `index.html` and paste the following code
	```
	<!doctype html>
	<html>

	<head>
	<title>Chat Room</title>
	</head>

	<body>

	<div class="chat" id="app">
	Chat Room
	</div>

	</body>

	</html>

	```

	Include VueJS Script in the Header
	```
	<script src="https://unpkg.com/vue"></script>
	```

	Create folders `public` & `public/js`

	Create file `master.js`
	```
	console.log('master included')
	```

	In `index.html`, at the end just above closing `</body>`, include our local `master.js`
	```
	<script src="js/master.js"></script>
	```

	In `master.js`, initialize the VueJS app
	```
	let app = new Vue({
	el: '#app',
	data: {
	msg: 'Hello World'
	}
	})
	```

	Replace 'Chat Room' with heading:
	```
	<div class="chat-history">
	<h1><i class="fa fa-comments"></i> Chat Room</h1>
	</div>
	```

	Include Fontawesome
	```
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	```

	Add `master.css` CSS from https://raw.githubusercontent.com/emadehsan/chat-room/master/public/css/master.css
	in `css/master.css`

	Include the Font
	```
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	```

	Include locals css file
	```
	<link rel="stylesheet" href="css/master.css">
	```

	## VueJS Loops
	Include following code below Header
	```
	<br>
	<hr>
	<br>

	<ul class="chat-ul">

	<div v-for="m in messages">

	<li>
	<h3><i class="fa fa-circle"></i> {{ m.by }}</h3>
	<p> {{ m.text }} </p>

	</li>

	<br>
	</div>

	</ul>
	```

	## Add VueJS Data member `messages`
	...

	## Add a VueJS Method date formatting
	`humanReadable(date)`

	Call it from DOM:
	```
	<div class="gray"> {{ humanReadable(m.when) }} </div>
	```


	## Add Send Box
	```
	<div id="send">
	<input autofocus id="msg" v-model="msg" autocomplete="off" /><button v-on:click="send"><i class="fa fa-send"></i> Send</button>
	</div>
	```

	## add send method