ADVERTISEMENT

Chatbot Design Using HTML, CSS, and JavaScript

Telegram Group Join Now

ADVERTISEMENT

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.

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

Chatbot Design Using HTML, CSS, and JavaScript
Chatbot Design Using HTML, CSS, and JavaScript

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.

ADVERTISEMENT

Project Name Chatbot Design
Code By Code With Random/Anki 
Written By Harsh
Project Download Copy Code From Given Code Snippets And Codepen Embed
Language Used HTML, CSS, And JavaScript
External Link / Dependencies No
Responsive No

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.

ADVERTISEMENT

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>

 

ADVERTISEMENT

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

ADVERTISEMENT

Read also:

50+ Html, Css & Javascript Projects With Source Code

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

Chatbot UI Template Design Using HTML ,CSS and JavaScript
Chatbot Design Using HTML Code Preview

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.

ADVERTISEMENT

Chatbot UI Template Design Using HTML ,CSS and JavaScript

Read also:

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

Question Answer
“Who Are You” “Hello, Harsh Here”

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

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.

Chatbot Template 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.

ADVERTISEMENT

Telegram Group Join Now

Share on:

2 thoughts on “Chatbot Design Using HTML, CSS, and JavaScript”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT