initial Commit

Qiamast · Jan 13, 2023 · 6a725f9 · 6a725f9
1 parent d1f6238
commit 6a725f9
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 0 deletions.
diff --git a/chat.js 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 += `<p>${history[i]}</p>`;
+}
+
+button.addEventListener('click', function() {
+ let message = input.value;
+ conversation.innerHTML += `<p>You: ${message}</p>`;
+ 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
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Chat App</title>
+ <link rel="stylesheet" href="style.css"> 
+</head>
+<body>
+ <div class="conversation-container">
+ <div class="conversation"></div>
+ </div>
+ <div class="input-container">
+ <form>
+ <input type="text" id="message-input" placeholder="Enter your message">
+ <button type="submit" id="send-button">Send</button>
+ </form>
+ </div>
+
+ <script src="chat.js"></script>
+</body>
+</html>
diff --git a/style.css 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;
+}