Chatbot Template UI Design Using HTML, CSS, and JavaScript

Chatbot Template UI Design Using HTML, CSS, and JavaScript

Hello coders, Welcome to codewithrandom. Today we’ll create a Chatbot UI Template Design Using HTML, CSS, and JavaScript. We are 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 Template UI Design Using HTML, CSS, and JavaScript projects with source code available for you to copy and paste directly into your own project.

Let us build the Chatbot UI Template Design:

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

 

 

HTML Code For Chatbot

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

50+ Html, Css & Javascript Projects With Source Code

Let us see the output before writing CSS for Chatbot Template.

Chatbot UI Template Design Using HTML ,CSS and JavaScript
Chatbot UI Template Design 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;
}

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

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

 

JavaScript Code For Chatbot

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 written the JavaScript 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.

Portfolio Website using HTML and CSS (Source Code)

Final Output Chatbot UI Template Design Using HTML, CSS, and JavaScript:

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 Template UI 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

This Post Has 0 Comments

  1. Anonymous

    Amazing

  2. Anonymous

    Incrivel, mas gostaria de saber onde consigo baixar esse arquivo url(./bg.jpg)?

Leave a Reply