Simple Chatbot Application


DEMO



Step by Step Algorithm:

1. Declare the document as an HTML document using the DOCTYPE declaration.

2. Use the body element to enclose the content of the document.

3. Use a div element with the id attribute set to 'chatbot' to create a container for the chatbot.

4. Use a div element with the id attribute set to 'chatbot-conversation' to create a container for the chatbot conversation.

5. Use a p element to display a welcome message from the chatbot.

6. Use an input element with the type attribute set to 'text' and the id attribute set to 'chatbot-input' to create a text input for the user to type their message.

7. Use a button element with the id attribute set to 'chatbot-send-button' to create a button for the user to send their message.

8. Close all open HTML elements.

HTML: 



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Chat Bot</title>
</head>
<body>
<div id="chatbot">
<div id="chatbot-conversation">
<p>Welcome to the chatbot! How can I help you today?</p>
</div>
<input type="text" id="chatbot-input" placeholder="Type your message here...">
<button id="chatbot-send-button">Send</button>
</div>
<script src="app.js"></script>
</body>
</html>

CSS: 


*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}

#chatbot {
width: 50%;
margin: 10% auto;
text-align: left;
font-family: sans-serif;
}

#chatbot-conversation {
border: 1px solid #ccc;
height: 200px;
overflow-y: scroll;
padding: 10px;
width: 100%;
}

#chatbot-input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

#chatbot-send-button {
width: 100%;
background-color: lightblue;
border: none;
padding: 14px 20px;
margin: 8px 0;
border-radius: 4px;
cursor: pointer;
}

#chatbot-send-button:hover {
background-color: skyblue;
}

Step by Step Algorithm:

1. Select the element with the id attribute set to 'chatbot-send-button' using document.getElementById('chatbot-send-button') and assign an anonymous function to its onclick event.

2. Inside the anonymous function, select the element with the id attribute set to 'chatbot-input' using document.getElementById('chatbot-input') and store its value in a variable named input.

3. Set the value of the element with the id attribute set to 'chatbot-input' to an empty string using document.getElementById('chatbot-input').value = ''.

4. Select the element with the id attribute set to 'chatbot-conversation' using document.getElementById('chatbot-conversation') and store it in a variable named conversation.

5. Create a new p element using document.createElement('p') and store it in a variable named message.

6. Set the innerHTML of the message element to the value of the input variable.

7. Append the message element to the conversation element using the appendChild method.

8. Call the getResponse function with the input variable as an argument and store the returned value in a variable named response.

9. Create a new p element using document.createElement('p') and store it in a variable named message.

10. Set the innerHTML of the message element to the value of the response variable.

11. Append the message element to the conversation element using the appendChild method.

12. Set the scrollTop property of the conversation element to its scrollHeight property to scroll the conversation to the bottom.

13. Define the getResponse function, which takes an input argument.

14. Inside the getResponse function, use an if statement to check if the value of the input argument, converted to lower case, is equal to 'hi'. If it is, return the string 'Hello! How can I help you today?'.

15. Inside the getResponse function, use an else if statement to check if the value of the input argument, converted to lower case, is equal to 'what is your name?'. If it is, return the string 'My name is Chatbot.'.

16. Inside the getResponse function, use an else if statement to check if the value of the input argument, converted to lower case, is equal to 'how are you?'. If it is, return the string 'I am doing well, thank you. How are you?'.

17. Inside the getResponse function, use an else statement to handle all other inputs. Return the string 'I am not sure what you mean. Can you please rephrase your question?'.

Java Script: 


document.getElementById('chatbot-send-button').onclick = function() {
// get user input
var input = document.getElementById('chatbot-input').value;

// clear the input field
document.getElementById('chatbot-input').value = '';

// add the user's message to the conversation
var conversation = document.getElementById('chatbot-conversation');
var message = document.createElement('p');
message.innerHTML = input;
conversation.appendChild(message);

// get the chatbot's response
var response = getResponse(input);

// add the chatbot's message to the conversation
message = document.createElement('p');
message.innerHTML = response;
conversation.appendChild(message);

// scroll the conversation to the bottom
conversation.scrollTop = conversation.scrollHeight;
};

function getResponse(input) {
// this is a very simple chatbot that only responds to a few specific inputs
if (input.toLowerCase() == 'hi') {
return 'Hello! How can I help you today?';
} else if (input.toLowerCase() == 'what is your name?') {
return 'My name is Chatbot.';
} else if (input.toLowerCase() == 'how are you?') {
return 'I am doing well, thank you. How are you?';
} else {
return 'I am not sure what you mean. Can you please rephrase your question?';
}
}

You can improve this project in your own version.

We are ready to release more projects please support us by sharing and visiting webdevmonk