50Projects-HTML-CSS-JavaScript : Chat application

README.md

@@ -551,6 +551,17 @@ In order to run this project you need:
 
 
 
+
+
+Simple Chat App
+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.
+
+Live Demo
+Source
+ 
+
+
+
 
 
 (back to top)

Source-Code/ChatApp/index.html

@@ -0,0 +1,20 @@
+
+
+
+  
+  
+  Chat App
+  
+
+
+  
+    Simple Chat App
+    
+    
+      
+      Send
+    
+  
+  
+
+

Source-Code/ChatApp/script.js

@@ -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();

Source-Code/ChatApp/style.css

@@ -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;
+}