Skip to content

Commit 9b7ea35

Browse files
ZabihollahNamaziZabihollahNamazi
committed
updates and css
1 parent 6c1f47a commit 9b7ea35

4 files changed

Lines changed: 168 additions & 58 deletions

File tree

‎chat-app/backend/server.js‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,33 @@ import cors from "cors";
33

44
const app = express();
55
const PORT = 3000;
6+
67
app.use(express.json());
78
app.use(cors());
9+
810
let messages = [];
911

10-
app.get("/messages", (req, res) => {
12+
app.get("/", (req, res) => {
1113
res.json(messages);
1214
});
1315

14-
app.post("/messages", (req, res) => {
15-
const message = req.body;
16-
messages.push(message);
17-
res.status(201).json(message);
16+
app.post("/", (req, res) => {
17+
const { username, text } = req.body;
18+
19+
if (!username || !text) {
20+
return res.status(400).json({ error: "username and text required" });
21+
}
22+
23+
messages.push({
24+
username,
25+
text,
26+
timeStamp: new Date().toLocaleTimeString(),
27+
});
28+
29+
res.status(201).json({ success: true });
1830
});
1931

2032
app.listen(PORT, () => {
21-
console.log(`Server is running on port ${PORT}`);
22-
});
33+
console.log("Server running on port 3000");
34+
});
35+

‎chat-app/frontend/app.js‎

Lines changed: 40 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,45 @@
1-
const messagesList = document.getElementById("messages-list");
2-
const form = document.getElementById("message-form");
3-
const input = document.getElementById("message-input");
4-
const usernameInput = document.getElementById("username-input");
5-
6-
const BACKEND_URL =
7-
"https://zabihollah-namazi-chat-app-backend.hosting.codeyourfuture.io";
8-
9-
// Fetch and display messages
10-
async function loadMessages() {
11-
const response = await fetch(`${BACKEND_URL}/messages`);
12-
const messages = await response.json();
13-
messagesList.innerHTML = "";
14-
messages.forEach((msg) => {
15-
const li = document.createElement("li");
16-
li.innerHTML = `
17-
<div class="message-header">
18-
<span class="username"> <strong>${msg.username}</strong></span>
19-
<span class="timestamp">${msg.timeStamp}</span>
20-
</div>
21-
<div class="message-text">${msg.text}</div>`;
22-
messagesList.appendChild(li);
23-
});
24-
}
25-
26-
// Handle form submission
27-
form.addEventListener("submit", async (e) => {
28-
e.preventDefault();
29-
30-
const newMessage = {
31-
username: usernameInput.value,
32-
text: input.value,
33-
timeStamp: new Date().toLocaleTimeString("en-US", {
34-
hour: "numeric",
35-
minute: "2-digit",
36-
hour12: true,
37-
}),
38-
};
39-
40-
await fetch(`${BACKEND_URL}/messages`, {
41-
method: "POST",
42-
headers: {
43-
"Content-Type": "application/json",
44-
},
45-
body: JSON.stringify(newMessage),
1+
document.addEventListener("DOMContentLoaded", () => {
2+
const messagesList = document.getElementById("messages-list");
3+
const form = document.getElementById("message-form");
4+
const input = document.getElementById("message-input");
5+
const usernameInput = document.getElementById("username-input");
6+
7+
const BACKEND_URL = "https://zabihollah-namazi-chat-app-backend.hosting.codeyourfuture.io";
8+
9+
async function loadMessages() {
10+
const res = await fetch(BACKEND_URL);
11+
const messages = await res.json();
12+
13+
messagesList.innerHTML = "";
14+
15+
messages.forEach((msg) => {
16+
const li = document.createElement("li");
17+
li.innerHTML = `
18+
<div><strong>${msg.username}</strong></div>
19+
<div>${msg.text}</div>
20+
<small>${msg.timeStamp}</small>
21+
`;
22+
messagesList.appendChild(li);
23+
});
24+
}
25+
26+
form.addEventListener("submit", async (e) => {
27+
e.preventDefault();
28+
29+
await fetch(BACKEND_URL, {
30+
method: "POST",
31+
headers: { "Content-Type": "application/json" },
32+
body: JSON.stringify({
33+
username: usernameInput.value,
34+
text: input.value,
35+
}),
36+
});
37+
38+
input.value = "";
39+
loadMessages();
4640
});
4741

48-
input.value = "";
4942
loadMessages();
43+
setInterval(loadMessages, 1000);
5044
});
5145

52-
loadMessages();
53-
// Refresh messages every 1 seconds
54-
setInterval(loadMessages, 1000);

‎chat-app/frontend/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="stylesheet" href="styles.css" />
6+
<link rel="stylesheet" href="style.css" />
77
<title>Chat App</title>
88
</head>
99
<body>
@@ -28,6 +28,6 @@
2828
</form>
2929
</div>
3030

31-
<script src="app.js"></script>
31+
<script src="app.js" defer></script>
3232
</body>
3333
</html>

‎chat-app/frontend/style.css‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #f4f6f8;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
8+
.chat-container {
9+
max-width: 600px;
10+
margin: 40px auto;
11+
background: white;
12+
border-radius: 12px;
13+
padding: 20px;
14+
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
15+
}
16+
17+
/* Messages box */
18+
#messages-list {
19+
list-style: none;
20+
padding: 10px;
21+
height: 350px;
22+
overflow-y: auto;
23+
border-radius: 10px;
24+
background: #fafafa;
25+
border: 1px solid #eee;
26+
display: flex;
27+
flex-direction: column;
28+
gap: 10px;
29+
}
30+
31+
/* Each message bubble */
32+
#messages-list {
33+
list-style: none;
34+
padding: 10px;
35+
height: 350px;
36+
overflow-y: auto;
37+
background: #fafafa;
38+
border: 1px solid #eee;
39+
}
40+
41+
/* Header (username + time) */
42+
.message-header {
43+
display: flex;
44+
justify-content: space-between; /* THIS pushes time to right */
45+
align-items: center;
46+
font-size: 0.85em;
47+
margin-bottom: 5px;
48+
color: #555;
49+
}
50+
51+
/* Username styling */
52+
.username {
53+
font-weight: bold;
54+
color: #2c3e50;
55+
}
56+
57+
/* Time styling (right side) */
58+
.timestamp {
59+
font-size: 0.75em;
60+
color: #999;
61+
margin-left: auto;
62+
}
63+
64+
/* Message text */
65+
.message-text {
66+
font-size: 1em;
67+
color: #222;
68+
line-height: 1.4;
69+
word-wrap: break-word;
70+
}
71+
72+
/* Form styling */
73+
form {
74+
display: flex;
75+
flex-direction: column;
76+
gap: 10px;
77+
margin-top: 15px;
78+
}
79+
80+
input {
81+
padding: 10px;
82+
border: 1px solid #ccc;
83+
border-radius: 8px;
84+
font-size: 1em;
85+
}
86+
87+
button {
88+
padding: 10px;
89+
background-color: #007bff;
90+
color: white;
91+
border: none;
92+
border-radius: 8px;
93+
cursor: pointer;
94+
font-size: 1em;
95+
}
96+
97+
button:hover {
98+
background-color: #0056b3;
99+
}
100+
101+
/* Empty state */
102+
.empty {
103+
text-align: center;
104+
color: #888;
105+
padding: 20px;
106+
}

0 commit comments

Comments
 (0)