Chat-application is pushed for the first time

PraveenKumarM17 · PraveenKumarM17 · commit 7f6fedd3fd1d · 2025-04-20T23:18:36.000+05:30
diff --git a/index.html b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ai Chatbot</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="chat-container">
+        <div class="chat-header">
+            <h1>AI Chatbot</h1>
+        </div>
+        <div class="chat-messages" id="chat-messages">
+            <div class="message bot-message">
+                <p>Hello! I'm your AI assistant. How can I help you today?</p>
+            </div>
+        </div>
+        <div class="chat-input">
+            <input type="text" id="user-input" placeholder="Type your message here...">
+            <button id="send-button">Send</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,64 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const chatMessages = document.getElementById("chat-messages");
+    const userInput = document.getElementById("user-input");
+    const sendButton = document.getElementById("send-button");
+
+    const botResponses = {
+        hello: "Hello! How can I help you today?",
+        hi: "Hi there! How can I assist you?",
+        "how are you": "I'm doing well, thank you! How about you?",
+        "what can you do": "I can answer simple questions and have basic conservations. Try asking something else. ",
+        "i am fine": "Great! need any assistance?",
+        bye: "Goodbye! Have a great day!",
+        default: "I'm not sure I understand. Could you try asking something else?"
+    };
+
+    //Function to add a message to the chat
+    function addMessage(message, isUser = false) {
+        const messageDiv = document.createElement("div");
+        messageDiv.classList.add("message");
+        messageDiv.classList.add(isUser ? "user-message" : "bot-message");
+
+        const messageText = document.createElement("p");
+        messageText.textContent = message;
+        messageDiv.appendChild(messageText);
+
+        chatMessages.appendChild(messageDiv)
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    //Function to get bot response
+    function getBotResponse(userMessage) {
+        const lowerMessage = userMessage.toLowerCase();
+
+        for (const [key, value] of Object.entries(botResponses)) {
+            if (lowerMessage.includes(key)) {
+                return value;
+            }
+        }
+        return botResponses.default;
+    }
+
+    //Function to handle sending messages
+    function sendMessage() {
+        const message = userInput.value.trim();
+        if (message) {
+            addMessage(message, true);
+            userInput.value = "";
+
+            setTimeout(() => {
+                const botResponse = getBotResponse(message);
+                addMessage(botResponse);
+            }, 500);
+        }
+    }
+
+    //Event listeners
+    sendButton.addEventListener("click",sendMessage);
+
+    userInput.addEventListener("keypress", (e) => {
+        if (e.key === "Enter") {
+            sendMessage();
+        }
+    });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,92 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #f0f2f5;
+}
+
+.chat-container {
+    width: 400px;
+    height: 600px;
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+.chat-header {
+    padding: 20px;
+    background-color: #075e54;
+    color: white;
+    border-radius: 10px 10px 0 0;
+}
+
+.chat-header h1 {
+    font-size: 1.5rem;
+    text-align: center;
+}
+
+.chat-messages {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.message {
+    margin-bottom: 15px;
+    max-width: 80%;
+    padding: 10px 15px;
+    border-radius: 15px;
+    word-wrap: break-word;
+}
+
+.bot-message {
+    background-color: #e9ecef;
+    align-self: flex-start;
+    border-radius: 15px 15px 15px 0;
+}
+
+.user-message {
+    background-color: #075e54;
+    color: white;
+    margin-left: auto;
+    border-radius: 15px 15px 0 15px;
+}
+
+.chat-input {
+    padding: 20;
+    display: flex;
+    gap: 10px;
+    border-top: 1px solid #e9ecef;
+}
+
+#user-input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #e9ecef;
+    border-radius: 5px;
+    outline: none;
+}
+
+#send-button {
+    padding: 10px 20px;
+    background-color: #075e54;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+#send-button:hover {
+    background-color: #128c7e;
+}
