Added chatbot to the page

styles.css

@@ -696,3 +696,5 @@ a {
   background-color: skyblue;
 }
 
+  }
+}

submit-challenge/index.html

@@ -50,7 +50,19 @@ <h2>Submit New Coding Challenge</h2>
   </form>
   <section id="preview"></section>
 </main>
-  <script src="submit-challenge/script.js"></script>
+<script src="script.js" defer></script>
+
+
+<div class="chat-container">
+  <div class="chat-box" id="chat-box">
+    <div class="chat-message bot">Hi! I'm your chatbot. Ask me anything!</div>
+  </div>
+  <div class="input-box">
+    <input type="text" id="user-input" placeholder="Type your message...">
+    <button onclick="sendMessage()">Send</button>
+  </div>
+</div>
+
 
 </body>
 </html>

submit-challenge/script.js

@@ -32,4 +32,29 @@ form.addEventListener('submit', (e) => {
     <p><strong>Test Cases:</strong><ul>${testCases.map(tc => `<li>${tc}</li>`).join('')}</ul></p>
     <p><strong>Sample Solution:</strong><br><pre>${solution}</pre></p>
   `;
-});
+  });
+
+  function sendMessage() {
+    const input = document.getElementById("user-input");
+    const message = input.value.trim();
+    if (!message) return;
+
+    appendMessage("user", message);
+    input.value = "";
+
+    // Simulate AI reply (you can replace this with API call)
+    setTimeout(() => {
+      const botReply = "You said: " + message;
+      appendMessage("bot", botReply);
+    }, 500);
+  }
+
+  function appendMessage(sender, text) {
+    const chatBox = document.getElementById("chat-box");
+    const msg = document.createElement("div");
+    msg.className = "chat-message " + sender;
+    msg.textContent = text;
+    chatBox.appendChild(msg);
+    chatBox.scrollTop = chatBox.scrollHeight;
+  }
+

submit-challenge/styles.css

@@ -367,3 +367,48 @@ input:focus, textarea:focus, select:focus, button:focus {
   0% { transform: translate(-50%, -50%) rotate(0deg); }
   100% { transform: translate(-50%, -50%) rotate(360deg); }
 }
+
+.chat-container {
+      width: 400px;
+      /* margin: 50px auto; */
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      background: white;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+      overflow: hidden;
+    }
+    .chat-box {
+      max-height: 400px;
+      overflow-y: auto;
+      padding: 20px;
+      border-bottom: 1px solid #ccc;
+    }
+    .chat-message {
+      margin-bottom: 10px;
+    }
+    .chat-message.user {
+      text-align: right;
+      color: #059669;
+    }
+    .chat-message.bot {
+      text-align: left;
+      color: #059669;
+    }
+    .input-box {
+      display: flex;
+      padding: 10px;
+    }
+    .input-box input {
+      flex: 1;
+      padding: 10px;
+      font-size: 16px;
+    }
+    .input-box button {
+      padding: 10px 20px;
+      background: #059669;
+      color: white;
+      border: none;
+      cursor: pointer;
+    }