You are currently viewing How to Create a Chatbot using HTML , CSS & JavaScript

How to Create a Chatbot using HTML , CSS & JavaScript

How to Create a Chatbot using HTML , CSS & JavaScript

How to Create a Chatbot using HTML , CSS & JavaScript
How to Create a Chatbot using HTML , CSS & JavaScript

 

Welcome to Code With Random blog. In this blog, we learn how to create Chatbot using HTML, CSS, and JavaScript.

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.
Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

I hope you enjoy our blog so let’s start with a basic HTML structure for the Chatbot Javascript.

HTML Code For Chatbot

Table of Contents

<!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>

There is all the HTML code for the Chatbot. Now, you can see an output without CSS and JavaScript. then we write Css and JavaScript for the Chatbot.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Only Html Code output For Chatbot

How to Create a Chatbot using HTML , CSS & JavaScript
How to Create a Chatbot using HTML Code Preview

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;
}

HTML and CSS Updated output Of Chatbot

Ecommerce Website Project Code 

How to Create a Chatbot using HTML , CSS & JavaScript
How to Create a Chatbot using HTML , CSS Code Preview

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>";
}
}

Final output

How to Create a Chatbot using HTML , CSS & JavaScript
How to Create a Chatbot using HTML , CSS & JavaScript

 

How to Create a Chatbot using HTML , CSS & JavaScript
How to Create a Chatbot using HTML , CSS & JavaScript

 

Now that we have completed our Chatbot using HTML, CSS, and JavaScript.  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!

Html Css Project Idea With Code

In this post, we learn how to create Chatbot using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Leave a Reply