Emmanuel Ugwu

Posted on Jul 12, 2021 • Updated on May 20, 2022

Build a Chatbot with Vanilla JavaScript

#javascript #fintech #css #beginners

Recently, I visited a website, and while surfing through it, the website's chatbot caught my attention. I had been looking for a new project to work on, so I researched how I could build a chatbot using vanilla JavaScript. While building this project from scratch, I stumbled across many difficulties based on the knowledge I had, and when I say 'from scratch', I mean I did not use any additional libraries or APIs while building. This code is based on existing blog posts, articles, and YouTube videos. Also, note that this project is more of an insight into JavaScript fundamentals, not any form of artificial intelligence (AI) or machine learning. The main prerequisite for understanding this article is the knowledge of HTML, CSS, and vanilla JavaScript.

Getting Started

Let's create a folder to house our project files, broadly divided into three parts —HTML, CSS, and JavaScript. Then we build a barebone HTML file that contains all our HTML components:

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Chatbot</title>
  <link rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="index.js" ></script>
</head>
<body>
  <h1>Chatbot</h1>
  <div id="container" class="container">
     <input id="input" type="text" placeholder="Say something..." autocomplete="off" />
  </div>
</body>
</html>

We’ll do the same for our style.css file to add styling to our application:

  * {
          box-sizing: border-box;
    }

  html {
          height: 100%;
       }

  body {
          font-family: 'Poppins', sans-serif;
          background-color: #fff;
          height: 100%;
          margin: 0;
       }

 .container {
          width: 100%;
          height: 100%;
      }

Listening for events

First off, we'll have to check if the content of our page has loaded before our script has a chance to run, and we'll also need a keycode to send a message to the chatbot using our enter key.
For this to work, an addEventListener method is needed. It calls up a function whenever a specified event is delivered to the target. The two events our addEventListener listen for are:

DOMContentLoaded - this event fires when the initial HTML document has been loaded and parsed without waiting for stylesheets, images, and subframes to finish loading.
keydown - this event is fired for all keys, regardless of whether they produce a character value.

KeyboardEvent code

The keydown event is a KeyboardEvent.code property which provides a code indicating which of the user’s keyboard keys is pressed. For example, a lowercase "a" will be reported as 65 by keydown and keyup. An uppercase "A" is reported as 65 by both events.
With the help of our keydown event, we can create an effective way of sending a message to the chatbot by pressing the enter key. Our addEventListener would listen and respond anytime the enter key is pressed.

document.addEventListener("DOMContentLoaded", () => {
inputValue.addEventListener("keydown", (e) => {
      if (e.code === "Enter") {
        let input = inputValue.value;
        inputValue.value = "";
        output(input);
      }
    });
  });

In the code snippet above, e.code === "Enter" indicates the Keycode 13 directly assigned to the Enter button. To know more about Keycodes, read up on the KeyboardEvent object.
The input value from the user is assigned to a variable which we'll make use of later on. One last thing to remember is to clear or reset our input once our message is sent, .value = "" makes this possible. We can use .reset() if our input field was a form tag, but sadly, it isn't.

Creating User and Chatbot responses

Editing user text input

Next, we'll create a function for our chatbot behavior.

function output(input) {
    //remove all characters except word characters, space, and digits 
    let text = input.toLowerCase().replace(/[^\w\s]/gi, "").replace(/[\d]/gi, "").trim();
    text = text
      .replace(/ a /g, " ")   // replaces 'tell me a story' to 'tell me story'
      .replace(/i feel /g, "")
      .replace(/whats/g, "what is") // replaces "whats" to "what is"
      .replace(/please /g, "")
      .replace(/ please/g, "")
      .replace(/r u/g, "are you"); //replaces "r u" to "are you"
}

Our user's input value needs to undergo some changes for our chatbot to understand the message sent by the user, as shown above, and by doing that, we'll have to apply some JavaScript methods, which are:

toLowerCase() - Converting the input values to lowercase.
Regex and replace() - This removes a non word/space character and digit. For example it replaces certain things like whats up to what is up or r u to are you. If the user says what is going on, whats going on, or what's going on, they will all lead to the same valid bot response.
trim() - To trim trailing whitespaces.

Creating a set of arrays

Now that we’ve gotten a good idea of how the user’s text input would turn out, we’ll have to create a set of arrays that include possible user texts and another array of appropriate chatbot responses.

