How to create Chatbot Design with the help of HTML CSS & JavaScript | Chatbot Design







How to create Chatbot Design with the help of HTML CSS & JavaScript | Chatbot Design



Introduction

Hello coders, Welcome to codewithrandom. Today we’ll create a Chatbot Design with the help of HTML CSS & JavaScript. We all about chatbot we have seen this thing in our messaging application such as Telegram, WhatsApp, Signal etc. But with the help of HTML, CSS & JavaScript. 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.

Let us build the chatbot design:

HTML Code: 

 <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 code the HTML part and specified the values and ID for text as well as for <p> tag


Let us see the output before writing CSS for Chatbot Design
How to create Chatbot Design with the help of HTML CSS & JavaScript | Chatbot Design

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

We have style the page with the help of External CSS let us see the CSS output before writing JavaScript for Chatbot Design.

How to create Chatbot Design with the help of HTML CSS & JavaScript | Chatbot Design

JavaScript Code:

 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>";
}
}
We have write the JavaScript for chatbot design and we have define the variable in which there are question and answer that chatbot reply when the user interface will ask the chatbot.

Final Output:

Finally, our chatbot design is ready if you have any doubt you can feel free to reach out us via comment section. If you like it comment it as your comment gives motivation to our blogger and they try to bring more learning materials for you.

Happy Coding

Written by @Harsh_9

Share on:

0 thoughts on “How to create Chatbot Design with the help of HTML CSS & JavaScript | Chatbot Design”

Leave a Comment