Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f43140a

Browse files
Add a project
1 parent b8b35d0 commit f43140a

File tree

3 files changed

+147
-0
lines changed

3 files changed

+147
-0
lines changed

‎Source-Code/ChatApp/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
<title>Chat App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="chat-container">
11+
<h1>Simple Chat App</h1>
12+
<div class="chat-box" id="chatBox"></div>
13+
<form id="chatForm">
14+
<input type="text" id="messageInput" placeholder="Type your message..." required>
15+
<button type="submit">Send</button>
16+
</form>
17+
</div>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎Source-Code/ChatApp/script.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
const chatBox = document.getElementById('chatBox');
2+
const chatForm = document.getElementById('chatForm');
3+
const messageInput = document.getElementById('messageInput');
4+
5+
// Display a message in the chat box
6+
const displayMessage = (message, sender) => {
7+
const messageElement = document.createElement('div');
8+
messageElement.classList.add('message', sender);
9+
messageElement.textContent = message;
10+
chatBox.appendChild(messageElement);
11+
chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to the bottom
12+
};
13+
14+
// Load messages from local storage
15+
const loadMessages = () => {
16+
const messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
17+
chatBox.innerHTML = '';
18+
messages.forEach(({ user, bot }) => {
19+
displayMessage(user, 'user');
20+
displayMessage(bot, 'bot');
21+
});
22+
};
23+
24+
// Add messages to local storage
25+
const addMessagesToStorage = (userMessage, botReply) => {
26+
const messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
27+
messages.push({ user: userMessage, bot: botReply });
28+
localStorage.setItem('chatMessages', JSON.stringify(messages));
29+
};
30+
31+
// Handle form submission
32+
chatForm.addEventListener('submit', (e) => {
33+
e.preventDefault();
34+
const userMessage = messageInput.value.trim();
35+
if (userMessage) {
36+
const botReply = userMessage; // Echo the user message
37+
displayMessage(userMessage, 'user');
38+
displayMessage(botReply, 'bot');
39+
addMessagesToStorage(userMessage, botReply);
40+
messageInput.value = '';
41+
}
42+
});
43+
44+
// Initialize the app
45+
loadMessages();

‎Source-Code/ChatApp/style.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #cbdc30;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
height: 100vh;
10+
}
11+
12+
.chat-container {
13+
background-color: #fff;
14+
border-radius: 8px;
15+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16+
width: 400px;
17+
padding: 20px;
18+
}
19+
20+
h1 {
21+
text-align: center;
22+
color: #333;
23+
}
24+
25+
.chat-box {
26+
background-color: #f9f9f9;
27+
border: 1px solid #ddd;
28+
border-radius: 8px;
29+
padding: 10px;
30+
height: 300px;
31+
overflow-y: auto;
32+
margin-bottom: 10px;
33+
}
34+
35+
.chat-box .message {
36+
display: flex;
37+
flex-direction: column;
38+
margin: 5px 0;
39+
padding: 10px;
40+
border-radius: 12px 2px;
41+
font-size: 14px;
42+
}
43+
44+
.message.user {
45+
background-color: #cdf2f7;
46+
color: #025f54;
47+
float: right;
48+
width: 50%;
49+
}
50+
51+
.message.bot {
52+
background-color: #fbcfdd;
53+
color: #d81b60;
54+
float: left;
55+
width: 50%;
56+
}
57+
58+
form {
59+
display: flex;
60+
}
61+
62+
input[type="text"] {
63+
flex: 1;
64+
padding: 10px;
65+
border: 1px solid #ddd;
66+
border-radius: 4px;
67+
font-size: 14px;
68+
}
69+
70+
button {
71+
padding: 10px 20px;
72+
border: none;
73+
background-color: #049786;
74+
color: white;
75+
font-size: 14px;
76+
border-radius: 4px;
77+
cursor: pointer;
78+
}
79+
80+
button:hover {
81+
background-color: #005f4b;
82+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /