Chatbot Design Using HTML, CSS, and JavaScript

Hello coders, Welcome to codewithrandom. In this tutorial we will learn how to create a Chatbot Design Using HTML, CSS, and JavaScript. This is all about chatbots we have seen this thing in our messaging applications such as Telegram, WhatsApp, Signal, etc. But with the help of HTML, CSS & JavaScript We Create This Chatbot.

We can create our own chatbot Design. We can Design our chatbot and can feel how it is created and take our Front-End Development Knowledge from freshers to intermediate.

Using HTML And CSS we present Chatbot Design Using HTML, CSS, and JavaScript projects with source code available for you to copy and paste directly into your own project.

Preview of the project

How to create Chatbot Design Using HTML, CSS, and JavaScript?

We have three steps to create design chatbot template. In the first step we will structure the template by using HTML code. Second we will use CSS for styling and give better look. At last we will use JavaScript for adding fuctionality in the chatbot.

Let’s look at HTML code of this chatbot project.

Step 1 – HTML Code

In the HTML code we have a parent div which class name is Glass. This parent div will be our main chatbot container. We have <H1> and <H2> tags.

Then we have a Div which class name is Input, this will be our input container and we have a <input> tag under this container.

We give a Id name UserBox to this <input> tag, and here we added onkeydown inline javascript function.

Then we have <p> tag for answer view, which Id name called chatLog.

<div class="glass">
<h1>Chatbot</h1>
<h2>Lets have Some Interaction</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>

We Have Coded The HTML Part And Specified The Values And ID For Text As Well As For <P> Tag.

Read also:

50+ Html, Css & Javascript Projects With Source Code

Let’s See The Output Before Writing CSS For Chatbot Template.

Step 2 – CSS Code

In CSS code we have styled the chatbot template, and we have added proper margin, padding, background-color, input border-radius, etc to design this 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;
}

We have styled the page with the help of External CSS. let’s see the CSS output before writing JavaScript for Chatbot Design.

Read also:

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

Step 3 – JavaScript Code

We have written the JavaScript code for chatbot design and we have defined the variable in which there is a question and answer that the chatbot replies to when the user interface will ask the chatbot.

We have a variable called Know, here we have created a object of question and answer. as below

When user type question “Who Are You”, after click enter key, the answer will appears as “Hello, Harsh Here”

We have also if, else condition for when user type a different question which would not matched in question data, in answer section a messeage will appears that, Sorry,I Didn’t Understand!

function talk(){
var know = {
"Who are you" : "Hello, Harsh here",
"How are you" : "Good :)",
"Your favourite Cricket Team" : "My favorite cricket team is Mumbai Indians",
"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>";
}
}

Read also:

Portfolio Website using HTML and CSS (Source Code)

Final Output Chatbot Design Using HTML, CSS, and JavaScript

See the Pen Untitled by ankit (@celebstori) on CodePen.

Finally, Our Chatbot Design Is Ready If You Have Any Doubts You Can Feel Free To Reach Out To Us Via The Comment Section. If You Like It Comment On It As Your Comment Gives Motivation To Our Bloggers And They Try To Bring More Learning Materials For You.

Today We Learn About Using HTML And CSS We Present Chatbot Design Using HTML, CSS, And JavaScript Projects With Source Code Available For You To Copy And Paste Directly Into Your Own Project.

Thank You And Happy Codding!

Written By @Harsh_9