From 6a725f9a62687f6871b54e368cddb4e4646a66cd Mon Sep 17 00:00:00 2001
From: Mahdi Qiamast <78082316+Qiamast@users.noreply.github.com>
Date: Fri, 13 Jan 2023 12:23:20 +0330
Subject: [PATCH] initial Commit
---
chat.js | 21 ++++++++++++++++++
index.html | 20 +++++++++++++++++
style.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 104 insertions(+)
create mode 100644 chat.js
create mode 100644 index.html
create mode 100644 style.css
diff --git a/chat.js b/chat.js
new file mode 100644
index 0000000..09b2356
--- /dev/null
+++ b/chat.js
@@ -0,0 +1,21 @@
+let input = document.querySelector('input');
+let button = document.querySelector('button');
+let conversation = document.querySelector('.conversation');
+
+// Retrieve the conversation history from local storage
+let history = JSON.parse(localStorage.getItem('conversation')) || [];
+
+// Display the conversation history
+for (let i = 0; i < history.length; i++) {
+ conversation.innerHTML += `${history[i]}
`;
+}
+
+button.addEventListener('click', function() {
+ let message = input.value;
+ conversation.innerHTML += `You: ${message}
`;
+ input.value = '';
+
+ // Save the conversation to local storage
+ history.push(`You: ${message}`);
+ localStorage.setItem('conversation', JSON.stringify(history));
+});
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3e32647
--- /dev/null
+++ b/index.html
@@ -0,0 +1,20 @@
+
+
+
+ Chat App
+
+
+
+
+
+
+
+
+
+
+
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e9f55fe
--- /dev/null
+++ b/style.css
@@ -0,0 +1,63 @@
+/* General styles */
+body {
+ background-color: #e5e5e5;
+ font-family: Arial, sans-serif;
+}
+
+/* Conversation container */
+.conversation {
+ padding: 20px;
+ max-height: 80vh;
+ overflow-y: scroll;
+}
+
+/* Message container */
+.message {
+ padding: 10px;
+ margin-bottom: 10px;
+ border-radius: 10px;
+ font-size: 14px;
+}
+
+/* Sent messages */
+.sent {
+ background-color: #dcf8c6;
+ float: right;
+ clear: both;
+}
+
+/* Received messages */
+.received {
+ background-color: #fff;
+ float: left;
+ clear: both;
+}
+
+/* Input container */
+.input-container {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 10px;
+ background-color: #f8f8f8;
+ border-top: 1px solid #ccc;
+}
+
+/* Input field and button */
+input, button {
+ padding: 10px;
+ font-size: 14px;
+ border: none;
+ border-radius: 5px;
+}
+
+input {
+ flex-grow: 1;
+ margin-right: 10px;
+}
+
+button {
+ background-color: #4caf50;
+ color: #fff;
+}