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 8da7c28

Browse files
Merge pull request #52 from tajulafreen/Chat_Application
50Projects-HTML-CSS-JavaScript : Chat application
2 parents b8b35d0 + 5733086 commit 8da7c28

File tree

4 files changed

+158
-0
lines changed

4 files changed

+158
-0
lines changed

‎README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -551,6 +551,17 @@ In order to run this project you need:
551551
</details>
552552
</li>
553553

554+
<li>
555+
<details>
556+
<summary>Simple Chat App</summary>
557+
<p>This is a simple chat application that simulates a conversation where the app echoes the user's messages as a response. Messages are stored in the browser's local storage, so they persist even after the page is refreshed.</p>
558+
<ul>
559+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/ChatApp/">Live Demo</a></li>
560+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/ChatApp">Source</a></li>
561+
</ul>
562+
</details>
563+
</li>
564+
554565
</ol>
555566

556567
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎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 によって変換されたページ (->オリジナル) /