Skip to content

Commit af64237

Browse files
Pragya TripathiPragya Tripathi
Pragya Tripathi
authored and
Pragya Tripathi
committed
Initial commit
0 parents  commit af64237

File tree

2,237 files changed

+321275
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

2,237 files changed

+321275
-0
lines changed

‎bootstrap.min.css

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<link rel="stylesheet" href="bootstrap.min.css">
7+
<link rel="stylesheet" href="main.css">
8+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
9+
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
10+
<script src="/socket.io/socket.io.js"></script>
11+
</head>
12+
<body>
13+
<div id="username">
14+
<h1>Welcome to FSE Chatroom</h1>
15+
<div class="progress">
16+
<div class="progress-bar" style="width: 100%">
17+
</div>
18+
</div>
19+
<form id="usernameForm" action="">
20+
<input class="form-control" type="text" id="usernameInput" autocomplete="off" placeholder="Enter your name"/>
21+
<button class="btn btn-primary btn-lg">Enter</button>
22+
<div id="error" class="text-danger"></div>
23+
</form>
24+
</div>
25+
<div id="message" style="display: none;">
26+
<div class="header">
27+
<div id="headerTitle">FSE Chatroom</div>
28+
<div class="logout-button">
29+
<a id="logoutButton">Logout</a>
30+
</div>
31+
</div>
32+
<div id="headerSeparator"></div>
33+
<div id="scrollingMessages">
34+
<ul id="messages"></ul>
35+
</div>
36+
<form id="messageForm" action="">
37+
<input class="form-control input-lg" type="text" id="messageInput" autocomplete="off" />
38+
<div id="sendbutton"><button class="btn btn-primary btn-lg">Send</button></div>
39+
</form>
40+
</div>
41+
<script>
42+
var socket = io();
43+
44+
$('input#usernameInput').keypress(function() {
45+
$('#error').text('');
46+
$(this).focus();
47+
});
48+
49+
$('#usernameForm').submit(function(){
50+
var user = $('#usernameInput').val();
51+
console.log('user: ' + user);
52+
if (user.trim().length > 0) {
53+
console.log('emitting user entered');
54+
socket.emit('user entered', user);
55+
} else {
56+
$('#error').text('You must enter a valid username');
57+
}
58+
$('#usernameInput').val('');
59+
return false;
60+
});
61+
62+
socket.on('user validated', function(username, rows){
63+
$('#username').hide('slow');
64+
$('#message').show('slow');
65+
rows.forEach(function(row){
66+
$('#messages').append($('<li>').html('<div class="msg-container"><div class="username">' +row.username + '</div><div class="timestamp">' + new Date(Number(row.timestamp)) + '</div></div><div class="msg"> ' +row.message + '</div>'));
67+
});
68+
});
69+
70+
socket.on('username error', function(error){
71+
$('#error').text(error);
72+
});
73+
74+
$('#messageForm').submit(function() {
75+
var message = $('#messageInput').val();
76+
if (message.trim().length > 0) {
77+
socket.emit('chat message', {
78+
name : '',
79+
msg : message,
80+
timestamp : Date.now()
81+
});
82+
}
83+
$('#messageInput').val('');
84+
return false;
85+
});
86+
87+
$('#logoutButton').click(function(){
88+
socket.emit('logout',{});
89+
});
90+
socket.on('user login', function(message) {
91+
$('#messages').append($('<li>').html('<div class="broadcast">'+ message + '</div>'));
92+
});
93+
socket.on('user exit', function(message) {
94+
$('#messages').append($('<li>').html('<div class="broadcast">'+ message + '</div>'));
95+
});
96+
socket.on('chat message', function(data){
97+
$('#messages').append($('<li>').html('<div class="msg-container"><div class="username">' +data.name + '</div><div class="timestamp">' + new Date(Number(data.timestamp)) + '</div></div><div class="msg"> ' +data.msg + '</div>'));
98+
});
99+
socket.on('logged out', function(){
100+
$('#username').show('slow');
101+
$('#message').hide('slow');
102+
});
103+
104+
</script>
105+
</body>
106+
</html>

‎main.css

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
body {
2+
font-size: 13px;
3+
background: #0EBFE9 no-repeat;
4+
/*font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;*/
5+
}
6+
7+
#usernameForm {
8+
text-align: center;
9+
min-width: 280px;
10+
max-width: 3000px;
11+
clear:both;
12+
}
13+
14+
.form-control {
15+
display: unset;
16+
}
17+
18+
#usernameForm input {
19+
width: 50%;
20+
padding: 10px;
21+
height: 50px;
22+
margin: 20px;
23+
display: inline;
24+
}
25+
26+
#messageForm {
27+
text-align: center;
28+
padding: 3px;
29+
bottom: 0;
30+
clear:both;
31+
position: absolute;
32+
width: 100%;
33+
}
34+
35+
#messageForm input {
36+
border: 0;
37+
padding: 10px;
38+
margin-right: .5%;
39+
}
40+
41+
#sendbutton {
42+
padding: 5px 0;
43+
}
44+
45+
#messages {
46+
list-style-type: none;
47+
margin: 0;
48+
padding: 10px;
49+
}
50+
#scrollingMessages {
51+
overflow: scroll;
52+
height: 400px;
53+
}
54+
#messages li {
55+
padding: 5px 10px;
56+
background-color: #fff;
57+
opacity: 0.6;
58+
border-radius: 10px;
59+
margin: 5px 0 5px 0;
60+
float: left;
61+
width: 100%;
62+
}
63+
64+
h1 {
65+
color: white;
66+
font-size: 48px;
67+
padding:20px 20px 20px 0;
68+
text-align: center;
69+
min-width: 280px;
70+
max-width: 3000px;
71+
clear:both;
72+
}
73+
74+
#headerSeparator {
75+
width: 100%;
76+
display: block;
77+
background-color: #d9230f;
78+
border-radius: 5px;
79+
box-shadow: 2px;
80+
height: 10px;
81+
margin: 20px 0 0 0;
82+
}
83+
84+
.header {
85+
min-width: 280px;
86+
max-width: 3000px;
87+
font-size: 28px;
88+
padding:20px;
89+
display: block;
90+
}
91+
92+
#headerTitle {
93+
float: left;
94+
}
95+
96+
.logout-button {
97+
color: #000;
98+
float: right;
99+
position: inherit;
100+
}
101+
102+
#logoutButton {
103+
float: right;
104+
}
105+
106+
.broadcast {
107+
text-align: center;
108+
color: #d9230f;
109+
}
110+
111+
.username {
112+
float: left;
113+
font-size: 14px;
114+
}
115+
116+
.timestamp {
117+
float: right;
118+
font-size: 12px;
119+
}
120+
121+
.msg {
122+
font-size: 16px;
123+
color: #000;
124+
display: inline-table;
125+
width: 100%;
126+
}

‎messages.db

2 KB
Binary file not shown.

0 commit comments

Comments
 (0)