Skip to content

Commit fed08c4

Browse files
shaghayeghfarshaghayeghfar
committed
Add chat app
1 parent 67bb635 commit fed08c4

21 files changed

Lines changed: 1209 additions & 0 deletions

File tree

‎chat-app/.gitattributes‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/mvnw text eol=lf
2+
*.cmd text eol=crlf

‎chat-app/.gitignore‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
HELP.md
2+
target/
3+
.mvn/wrapper/maven-wrapper.jar
4+
!**/src/main/**/target/
5+
!**/src/test/**/target/
6+
7+
### STS ###
8+
.apt_generated
9+
.classpath
10+
.factorypath
11+
.project
12+
.settings
13+
.springBeans
14+
.sts4-cache
15+
16+
### IntelliJ IDEA ###
17+
.idea
18+
*.iws
19+
*.iml
20+
*.ipr
21+
22+
### NetBeans ###
23+
/nbproject/private/
24+
/nbbuild/
25+
/dist/
26+
/nbdist/
27+
/.nb-gradle/
28+
build/
29+
!**/src/main/**/build/
30+
!**/src/test/**/build/
31+
32+
### VS Code ###
33+
.vscode/

‎chat-app/.mvn/wrapper/maven-wrapper.properties‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
wrapperVersion=3.3.4
2+
distributionType=only-script
3+
distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.16/apache-maven-3.9.16-bin.zip

‎chat-app/frontend/index.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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.0">
6+
7+
<title>Chat App</title>
8+
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
14+
<div class="chat-container">
15+
16+
<header class="chat-header">
17+
<h1>Chat App</h1>
18+
</header>
19+
20+
<main id="messages" class="messages"></main>
21+
22+
<div id="feedback" class="feedback"></div>
23+
24+
<footer class="message-area">
25+
26+
<input
27+
type="text"
28+
id="usernameInput"
29+
placeholder="Your name..."
30+
autocomplete="off"
31+
>
32+
33+
<input
34+
type="text"
35+
id="messageInput"
36+
placeholder="Write a message..."
37+
autocomplete="off"
38+
>
39+
40+
<button id="sendButton">Send</button>
41+
42+
</footer>
43+
44+
</div>
45+
46+
<script src="script.js"></script>
47+
48+
</body>
49+
</html>

‎chat-app/frontend/script.js‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
const usernameInput = document.getElementById("usernameInput");
2+
const messageInput = document.getElementById("messageInput");
3+
const sendButton = document.getElementById("sendButton");
4+
const messagesDiv = document.getElementById("messages");
5+
const feedback = document.getElementById("feedback");
6+
7+
8+
sendButton.addEventListener("click", sendMessage);
9+
10+
11+
messageInput.addEventListener("keydown", function (event) {
12+
13+
if (event.key === "Enter") {
14+
event.preventDefault();
15+
sendMessage();
16+
}
17+
18+
});
19+
20+
21+
function sendMessage() {
22+
23+
const username = usernameInput.value.trim();
24+
const content = messageInput.value.trim();
25+
26+
if (username === "") {
27+
feedback.textContent = "Please enter your name.";
28+
return;
29+
}
30+
31+
if (content === "") {
32+
feedback.textContent = "Message cannot be empty.";
33+
return;
34+
}
35+
36+
fetch(`http://localhost:8081/messages?username=${encodeURIComponent(username)}`, {
37+
method: "POST",
38+
headers: {
39+
"Content-Type": "application/json"
40+
},
41+
body: JSON.stringify({
42+
content: content
43+
})
44+
})
45+
.then(response => {
46+
47+
if (!response.ok) {
48+
throw new Error("Message could not be sent.");
49+
}
50+
51+
return response.json();
52+
})
53+
.then(() => {
54+
55+
messageInput.value = "";
56+
feedback.textContent = "";
57+
58+
loadMessages();
59+
})
60+
.catch(error => {
61+
62+
feedback.textContent = error.message;
63+
});
64+
}
65+
66+
67+
function loadMessages() {
68+
69+
fetch("http://localhost:8081/messages")
70+
.then(response => {
71+
72+
if (!response.ok) {
73+
throw new Error("Could not load messages.");
74+
}
75+
76+
return response.json();
77+
})
78+
.then(messages => {
79+
80+
messagesDiv.innerHTML = "";
81+
82+
messages.forEach(message => {
83+
84+
const messageElement = document.createElement("div");
85+
messageElement.classList.add("message");
86+
87+
const usernameElement = document.createElement("span");
88+
usernameElement.classList.add("username");
89+
90+
const contentElement = document.createElement("span");
91+
contentElement.classList.add("content");
92+
93+
const timestampElement = document.createElement("span");
94+
timestampElement.classList.add("timestamp");
95+
96+
97+
if (message.user) {
98+
99+
usernameElement.textContent =
100+
message.user.username + ":";
101+
102+
} else {
103+
104+
usernameElement.textContent = "Unknown user:";
105+
}
106+
107+
108+
contentElement.textContent = message.content;
109+
110+
timestampElement.textContent =
111+
message.createdAt
112+
? new Date(message.createdAt).toLocaleString()
113+
: "";
114+
115+
116+
messageElement.appendChild(usernameElement);
117+
messageElement.appendChild(contentElement);
118+
messageElement.appendChild(timestampElement);
119+
120+
messagesDiv.appendChild(messageElement);
121+
});
122+
123+
messagesDiv.scrollTop = messagesDiv.scrollHeight;
124+
})
125+
.catch(error => {
126+
127+
feedback.textContent = error.message;
128+
});
129+
}
130+
131+
132+
loadMessages();
133+
134+
setInterval(loadMessages, 2000);

