Ai-study-chatbot

“AI Study Chatbot: Clear doubts anytime, any subject, in any language, with real-time answers.

<title>AI Study Chatbot</title>

AI Study Chatbot

Ask any study-related question 🌱

Hello! I’m your study assistant. Ask me anything about Science, Maths, English, History, and more.

<div class="input-area">
  <input type="text" id="user-input" placeholder="Type your question here...">
  <button id="send-btn">Send</button>
</div>

Created by Malavika Nambiar, Class 9 <script src="script.js"></script> /* Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* Body */ body { margin: 0; font-family: 'Poppins', sans-serif; background: linear-gradient(to bottom, #d0f0c0, #f0fff0); display: flex; flex-direction: column; align-items: center; height: 100vh; }

/* Header */ .header { text-align: center; margin-top: 15px; }

.header h1 { color: #2e7d32; font-size: 2rem; }

.header p { color: #4caf50; font-size: 1rem; margin-top: -5px; }

/* Chat Container */ .chat-container { background: #ffffffc0; width: 95%; max-width: 400px; max-height: 70%; border-radius: 20px; display: flex; flex-direction: column; overflow: hidden; margin-top: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* Chat Box */ .chat-box { flex: 1; padding: 10px; overflow-y: auto; }

/* Input Area */ .input-area { display: flex; border-top: 1px solid #ccc; background: #e8f5e9; }

input { flex: 1; border: none; padding: 10px; font-size: 16px; outline: none; background: #e8f5e9; color: #2e7d32; border-radius: 0 0 0 20px; }

button { background-color: #66bb6a; color: white; border: none; padding: 10px 15px; cursor: pointer; border-radius: 0 0 20px 0; font-weight: 600; }

button:hover { background-color: #43a047; }

/* Chat Messages */ .bot-message, .user-message { margin: 8px 0; padding: 8px 12px; border-radius: 20px; max-width: 80%; word-wrap: break-word; }

.bot-message { background-color: #a5d6a7; color: #1b5e20; align-self: flex-start; display: flex; align-items: center; }

.bot-message img { width: 30px; height: 30px; margin-right: 8px; border-radius: 50%; }

.user-message { background-color: #81c784; color: #1b5e20; align-self: flex-end; }

/* Footer */ footer { margin-top: 10px; font-size: 0.8rem; color: #2e7d32; } // Select elements const sendBtn = document.getElementById("send-btn"); const userInput = document.getElementById("user-input"); const chatBox = document.getElementById("chat-box");

// Event listeners sendBtn.addEventListener("click", sendMessage); userInput.addEventListener("keypress", (e) => { if (e.key === "Enter") sendMessage(); });

// Send message function async function sendMessage() { const userText = userInput.value.trim(); if (!userText) return;

// Display user message const userMessage = document.createElement("div"); userMessage.className = "user-message"; userMessage.textContent = userText; chatBox.appendChild(userMessage); userInput.value = ""; chatBox.scrollTop = chatBox.scrollHeight;

// Display bot typing message const botMessage = document.createElement("div"); botMessage.className = "bot-message"; botMessage.innerHTML = 'Typing...'; chatBox.appendChild(botMessage); chatBox.scrollTop = chatBox.scrollHeight;

// Get AI response const answer = await getBotResponse(userText); botMessage.innerHTML = '' + answer; chatBox.scrollTop = chatBox.scrollHeight;

// Text-to-speech speak(answer); }

// Fetch response from OpenAI API async function getBotResponse(question) { try { const response = await fetch("https://api.openai.com/v1/chat/completions", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": "Bearer YOUR_API_KEY" // Replace with your OpenAI API key }, body: JSON.stringify({ model: "gpt-3.5-turbo", messages: [{ role: "user", content: question }] }) }); const data = await response.json(); return data.choices[0].message.content; } catch (err) { return "Sorry, I could not fetch an answer. Check your internet connection."; } }

// Text-to-speech function function speak(text) { if ("speechSynthesis" in window) { const msg = new SpeechSynthesisUtterance(text); window.speechSynthesis.speak(msg); } }