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

Question

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

Answer 1

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.

Answer 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);

Answer 3

Thanks lemme try it right away

Answer 4

It has worked thanks bro

Answer 5

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 ;)

Answer 6

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

Answer 7

Thanks lemme make corrections

Answer 8

Please review

Answer 9

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

Answer 10

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 :(

Answer 11

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

Answer 12

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 ^^

Answer 13

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

Answer 14

😮😪😥

Answer 15

The HTML document is okay right?

Answer 16

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

Answer 17

What about the CSS sir, any errors

Answer 18

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 ;)

Answer 19

So the was in the js

Answer 20

???