Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit e0f2eeb

Browse files
author
Andrew Mead
committed
Lesson: Join Page
1 parent 760cbbf commit e0f2eeb

File tree

2 files changed

+65
-40
lines changed

2 files changed

+65
-40
lines changed

‎chat-app/public/chat.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Chat App</title>
6+
<link rel="icon" href="/img/favicon.png">
7+
<link rel="stylesheet" href="/css/styles.min.css">
8+
</head>
9+
10+
<body>
11+
<div class="chat">
12+
<div class="chat__sidebar">
13+
14+
</div>
15+
<div class="chat__main">
16+
<div id="messages" class="chat__messages"></div>
17+
18+
<div class="compose">
19+
<form id="message-form">
20+
<input name="message" placeholder="Message">
21+
<button>Send</button>
22+
</form>
23+
<button id="send-location">Send location</button>
24+
</div>
25+
</div>
26+
</div>
27+
28+
<script id="message-template" type="text/html">
29+
<div class="message">
30+
<p>
31+
<span class="message__name">Some User Name</span>
32+
<span class="message__meta">{{createdAt}}</span>
33+
</p>
34+
<p>{{message}}</p>
35+
</div>
36+
</script>
37+
38+
<script id="location-message-template" type="text/html">
39+
<div class="message">
40+
<p>
41+
<span class="message__name">Some User Name</span>
42+
<span class="message__meta">{{createdAt}}</span>
43+
</p>
44+
<p><a href="{{url}}" target="_blank">My current location</a></p>
45+
</div>
46+
</script>
47+
48+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
49+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
50+
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>
51+
<script src="/socket.io/socket.io.js"></script>
52+
<script src="/js/chat.js"></script>
53+
</body>
54+
55+
</html>

‎chat-app/public/index.html

Lines changed: 10 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -6,47 +6,17 @@
66
<link rel="stylesheet" href="/css/styles.min.css">
77
</head>
88
<body>
9-
<div class="chat">
10-
<div class="chat__sidebar">
11-
12-
</div>
13-
<div class="chat__main">
14-
<div id="messages" class="chat__messages"></div>
15-
16-
<div class="compose">
17-
<form id="message-form">
18-
<input name="message" placeholder="Message">
19-
<button>Send</button>
20-
</form>
21-
<button id="send-location">Send location</button>
22-
</div>
9+
<div class="centered-form">
10+
<div class="centered-form__box">
11+
<h1>Join</h1>
12+
<form action="/chat.html">
13+
<label>Display name</label>
14+
<input type="text" name="username" placeholder="Display name" required>
15+
<label>Room</label>
16+
<input type="text" name="room" placeholder="Room" required>
17+
<button>Join</button>
18+
</form>
2319
</div>
2420
</div>
25-
26-
<script id="message-template" type="text/html">
27-
<div class="message">
28-
<p>
29-
<span class="message__name">Some User Name</span>
30-
<span class="message__meta">{{createdAt}}</span>
31-
</p>
32-
<p>{{message}}</p>
33-
</div>
34-
</script>
35-
36-
<script id="location-message-template" type="text/html">
37-
<div class="message">
38-
<p>
39-
<span class="message__name">Some User Name</span>
40-
<span class="message__meta">{{createdAt}}</span>
41-
</p>
42-
<p><a href="{{url}}" target="_blank">My current location</a></p>
43-
</div>
44-
</script>
45-
46-
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
47-
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
48-
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>
49-
<script src="/socket.io/socket.io.js"></script>
50-
<script src="/js/chat.js"></script>
5121
</body>
5222
</html>

0 commit comments

Comments
 (0)