How to make and style bot response when creating a chat bot? | Sololearn: Learn to code for FREE!

-2

How to make and style bot response when creating a chat bot?

I have been trying to build a chat bot, but the users message I could display that by creating new html element in JavaScript, but the bots response was unable to display, please how do I make both text display and style them each differently thanks in advance....

6/20/2021 7:00:11 PM

Ikuobase Wisdom Ewaensetin

23 Answers

New Answer

+4

can you show an example code of what you mean ? I can't really understand what you are looking for , that's why asking for code . Or you can wait for others to help you out.

+2

assuming you have a container target to display both user messages and bot response: when user enter a message, create an element to receive its text, assign it and a class name used to style user message, then append it to the container: user_msg = document.createElement("div"); user_msg.textContent = user_input_string; user_msg.classList.add("user-msg"); container.appendChild(user_msg); when bot answer some text, follow same path, but add a class used to style bot answers: bot_msg = document.createElement("div"); bot_msg.textContent = bot_string; bot_msg.classList.add("bot-msg"); container.appendChild(bot_msg);

+2

Thanks lemme try it right away

+2

It has worked thanks bro

+1

Ikuobase Wisdom Ewaensetin little correction for the bot response to be correctly handled: if(x.match('hey')){ var b = document.createElement("h"); b.textContent="me"; list.appendChild(b); } however, you doesn't define the 'love' function called in body tag onload atteibute ;)

0

Abhay look at the code here https://code.sololearn.com/WmybTQcFk1c1/?ref=app

0

Thanks lemme make corrections

0

0

https://code.sololearn.com/WmybTQcFk1c1/?ref=app

0

variable names used in my first post was only meaningful variable names examples ^^ you should adapt what I show as code to your own code ;P now, I only have the part of your original code I've corrected in my last post... as you have edited it :(

0

Please can you make corrections to my codes and save so I can view?

0

from your original code, you would just had to style the 'h' element (wich is not a valid html5 element) to get the bot answer with its own style... even without styling it, the bot output displays differently from the user messages with my last code correction suggestion ^^

0

now, that's not corrections that you code require, but complete rewrite ^^

0

0

The HTML document is okay right?

0

yes, it seems almost okay (doesn't have looked at it in detail, but it was working)

0

What about the CSS sir, any errors

0

css also seems ok, even if could be improved (user message input lacks at least some left padding)... all others improvments are almost taste questions ;)

0

So the was in the js

0

???