const userTexts = [
    //0 
    ["hi", "hey", "hello", "good morning", "good afternoon", "good day"],
    //1
    ["how are you", "how is life", "how are things", "how are you doing", 
    "are you doing good", "are you fine", "how is your day going", "how is your day", 
    "what's up", "whats up", "you good"],
    //2
    ["what are you doing", "what is going on", "what is up", "how is your day", 
    "what's up", "whats up", "you good"],
    //3
    ["how old are you", "are you old"],
    //4
    ["who are you", "are you human", "are you bot", "are you human or bot"],
    //5
    ["who created you", "who made you", "were you created"]
  ]

  const botReplies = [
    //0
    ["Hello!", "Hi!", "Hey!", "Hi there!","Howdy"],
    //1
    [
      "Fine... and you?",
      "Pretty well, and you?",
      "Fantastic, and you?"
    ],
    //2
    [
      "Nothing much",
      "About to go to sleep",
      "Can you guess?",
      "I don't know actually"
    ],
    //3
    ["I am infinite"],
    //4
    ["I am just a bot", "I am a bot. What are you?"],
    //5
    ["The one true God, JavaScript"]
  ]

We’ll need to create an alternate set of arrays for a situation where the chatbot can not understand the message being sent by the user.

 const alternative = [
   "Same",
   "Go on...",
   "Bro...",
   "Try again",
   "I'm listening...",
   "I don't understand :/"
   ]

NOTE: You can add extra user texts and reponses if needed.

Compare and match User and Chatbot responses

Our chatbot function still needs an IF/ELSE statement to compare and match our arrays for a suitable reply or produce an alternate reply if we get a user input that does not match our userTexts array.

function output(input) {
    if (compare(userTexts, botReplies, text)) { 
      // search for exact match in `userTexts`
      finalResult = compare(userTexts, botReplies, text);
    } else {
      // if everything else fails, bot produces a random alternative reply
      finalResult = alternative[Math.floor(Math.random() * alternative.length)];
    }
    // to update our HTML DOM element 
    addToChat(input, finalResult);
  }

We have to match the user and chatbot arrays to make it look like a conversation between a user and the chatbot. In the code snippet above, if we get a user input that matches an option at userTexts[0] such as 'hi' or 'hello', the bot will answer with a corresponding reply from its own set of options from botReplies[0] and so on. Now we'll add the function that matches these two sets of arrays.

function compare(userTexts, botReplies, text) { 
  for (let x = 0; x < userTexts.length; x++) {
      for (let y = 0; y < botReplies.length; y++){
        if (userTexts[x][y] == text) {
          let replies = botReplies[x];
          let reply = replies[Math.floor(Math.random() * replies.length)];
        }
      }
    }
    return reply;
  }

The function works like this, and we'll first have to loop through the index of the userTexts array, then we'll apply another loop to check if our user's input text matches any of the responses at that particular index. After checking to see if it matches, we'll randomly pick a corresponding reply from the botReplies arrays available.

Updating our DOM element

Finally, we'll update our HTML DOM (Document Object Model) to display our messages whenever the user or the chatbot sends a message. Using the .appendChild method, we could create a thread of messages by updating the user and chatbot field every time a message is sent.

function addToChat(input, finalResult) {
    let userDiv = document.createElement("div");
    userDiv.id = "user";
    userDiv.className = "response";
    userDiv.innerHTML = `<span>${input}</span>
    messagesContainer.appendChild(userDiv)`;

    let botDiv = document.createElement("div");
    let botImg = document.createElement("img");
    let botText = document.createElement("span");
    botDiv.id = "bot";
    botImg.className = "avatar";
    botDiv.className = "bot response";
    botText.innerText = "Typing...";
    botDiv.appendChild(botImg);
    botDiv.appendChild(botText);
    messagesContainer.appendChild(botDiv);
}

Video

Demo of our application in use

Conclusion

By following the steps in this article, you can build a chatbot with plain JavaScript.
For a better understanding and overview of the code base of this article, you can check it out on Github.

Top comments (12)

Nithin Sai K J • Jul 13 '21

Not to be blunt, but that is NOT how one should implement a BOT. This is just a program that generates predefined responses. A bot, on the other hand needs to understand context (of previous messages) and formulate new answers.

Emmanuel Ugwu • Jul 13 '21

I understand, the plan here was to create something which exhibits some behaviours of a bot.

Kenny John Jacob • Jul 13 '21

Nice first post, I agree with Nithin, this is too simple for calling it a "chatbot". But it's a good start, and you can look into RASA as a backend which is open source and helps you build a real bot. Or something like dialogflow 😊