Chatbot using HTML CSS and Javascript

In today’s digital age, chatbots have become an integral part of various websites and applications. We can find a solution for all kinds of problems using a chatbot. So in this article, we will see how to create a simple chatbot using HTML, CSS, and Javascript.

How to create a simple chatbot using javascript?

Although we cannot create a bot like chatGPT using JavaScript, so we can create a simple chatbot with fewer features. We can store some queries and answers in objects in javascript and display them in the chatbot if users give something from the stored queries as input.

Check out the preview below, we have stored some queries like “hi”, “how are you”, “your favorite language”, as keys in a javascript object. So if we give these queries as input, the value of the corresponding key object will display. We have created this chatbot so that if you input something that is not in the object, it will give an error “sorry, it’s not in my database“.

Give your input, like hi, how are you, i’m also good, bye.

 

Follow these 3 easy steps to create your own chatbot.

1. HTML Step

1. For users to enter their queries, we need to create an input box using the <input> tag. You must set an ID attribute to “questionBox” in <input> tag because we’ll find the input value given by the user through idname in javascript.
2. Set the onkeydown attribute of <input> tag to “if(event.keyCode == 13){chat()}” in the below code. It is used if the user presses enter after typing the queries in the input box, it will go to the javascript function “chat()“.
3. And to display the answer of the chatbot we need to create a <p> tag, we can use this javascript to find suitable answers to the queries given by users. You should set an ID attribute to “answerBox” in <p> tag because we are going to display the input value by using this idname in JavaScript.

Full code:

<div class="container">
  <h1>Simple ChatBot</h1>
  <div class="ask-input">
    <input type="text" id="questionBox" onkeydown="if(event.keyCode == 13){chat()}" placeholder="Ask Your Question Here!">
  </div>
  <p id="answerBox">Answer will Appear Here</p>
</div>

2. CSS Step

Only if you add CSS styles your comment box will look beautiful and the user will like it. If you use only html and js without CSS it won’t look good, so use CSS for styling and design. You can add any background image in the body or container section. So, you can modify the below CSS code according to your desired style.

Full code:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100vw;
    height: 100vh;
    font-family: sans-serif;
    background: url(https://res.cloudinary.com/ddxwdqwkr/image/upload/q_65/v1632079580/smashing-articles/photo-1533371452382-d45a9da51ad9_1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container{
    width: 500px;
    height: 400px;
    background-color:rgba(255,255,255,0.1);
    padding: 5px;
    color: #fff;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 10px 10px 10px rgba(455,55,68,0.3);
    line-height: 2;
    transform: translateY(-5%);
}
.container h1{
    font-size: 3rem;
    text-align:center;
    color:black;
  font-family:poppins;
}
.ask-input{
    width: 100%;
    height: 70px;
    overflow: hidden;
    margin-top: 40px;
}
.ask-input input{
    width: 100%;
    height: 70px;
    border: none;
    padding-left: 30px;
    padding-top: 0;
    outline: none;
    font-size: 1.5rem;
    border-radius: 20px;
    color: black;
}
.container p{
    font-size: 1.5rem;
    margin-top: 30px;
    color: black;
    text-align: center;
}

3. JS Step

This javascript step is most important in this chatbot project because we’ll store and display the data in javascript.

1. We will create a function “chat()” to store the collections of “keys” and “values” pairs in the object ‘questions‘. You can store multiple keys and values in this object.
2. Then have to find the value of <input> value and stored it in the variable “user”.
3. Finally, we have to find the suitable values of the user’s input key and display it to the <p> tag by using “.innerHTML” function. If the value is not in the object, it will give an error “sorry, it’s not in my database”.

Full code:

function chat(){
    let questions={
        "hi":"hello :)",
        "how are you":"Good 🙂 You say?",
        "i'm also good":"How can i help you!",
        "who are you":"I'm a Chatbot",
        "your favourite language":"Java, but most people hate it :(",
        "okay":"Thanku for being here!",
        "bye":"Okay! see you soon... :)",
    };
    let user=document.getElementById("questionBox").value;
   document.getElementById("answerBox").innerHTML=user + "<br>"; 
    if(user in questions){
        document.getElementById("answerBox").innerHTML=questions[user] +"<br>";        
    }
    else{
        document.getElementById("answerBox").innerHTML="sorry, its not in my database";
    }
}

Conclusion

By using HTML, CSS, and JavaScript, you can create a chatbot like this. With the example codes provided in this article, you have a foundation to build upon.