Build a Chatbot with Vanilla JavaScript
Tags: javascript, fintech, css, beginners
Published: 2021-07-12 21:53:22

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)](https://en.wikipedia.org/wiki/Artificial_intelligence) 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:
```HTML
// 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:

```CSS
  * {
          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`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/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`](https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event) - this event fires when the initial HTML document has been loaded and parsed without waiting for stylesheets, images, and subframes to finish loading.
- [`keydown`](https://developer.mozilla.org/en-US/docs/Web/API/Document/keydown_event) - this event is fired for all keys, regardless of whether they produce a character value.

##KeyboardEvent code
The `keydown` event is a [`KeyboardEvent.code`](https://developer.mozilla.org/en-US/docs/Web/API/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.
```javascript
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`](https://developer.mozilla.org/en-US/docs/Web/API/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.
```javascript
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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase) - Converting the input values to lowercase.
- [Regex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) and [replace()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#:~:text=The%20replace()%20method%20returns,first%20occurrence%20will%20be%20replaced.) -  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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/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.

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

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

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

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

```javascript
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
{% youtube 9RdafdAfS5Q %}

**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](https://github.com/ugwutotheeshoes/chatbot).