Skip to content

Commit 1f6e2a7

Browse files
TzeMingHoTzeMingHo
committed
added a helper function to scroll to the bottom
1 parent 4c084cb commit 1f6e2a7

4 files changed

Lines changed: 72 additions & 54 deletions

File tree

‎chat-app/frontend/index.html‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>Chat app</title>
7-
<script src="scripts.js"></script>
7+
<script src="scripts.js" type="module"></script>
88
<link rel="stylesheet" href="styles.css" />
99
</head>
1010
<body>
@@ -14,9 +14,19 @@ <h1>Chat channel</h1>
1414
<main>
1515
<div id="chat-display-area"></div>
1616
<form id="message-form">
17-
<textarea type="text" id="message-input" placeholder="message" required></textarea>
17+
<textarea
18+
type="text"
19+
id="message-input"
20+
placeholder="message"
21+
required
22+
></textarea>
1823
<div id="signature-and-send-area">
19-
<input type="text" id="user-name-input" placeholder="user name" required/>
24+
<input
25+
type="text"
26+
id="user-name-input"
27+
placeholder="user name"
28+
required
29+
/>
2030
<button type="submit" id="message-submit-button">Send</button>
2131
</div>
2232
</form>

‎chat-app/frontend/scripts.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { scrollToBottom } from "./utilities.js";
2+
13
const state = {
24
messageString: "",
35
userString: "",
@@ -46,6 +48,7 @@ async function chatDisplay() {
4648
} else {
4749
chatDisplayArea.append(...createMessageThreads(chatHistoryArray));
4850
}
51+
scrollToBottom();
4952
}
5053

5154
const keepFetchingMessages = async () => {
@@ -79,7 +82,6 @@ function messageInputReset() {
7982

8083
async function postingMessage(messageString, userString) {
8184
try {
82-
const newTimestamp = new Date().getTime();
8385
const response = await fetch(state.backendURL, {
8486
method: "POST",
8587
headers: {
@@ -88,7 +90,6 @@ async function postingMessage(messageString, userString) {
8890
body: JSON.stringify({
8991
message: messageString,
9092
user: userString,
91-
timestamp: newTimestamp,
9293
}),
9394
});
9495
if (response.ok) {

‎chat-app/frontend/styles.css‎

Lines changed: 49 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,86 @@
11
* {
2-
margin: 0;
3-
padding: 0;
4-
box-sizing: border-box;
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
55
}
66

7-
87
#chat-display-area {
9-
background-color: aliceblue;
10-
border: 1px solid;
11-
border-radius: 5px;
12-
width: 80%;
13-
height: 68vh;
14-
display: flex;
15-
flex-direction: column;
16-
gap: 5px;
8+
background-color: aliceblue;
9+
border: 1px solid;
10+
border-radius: 5px;
11+
width: 80%;
12+
height: 68vh;
13+
display: flex;
14+
flex-direction: column;
15+
gap: 5px;
16+
overflow-y: hidden;
17+
scroll-behavior: smooth;
1718
}
1819

1920
.chat-thread {
20-
background-color: white;
21-
border: navy solid 1.5px;
22-
max-width: 90%;
23-
border-radius: 5px;
24-
height: 10vh;
25-
display: flex;
26-
flex-direction: column;
27-
justify-content: space-between;
21+
background-color: white;
22+
border: navy solid 1.5px;
23+
max-width: 90%;
24+
border-radius: 5px;
25+
height: 10vh;
26+
display: flex;
27+
flex-direction: column;
28+
justify-content: space-between;
2829
}
2930

3031
.message-in-thread {
31-
height: 8vh;
32+
height: 8vh;
3233
}
3334

3435
.info-in-thread {
35-
background-color: navy;
36-
color: white;
37-
display: flex;
38-
justify-content: space-between;
36+
background-color: navy;
37+
color: white;
38+
display: flex;
39+
justify-content: space-between;
3940
}
4041

4142
.timestamp-in-thread {
42-
font-size: small;
43-
display: flex;
44-
align-items: center;
43+
font-size: small;
44+
display: flex;
45+
align-items: center;
4546
}
4647

4748
.user-name-in-thread {
48-
color: white;
49-
display: flex;
50-
justify-content: flex-end;
51-
padding-right: 5px;
49+
color: white;
50+
display: flex;
51+
justify-content: flex-end;
52+
padding-right: 5px;
5253
}
5354

5455
#message-form {
55-
border: 1px solid;
56-
width: 80%;
57-
height: 20vh;
58-
padding: 2px;
56+
border: 1px solid;
57+
width: 80%;
58+
height: 20vh;
59+
padding: 2px;
5960
}
6061

6162
#message-input {
62-
height: 11.5vh;
63-
width: 100%;
64-
padding: 8px;
63+
height: 11.5vh;
64+
width: 100%;
65+
padding: 8px;
6566
}
6667

6768
#signature-and-send-area {
68-
display: flex;
69-
justify-content: space-between;
69+
display: flex;
70+
justify-content: space-between;
7071
}
7172

7273
#user-name-input {
73-
padding: 5px;
74+
padding: 5px;
7475
}
7576

7677
#message-submit-button {
77-
padding: 5px;
78+
padding: 5px;
7879
}
7980

8081
footer {
81-
position: fixed;
82-
bottom: 0;
83-
width: 100%;
84-
background-color: aliceblue;
85-
}
82+
position: fixed;
83+
bottom: 0;
84+
width: 100%;
85+
background-color: aliceblue;
86+
}

‎chat-app/frontend/utilities.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export function scrollToBottom() {
2+
const displayArea = document.getElementById("chat-display-area");
3+
if (displayArea) {
4+
displayArea.scrollTop = displayArea.scrollHeight;
5+
}
6+
}

0 commit comments

Comments
 (0)