diff --git a/README.md b/README.md index e0484ab..53b244e 100644 --- a/README.md +++ b/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.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/ChatApp/index.html b/Source-Code/ChatApp/index.html new file mode 100644 index 0000000..11bd23d --- /dev/null +++ b/Source-Code/ChatApp/index.html @@ -0,0 +1,20 @@ + + + + + + Chat App + + + +
    +

    Simple Chat App

    +
    +
    + + +
    +
    + + + diff --git a/Source-Code/ChatApp/script.js b/Source-Code/ChatApp/script.js new file mode 100644 index 0000000..38bc0da --- /dev/null +++ b/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(); diff --git a/Source-Code/ChatApp/style.css b/Source-Code/ChatApp/style.css new file mode 100644 index 0000000..f05b489 --- /dev/null +++ b/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; +}