Skip to content

50Projects-HTML-CSS-JavaScript : Chat application #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 25, 2024
Merged

50Projects-HTML-CSS-JavaScript : Chat application #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f43140a
Add a project
tajulafreen Dec 25, 2024
5733086
Update the raedme with description
tajulafreen Dec 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -551,6 +551,17 @@ In order to run this project you need:
</details>
</li>

<li>
<details>
<summary>Simple Chat App</summary>
<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>
<ul>
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/ChatApp/">Live Demo</a></li>
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/ChatApp">Source</a></li>
</ul>
</details>
</li>

</ol>

<p align="right">(<a href="#readme-top">back to top</a>)</p>
Expand Down
20 changes: 20 additions & 0 deletions Source-Code/ChatApp/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="chat-container">
<h1>Simple Chat App</h1>
<div class="chat-box" id="chatBox"></div>
<form id="chatForm">
<input type="text" id="messageInput" placeholder="Type your message..." required>
<button type="submit">Send</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
45 changes: 45 additions & 0 deletions Source-Code/ChatApp/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
const chatBox = document.getElementById('chatBox');
const chatForm = document.getElementById('chatForm');
const messageInput = document.getElementById('messageInput');

// Display a message in the chat box
const displayMessage = (message, sender) => {
const messageElement = document.createElement('div');
messageElement.classList.add('message', sender);
messageElement.textContent = message;
chatBox.appendChild(messageElement);
chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to the bottom
};

// Load messages from local storage
const loadMessages = () => {
const messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
chatBox.innerHTML = '';
messages.forEach(({ user, bot }) => {
displayMessage(user, 'user');
displayMessage(bot, 'bot');
});
};

// Add messages to local storage
const addMessagesToStorage = (userMessage, botReply) => {
const messages = JSON.parse(localStorage.getItem('chatMessages')) || [];
messages.push({ user: userMessage, bot: botReply });
localStorage.setItem('chatMessages', JSON.stringify(messages));
};

// Handle form submission
chatForm.addEventListener('submit', (e) => {
e.preventDefault();
const userMessage = messageInput.value.trim();
if (userMessage) {
const botReply = userMessage; // Echo the user message
displayMessage(userMessage, 'user');
displayMessage(botReply, 'bot');
addMessagesToStorage(userMessage, botReply);
messageInput.value = '';
}
});

// Initialize the app
loadMessages();
82 changes: 82 additions & 0 deletions Source-Code/ChatApp/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
body {
font-family: Arial, sans-serif;
background-color: #cbdc30;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.chat-container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 400px;
padding: 20px;
}

h1 {
text-align: center;
color: #333;
}

.chat-box {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
padding: 10px;
height: 300px;
overflow-y: auto;
margin-bottom: 10px;
}

.chat-box .message {
display: flex;
flex-direction: column;
margin: 5px 0;
padding: 10px;
border-radius: 12px 2px;
font-size: 14px;
}

.message.user {
background-color: #cdf2f7;
color: #025f54;
float: right;
width: 50%;
}

.message.bot {
background-color: #fbcfdd;
color: #d81b60;
float: left;
width: 50%;
}

form {
display: flex;
}

input[type="text"] {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}

button {
padding: 10px 20px;
border: none;
background-color: #049786;
color: white;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #005f4b;
}