chatgpt

Parv-gugnani · Parv-gugnani · commit 9bcf78a1d928 · 2023-07-25T23:18:51.000+05:30
diff --git a/Chat gpt/index.html b/Chat gpt/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chat Gpt</title>
+    <link rel="icon" type="image" href="clock.png" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="chat-container" id="chatContainer">
+      <!-- chat will here -->
+    </div>
+    <div class="input-container">
+      <input type="text" id="userInput" placeholder="Type your message..." />
+      <button id="sendButton">Send</button>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Chat gpt/script.js b/Chat gpt/script.js
@@ -0,0 +1,41 @@
+const chatContainer = document.getElementById("chatContainer");
+const userInput = document.getElementById("userInput");
+const sendButton = document.getElementById("sendButton");
+
+const chatbotResponses = [
+  "Hello! How can I assist you?",
+  "I'm sorry, I can't answer that question.",
+  "Please elaborate on your request.",
+  "That's interesting. Tell me more.",
+  "I need more information to provide a proper response.",
+  "How can I help you today?",
+];
+
+function displayMessage(sender, message) {
+  const messageElement = document.createElement("div");
+  messageElement.classList.add("message");
+  messageElement.textContent = `${sender}: ${message}`;
+  chatContainer.appendChild(messageElement);
+  chatContainer.scrollTop = chatContainer.scrollHeight;
+}
+
+function displayChatbotResponse() {
+  const userMessage = userInput.value.trim();
+  if (userMessage !== "") {
+    displayMessage("You", userMessage);
+    userInput.value = "";
+
+    const randomResponse =
+      chatbotResponses[Math.floor(Math.random() * chatbotResponses.length)];
+    setTimeout(() => {
+      displayMessage("ChatGPT", randomResponse);
+    }, 500);
+  }
+}
+
+sendButton.addEventListener("click", displayChatbotResponse);
+userInput.addEventListener("keypress", (event) => {
+  if (event.key === "Enter") {
+    displayChatbotResponse();
+  }
+});
diff --git a/Chat gpt/style.css b/Chat gpt/style.css
@@ -0,0 +1,38 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.chat-container {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  height: 300px;
+  overflow-y: scroll;
+}
+
+.input-container {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+}
+
+input[type="text"] {
+  flex: 1;
+  padding: 5px;
+}
+
+button {
+  margin-left: 10px;
+  padding: 5px 10px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
