Skip to content

Commit 395785c

Browse files
thinkswellthinkswell
authored
Merge pull request thinkswell#167 from amintai/chat-app-amin
chat app created
2 parents 7c2a07b + 6cd086b commit 395785c

File tree

11 files changed

+560
-0
lines changed

11 files changed

+560
-0
lines changed

‎chat-app/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎chat-app/AminTai/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "chat-application",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "node src/index.js",
8+
"dev": "nodemon src/index.js"
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"dependencies": {
14+
"bad-words": "^3.0.1",
15+
"express": "^4.17.1",
16+
"nodemon": "^2.0.4",
17+
"socket.io": "^2.3.0"
18+
}
19+
}

‎chat-app/AminTai/public/chat.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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 id="sidebar" 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" required autocomplete="off">
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">{{username}}</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">{{username}}</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 id="sidebar-template" type="text/html">
49+
<h2 class="room-title">{{room}}</h2>
50+
<h3 class="list-title">Users</h3>
51+
<ul class="users">
52+
{{#users}}
53+
<li>{{username}}</li>
54+
{{/users}}
55+
</ul>
56+
</script>
57+
58+
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
59+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
60+
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>
61+
<script src="/socket.io/socket.io.js"></script>
62+
<script src="/js/chat.js"></script>
63+
</body>
64+
65+
</html>

‎chat-app/AminTai/public/css/styles.css‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
/* General Styles */
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
html {
10+
font-size: 16px;
11+
}
12+
13+
input {
14+
font-size: 14px;
15+
}
16+
17+
body {
18+
line-height: 1.4;
19+
color: #333333;
20+
font-family: Helvetica, Arial, sans-serif;
21+
}
22+
23+
h1 {
24+
margin-bottom: 16px;
25+
}
26+
27+
label {
28+
display: block;
29+
font-size: 14px;
30+
margin-bottom: 8px;
31+
color: #777;
32+
}
33+
34+
input {
35+
border: 1px solid #eeeeee;
36+
padding: 12px;
37+
outline: none;
38+
}
39+
40+
button {
41+
cursor: pointer;
42+
padding: 12px;
43+
background: #7C5CBF;
44+
border: none;
45+
color: white;
46+
font-size: 16px;
47+
transition: background .3s ease;
48+
}
49+
50+
button:hover {
51+
background: #6b47b8;
52+
}
53+
54+
button:disabled {
55+
cursor: default;
56+
background: #7c5cbf94;
57+
}
58+
59+
/* Join Page Styles */
60+
61+
.centered-form {
62+
background: #333744;
63+
width: 100vw;
64+
height: 100vh;
65+
display: flex;
66+
justify-content: center;
67+
align-items: center;
68+
}
69+
70+
.centered-form__box {
71+
box-shadow: 0px 0px 17px 1px #1D1F26;
72+
background: #F7F7FA;
73+
padding: 24px;
74+
width: 250px;
75+
}
76+
77+
.centered-form button {
78+
width: 100%;
79+
}
80+
81+
.centered-form input {
82+
margin-bottom: 16px;
83+
width: 100%;
84+
}
85+
86+
/* Chat Page Layout */
87+
88+
.chat {
89+
display: flex;
90+
}
91+
92+
.chat__sidebar {
93+
height: 100vh;
94+
color: white;
95+
background: #333744;
96+
width: 225px;
97+
overflow-y: scroll
98+
}
99+
100+
/* Chat styles */
101+
102+
.chat__main {
103+
flex-grow: 1;
104+
display: flex;
105+
flex-direction: column;
106+
max-height: 100vh;
107+
}
108+
109+
.chat__messages {
110+
flex-grow: 1;
111+
padding: 24px 24px 0 24px;
112+
overflow-y: scroll;
113+
}
114+
115+
/* Message Styles */
116+
117+
.message {
118+
margin-bottom: 16px;
119+
}
120+
121+
.message__name {
122+
font-weight: 600;
123+
font-size: 14px;
124+
margin-right: 8px;
125+
}
126+
127+
.message__meta {
128+
color: #777;
129+
font-size: 14px;
130+
}
131+
132+
.message a {
133+
color: #0070CC;
134+
}
135+
136+
/* Message Composition Styles */
137+
138+
.compose {
139+
display: flex;
140+
flex-shrink: 0;
141+
margin-top: 16px;
142+
padding: 24px;
143+
}
144+
145+
.compose form {
146+
display: flex;
147+
flex-grow: 1;
148+
margin-right: 16px;
149+
}
150+
151+
.compose input {
152+
border: 1px solid #eeeeee;
153+
width: 100%;
154+
padding: 12px;
155+
margin: 0 16px 0 0;
156+
flex-grow: 1;
157+
}
158+
159+
.compose button {
160+
font-size: 14px;
161+
}
162+
163+
/* Chat Sidebar Styles */
164+
165+
.room-title {
166+
font-weight: 400;
167+
font-size: 22px;
168+
background: #2c2f3a;
169+
padding: 24px;
170+
margin: 40px;
171+
}
172+
173+
.list-title {
174+
font-weight: 500;
175+
font-size: 18px;
176+
margin-bottom: 4px;
177+
padding: 12px 24px 0 24px;
178+
}
179+
180+
.users {
181+
list-style-type: none;
182+
font-weight: 300;
183+
padding: 12px 24px 0 24px;
184+
}

‎chat-app/AminTai/public/css/styles.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎chat-app/AminTai/public/img/favicon.png‎

1.44 KB
Loading

‎chat-app/AminTai/public/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Chat App</title>
5+
<link rel="icon" href="/img/favicon.png">
6+
<link rel="stylesheet" href="/css/styles.min.css">
7+
</head>
8+
<body>
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>
19+
</div>
20+
</div>
21+
</body>
22+
</html>

0 commit comments

Comments
 (0)