‎chat-app/frontend/style.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
margin: 0;
8+
font-family: Arial, sans-serif;
9+
background-color: #f2f2f2;
10+
height: 100vh;
11+
}
12+
13+
.chat-container {
14+
width: 90%;
15+
max-width: 1000px;
16+
height: 90vh;
17+
margin: 5vh auto;
18+
background-color: white;
19+
border: 1px solid #ccc;
20+
border-radius: 10px;
21+
22+
display: flex;
23+
flex-direction: column;
24+
overflow: hidden;
25+
}
26+
27+
/* Top of chat */
28+
29+
.chat-header {
30+
background-color: #4a76a8;
31+
color: white;
32+
padding: 15px 20px;
33+
}
34+
35+
.chat-header h1 {
36+
margin: 0;
37+
font-size: 24px;
38+
}
39+
40+
/* Message area */
41+
42+
.messages {
43+
flex: 1;
44+
padding: 20px;
45+
overflow-y: auto;
46+
background-color: #ffffff;
47+
}
48+
49+
/* Individual message */
50+
51+
.message {
52+
margin-bottom: 12px;
53+
font-size: 16px;
54+
}
55+
56+
.username {
57+
font-weight: bold;
58+
margin-right: 8px;
59+
color: #4a76a8;
60+
}
61+
62+
.content {
63+
color: #333;
64+
}
65+
66+
.timestamp {
67+
display: block;
68+
margin-top: 4px;
69+
font-size: 12px;
70+
color: #888;
71+
}
72+
73+
/* Error/success message */
74+
75+
.feedback {
76+
padding: 5px 20px;
77+
color: #d9534f;
78+
min-height: 25px;
79+
}
80+
81+
/* Bottom input area */
82+
83+
.message-area {
84+
display: flex;
85+
padding: 15px;
86+
border-top: 1px solid #ccc;
87+
background-color: #f5f5f5;
88+
gap: 10px;
89+
}
90+
91+
.message-area input {
92+
flex: 1;
93+
padding: 12px;
94+
font-size: 16px;
95+
border: 1px solid #bbb;
96+
border-radius: 5px;
97+
}
98+
99+
.message-area button {
100+
padding: 12px 25px;
101+
font-size: 16px;
102+
background-color: #4a76a8;
103+
color: white;
104+
border: none;
105+
border-radius: 5px;
106+
cursor: pointer;
107+
}
108+
109+
.message-area button:hover {
110+
background-color: #365f8a;
111+
}

0 commit comments

Comments
 (0)