Hello Coder! Welcome to the Codewithrandom blog. In this blog, We learn how to create Chatbot using HTML, CSS, and JavaScript Code. So if users type a specific word they get a specific answer in Chatbot that we write in JavaScript code.
How to Make Chatbot in Html?
we need Css and Javascript code in an Html file for creating Chatbot in Html. we Create a div, some heading and paragraph, and input where the user can ask a question to the chatbot, and the chatbot show the answer in the heading or paragraph where we want through javascript code.
you can hear what is a chatbot, and how its works.
what is chatbot?
We use html code for baisc tags like we create a heading and paragraph for user instructions. And create an input field using Html. And in css code, we completely styled the main page of the chatbot. Styling input field where the user types a question and gets an answer.
And our final javascript code file in javascript code we create a function for question answer. So if users type a specific word they get a specific answer that we write in javascript code. So this way we create our chatbot using Html, Css, and JavaScript.
I hope you enjoy our blog so let's start with a basic HTML structure for the Chatbot Javascript.
Chatbot Html Code:-
<!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" />
<title>Chatbot Javascript </title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="glass">
<h1>Ask Your Question??</h1>
<h2>Yeah,ask Some Question</h2>
<div class="input">
<input
type="text"
id="userBox"
onkeydown="if(event.keyCode == 13){ talk()}"
placeholder="Type your Question"
/>
</div>
<p id="chatLog">Answer Appering Hear</p>
</div>
<script src="app.js"></script>
</body>
</html>
We will construct the fundamental framework for our chatbot using HTML ideas, but first, we must add some file links to our html file.
Project management is essential while creating a project, and the simplest approach to manage is to make separate files for each language and then link them together inside our website.
For the links for our external CSS file, we will add the external file link inside the head section, and the javascript file is added inside the body section.
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
//Body Section
<script src="script.js"></script>
Adding the structure for Chatbot Html Code
Using the div tag, we will create a container for our chatbot.
Inside the div tag, using the h1> tag, we will add the heading of our chatbot, and then using the input tag with type text, we will create an input column for the user so that they can ask questions to the chatbot.
Then we will create a section using the div tag in which the answer will be displayed.
There is all the HTML code for the Chatbot. Now, you can see output without CSS and JavaScript. then we write Css and JavaScript for the Chatbot.
Let's have a look at our chatbot webpage now that we've added structure.
Chatbot CSS Code:-
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
font-family: sans-serif;
padding: 10em 10em;
background: url(./bg.jpg);
opacity: 0.5;
background-position: center;
background-repeat: no-repeat;
background-position: 100% 20%;
background-size: cover;
display: flex;
align-items: center;
justify-content: space-between;
}
.glass {
width: 500px;
height: 400px;
background-color: rgba(255, 255, 255, 0.1);
padding: 50px;
color: #000;
border-radius: 9px;
backdrop-filter: blur(50px);
border: 2px solid transparent;
background-clip: padding-box;
box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.3);
line-height: 1.5;
transform: translatey(-5%);
transition: transform 0.5s;
}
.glass-1 {
width: 500px;
height: 400px;
background-color: rgba(255, 255, 255, 0.1);
padding: 50px;
color: rgb(122, 82, 82);
border-radius: 9px;
backdrop-filter: blur(50px);
border: 2px solid transparent;
background-clip: padding-box;
box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.3);
line-height: 1.5;
transform: translatey(-5%);
transition: transform 0.5s;
font-size: 1.7rem;
}
.glass h1 {
font-size: 1.5rem;
text-align: center;
}
.glass h2 {
font-size: 1rem;
margin-top: 20px;
}
.input {
width: 100%;
height: 70px;
overflow: hidden;
margin-top: 40px;
}
.input input {
width: 100%;
height: 70px;
border: none;
padding-left: 30px;
padding-top: 0;
outline: none;
font-size: 1.5rem;
border-radius: 20px;
}
.glass p {
font-size: 1.6rem;
margin-top: 30px;
}
Step1: The margin and padding will be set to "zero" using the universal tag selector (*), and the box-sizing attribute will be used to set the box-sizing to "border-box."
We'll set the width and height to 100vw and 100vh, respectively, using the body tag selector. The body's typeface is specified to be "sans-serif." We have added an image to our chatbot using the URL and the background parameter. The display was set to "flex."
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
font-family: sans-serif;
padding: 10em 10em;
background: url(./bg.jpg);
opacity: 0.5;
background-position: center;
background-repeat: no-repeat;
background-position: 100% 20%;
background-size: cover;
display: flex;
align-items: center;
justify-content: space-between;
}
Step2: We will now adjust the width and height to 500 pixels and 400 pixels, respectively, using the class selector (.glass). We will specify a border-radius of 9 pixels using the border-radius attribute. Using the backdrop filter, we will add a filter to the background and give our glass container a blurred backdrop.
We'll now style the components inside of our glass container. Our h1 heading will have a font size of 1.5 rem, and the content will be centred by utilising the text-align attribute. The remaining elements will also get style in a similar manner.
.glass {
width: 500px;
height: 400px;
background-color: rgba(255, 255, 255, 0.1);
padding: 50px;
color: #000;
border-radius: 9px;
backdrop-filter: blur(50px);
border: 2px solid transparent;
background-clip: padding-box;
box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.3);
line-height: 1.5;
transform: translatey(-5%);
transition: transform 0.5s;
}
.glass-1 {
width: 500px;
height: 400px;
background-color: rgba(255, 255, 255, 0.1);
padding: 50px;
color: rgb(122, 82, 82);
border-radius: 9px;
backdrop-filter: blur(50px);
border: 2px solid transparent;
background-clip: padding-box;
box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.3);
line-height: 1.5;
transform: translatey(-5%);
transition: transform 0.5s;
font-size: 1.7rem;
}
.glass h1 {
font-size: 1.5rem;
text-align: center;
}
.glass h2 {
font-size: 1rem;
margin-top: 20px;
}
.input {
width: 100%;
height: 70px;
overflow: hidden;
margin-top: 40px;
}
.input input {
width: 100%;
height: 70px;
border: none;
padding-left: 30px;
padding-top: 0;
outline: none;
font-size: 1.5rem;
border-radius: 20px;
}
.glass p {
font-size: 1.6rem;
margin-top: 30px;
}
Chatbot JavaScript Code:-
function talk(){
var know = {
"Who are you" : "Hello, Codewith_random here ",
"How are you" : "Good :)",
"What can i do for you" : "Please Give us A Follow & Like.",
"Your followers" : "I have my family of 5000 members, i don't have follower ,have supportive Famiy ",
"ok" : "Thank You So Much ",
"Bye" : "Okay! Will meet soon.."
};
var user = document.getElementById('userBox').value;
document.getElementById('chatLog').innerHTML = user + "<br>";
if (user in know) {
document.getElementById('chatLog').innerHTML = know[user] + "<br>";
}else{
document.getElementById('chatLog').innerHTML = "Sorry,I didn't understand <br>";
}
}
We'll build a function called talk() in our javascript, and inside of it, we'll establish an object variable in which we'll store the number of strings before using the document.
We will choose the HTML element using the getelementbyId () method, and we will use the if statement to determine whether or not the asked question is stored in the function. If so, the solution will be displayed. Otherwise, "Sorry, I didn't understand" will appear.
Here is our updated output Chatbot with javascript. Hope you like the Chatbot. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
Written by - Code With Random/Anki
Top comments (0)