DEV Community

Cover image for Make a Simple Chatbot with JavaScript!

Make a Simple Chatbot with JavaScript!

Sylvia Pap on March 19, 2020

Working from home got you feeling lonely? Missing human social interaction? Well it's finally acceptable to suggest making yourself a nice chat bot...
Collapse
 
gus007br profile image
Gus007-BR

What is the advantage of creating a chat like this vs. using the Socket.io library? Your method seems to be far more straight-forward than using Socket.io... Note that I'm very new to NodeJS in general, so maybe I'm comparing Apples to Oranges.

Collapse
 
sylviapap profile image
Sylvia Pap

I’d say the only real advantage here, over any chatbot library, is just the educational purposes lol 😂 I’m a coding bootcamp student so I write these blog posts usually thinking about things that have helped me actually learn, I’ve tried to use libraries before without understanding the fundamentals and it can lead to a difficult mess later.

Collapse
 
dividedbynil profile image
Kane Ong

You: are you a robot?
Chatbot: I am not a bot
You: I don't believe you
Chatbot: Bro...
You: Alright, you pass. How's your day?

Collapse
 
tr11 profile image
Tiago Rangel
Me: are you a robot?
Chatbot: Bro...

Me: Are you a robot?
Chatbot: I'm listening...

Me: are you a bot?
Chatbot: I am a bot. What are you?

Me: I'm a person
Chatbot: I don't understand :/

Me: you should
Chatbot: I don't understand :/

Me: Why?
Chatbot: Great question
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rickasterlyvevoofficalnotfake profile image
rick asterly

i alredy made the chat app is there a way just to add the bot here is the code :

note after you close the tab you will lose your conversation


note the ai is not completed yet so dont judge yet !


chat

<br> var username = window.prompt(&quot;what should we call you&quot;);</p> <p>document.write(&quot;hey &quot;+username +&quot; how are you today ?&quot; );</p> <div class="highlight"><pre class="highlight plaintext"><code>&lt;/script&gt;&lt;/h1&gt; </code></pre></div> <p><body style="background-color: aquamarine; background-image:url(Background.max-x-PIC-MCH043354.jpg); " ><br> <input id="textbox" type="text" placeholder="chat with the ai :)" ><button id="button" onclick="ping.play()" >Send</button><br><br> <ul id="messages"></ul><br> <script src="script.js"> var messages = document.getElementById("messages"); var textbox = document.getElementById("textbox"); var button = document.getElementById("button"); button.addEventListener("click", function(){ var newMessage = document.createElement("li"); newMessage.innerHTML = textbox.value; messages.appendChild(newMessage); textbox.value = ""; }); var ping = new Audio(); ping.src = "ping.mp3";

Collapse
 
poojpg profile image
poo-jpg

I love this! Hilarious and educational!

Collapse
 
vojtektomascz profile image
YT_YouTomCZ

Hi, thanks for the great tutorial! How can I add UTF-8 encoding? Thanks.

Collapse
 
ardianpjetri0 profile image
Ardianpjetri

Save as UTF-8 encoded document.

Collapse
 
Sloan, the sloth mascot
Comment deleted
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
widilo profile image
widilo

Great tutorial, good work! Can you please tell me under which license you published the chatbot on github: github.com/sylviapap/chatbot ? I couldn't find anything about the license in the repository.

Collapse
 
tootsz_na_899e2d6acef32b profile image
Tootsz N/A

Hello! I am a self-learning beginner in programming. I find these kinds of posts very helpful, however, it would be much better if you either tell us where you are placing each snippet of code, or show us what the entire page of finished code is supposed to look like.

Throughout this whole article, I was wondering if I was placing my code in the right place, and, as an autodidactic beginner, I need to know if I am doing it exactly right.

Would you please keep this in mind the next time you create and educational post?

Thanks!

Collapse
 
sylviapap profile image
Sylvia Pap

Hey! Thanks! This is why I link to the GitHub repo - you can see everything and even download the whole project yourself from there

Collapse
 
ben profile image
Ben Halpern

Nice!

Collapse
 
sylviapap profile image
Sylvia Pap

Thank you!

Collapse
 
valhelbferh profile image
Fernando Valencia

Thank you so much, is very nice tutorial...
i'm a beginner in javascript world and i have a question...
In the declaration of constants in the constants.js file, all the possible answers are declared in text, but if I want to deliver a link, how can I add a url value or a link in that js, so that in the chat the user can use the link?

I would appreciate your answer to better understand the operation and learn ...

Collapse
 
valhelbferh profile image
Fernando Valencia

Nobody answers?
Nobody helpme?

Collapse
 
isratmarzan profile image
isratmarzan

Thank you @sylviapap for this post. I always wanted to make a chatbot.

Collapse
 
qiannn03 profile image
Hmmmmmmm

hi i need some help after i following your code i press enter on my website i doesn't work.

Collapse
 
paratrink profile image
Paratik

Hello, i am changing the words in arrays with new (turkish or english ones) it doesn't work, why?

Collapse
 
pradeepradyumna profile image
Pradeep Pradyumna

This is helpful! I too am working on something similar to this one right now and was looking for more concepts like this with just JS and HTML.
Thanks

Collapse
 
sant77 profile image
Santiago Duque Ramos

Nice tutorial.

Collapse
 
gopalak24417825 profile image
gopalakrishna_chinta

hi,am getting an error ,'inputField is not defined'

Collapse
 
shipostings profile image
Shipostings • Edited

Cómo puedo programar la pulsación de un Enter para enviar el mensaje al bot desde un Android?

Collapse
 
paratrink profile image
Paratik

Hello, when i change the answers in the arrays, doesn't work why?