Telegram Group Join Now
Create a Chatbot using HTML, CSS, and JavaScript
.png "How to Create a Chatbot using HTML , CSS and JavaScript")
Welcome to Code With Random blog. In this blog, We learn how to create Chatbot using HTML, CSS, and JavaScript. So if users type a specific word they get a specific answer in Chatbot that we write in JavaScript code. So this way we create our chatbot using Html, Css, and JavaScript.
Live Preview Of Chatbot:-
I hope you enjoy our blog so let’s start with a basic HTML structure for the Chatbot Javascript.
| Code by | Codewithrandom |
| Project Download | Link Available Below |
| Language used | HTML, CSS, and JavaScript |
| External link / Dependencies | No |
| Responsive | YES |
HTML Code For Chatbot
<!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>
ADVERTISEMENT
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.
Weather App Using Html,Css And JavaScript
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
- 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.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Only Html Code output For Chatbot
CSS Code For Chatbot
* {
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.”
Restaurant Website Using HTML and CSS
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.
Car Racing Game Using HTML,CSS and JavaScript Code
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;
}
HTML and CSS Updated output Of Chatbot
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Javascript Code For Chatbot
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.
Final Output Of Chatbot Using Html Css And Javascript
Gym Website Using HTML and CSS With Source Code
Here is our updated output 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!
10+ HTML CSS Projects For Beginners with Source Code
Written by – Code With Random/Anki
ADVERTISEMENT
Which code editor do you use for this Chatbot project coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
Yes! this project is a responsive project.
ADVERTISEMENT
Do you use any external links to create this project?
No!
ADVERTISEMENT
