Add files via upload

shivareddy2002 · web-flow · commit 4ab7a157f45d · 2025-01-29T18:26:59.000+05:30
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Word Search Chatbot</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="chatbot">
+        <div id="header">
+            <span class="chat-title"><b>PICTOPEDIA </b><BR><P>Word Search Chatbot Using Wikipedia API</P></span>
+        </div>
+        <div id="chat-output"></div>
+        <div id="input-container">
+            <input type="text" id="user-input" placeholder="Ask about word ">
+            <button onclick="handleUserInput()">Search</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,37 @@
+function handleUserInput() {
+    const userInput = document.getElementById('user-input').value.trim();
+    const chatOutput = document.getElementById('chat-output');
+
+    if (userInput === "") {
+        chatOutput.innerHTML += `<div class="bot-message">Please enter a word to search.</div>`;
+        return;
+    }
+
+    chatOutput.innerHTML += `<div class="user-message">${userInput}</div>`;
+    fetchWikipediaData(userInput);
+    document.getElementById('user-input').value = '';
+    chatOutput.scrollTop = chatOutput.scrollHeight;
+}
+
+function fetchWikipediaData(query) {
+    const url = `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(query)}`;
+
+    fetch(url)
+        .then(response => response.json())
+        .then(data => {
+            const chatOutput = document.getElementById('chat-output');
+            if (data.extract) {
+                let imageHTML = data.thumbnail ? `<img src="${data.thumbnail.source}" alt="${query}" style="max-width: 100%; height: auto; border-radius: 5px;">` : '';
+                chatOutput.innerHTML += `<div class="bot-message">${imageHTML}<p>${data.extract}</p></div>`;
+            } else {
+                chatOutput.innerHTML += `<div class="bot-message">Sorry, I couldn't find on that word "${query}".</div>`;
+            }
+            chatOutput.scrollTop = chatOutput.scrollHeight;
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            const chatOutput = document.getElementById('chat-output');
+            chatOutput.innerHTML += `<div class="bot-message">There was an error retrieving the information.</div>`;
+            chatOutput.scrollTop = chatOutput.scrollHeight;
+        });
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,89 @@
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: #ece5dd;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0px;
+}
+
+#chatbot {
+    width: 350px;
+    max-width: 100%;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+}
+
+#header {
+    background-color: #075e54;
+    padding: 10px;
+    color: #fff;
+    text-align: center;
+}
+
+#chat-output {
+    flex: 1;
+    background-color: #e5ddd5;
+    padding: 10px 20px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+#chat-output div {
+    margin: 5px 0;
+    padding: 10px;
+    border-radius: 7.5px;
+    max-width: 70%;
+}
+
+#chat-output div.user-message {
+    background-color: #dcf8c6;
+    align-self: flex-end; /* User messages to the right */
+}
+
+#chat-output div.bot-message {
+    background-color: #fff;
+    align-self: flex-start; /* Bot messages to the left */
+}
+
+#input-container {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-top: 1px solid #ccc;
+    background-color: #f7f7f7;
+}
+
+#user-input {
+    flex: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+    outline: none;
+    margin-right: 10px;
+}
+
+button {
+    padding: 10px;
+    border: none;
+    background-color: #114825;
+    color: white;
+    border-radius: 10%;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #3a6b4a;
+}
+
+button:focus {
+    outline: none;
+}
