Scribd
Upload
45 views3 pages

Document

The document outlines the structure and functionality of a simple chatbot interface using HTML, CSS, and JavaScript. It includes elements for user input, message display, and styles for the chat interface, as well as functions for handling user messages and generating bot responses. The code ensures a responsive design and user-friendly interaction through event listeners and message handling functions.

Uploaded by

geethasb1980
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
45 views3 pages

Document

The document outlines the structure and functionality of a simple chatbot interface using HTML, CSS, and JavaScript. It includes elements for user input, message display, and styles for the chat interface, as well as functions for handling user messages and generating bot responses. The code ensures a responsive design and user-friendly interaction through event listeners and message handling functions.

Uploaded by

geethasb1980
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd

<!

DOCTYPE html>: Declares the document type and version of


HTML (HTML5 in this case).
<html lang="en">: The root element of the HTML document,
specifying the language as English.
<head>: Contains meta-information about the document,
including character set and title.
<meta charset="UTF-8">: Sets the character encoding for the
document to UTF-8.
<meta name="viewport" content="width=device-width, initial-
scale=1.0">: Ensures proper rendering on mobile devices by
controlling the viewport's size and scale.
<title>: Sets the title of the webpage, displayed in the browser
tab.
<style>: Contains CSS for styling the chatbot interface.
Body styles: Sets the font and background color for the entire
page.
#chatbox: Styles the chat area, including its size, border,
background, and scroll behavior.
#userInput: Styles the input field where users type their
messages.
#sendBtn: Styles the send button.
.message: Adds spacing for messages.
.user and .bot: Different colors and alignments for user and bot
messages.
<h1>: Displays the title of the chatbot.
<div id="chatbox">: The area where chat messages are
displayed.
<input type="text" id="userInput">: A text input for users to
type their messages.
<button id="sendBtn">: A button to send the user's message.
Element Selection: Gets references to the chatbox, input field,
and send button using getElementById.
Event Listeners: Adds click event to the button and a keypress
event to the input field. If the Enter key is pressed, it triggers
the sendMessage function.
sendMessage Function: Captures the user's message, checks if
it's empty, and appends it to the chatbox.
setTimeout: Simulates a slight delay for the bot’s response to
make it feel more natural.
appendMessage Function: Creates a new div for each message,
assigns it a class based on the sender (user or bot), and
appends it to the chatbox. It also ensures the chatbox scrolls to
show the latest message.
getBotResponse Function: Matches the user's message to
predefined responses stored in an object. If the message
doesn't match any keys, it returns a default response.

This code creates a simple yet engaging chatbot interface that


allows users to interact with predefined responses. The layout is
styled with CSS, and JavaScript handles user input, message
display, and bot responses.

You might also like