jQuery and AJAX Tutorials 13 | Creating a Chat Bot Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Ilias and
welcome to your 13th jquery tutorial and
in this tutorial we are going to start
programming the chat pod so in the
previous tutorial we didn't work on the
chat bot itself but we created all this
nice user interface and added all the
features so this tutorial we are
actually going to start coding for our
chat bot anyway before I continue I want
to create a CSS class for the but
because in the last tutorial we created
the CSS class for the username which is
U so this U is within a span element
which is styled and it's blue and bold
and we want to do the same for the bus
so that we can see that the body is
writing alright let's just go ahead and
add some changes to our CSS and you can
actually just go ahead and copy the
username class and earn name it to the
bots and the color
let's just be green color for the bots
so the next step is I want I want to
create a function username which will
ask for the username and if you don't
know what a function is well it's you
know the code we wrote here is actually
we wrote it within a function so
function is pretty much a piece of code
and if you want to split your code into
small smaller parts so if you want to
have every piece of code to do its task
function is one of the best things how
to solve it so we are going to use the
function username to ask the username
and so let's just go ahead and display
the message on the container so I can
just copy this container selector and
its HTML function
and let's just go ahead and c-span class
but make sure you use some other
parentheses when having like nested
parentheses I hope you got it and so
let's say chat bot Colin and then it
closes pan and then we can type our
message saying like hello my name is
Chet but and I'll just say hello what is
your name goes because it's obvious what
the chat box name is hello what is your
name and that's it and before saving
this document and reloading the page we
you have to call this function otherwise
this function just won't won't won't run
and make sure you call the function
within this function since this jQuery
sign function what it does i explained
here in i don't know memory tutorial but
i explained it to you it means that this
code within this function will execute
only when the page is loaded so this is
something what we need and let's just go
ahead and say username and empty
brackets which will call the function
username so let's just go ahead and
reload the page and see what's going to
happen yeah so it did you see the chat
pod it's green and it's asking for our
name so that's it for this tutorial and
in the next tutorials we are going to
continue code in the chat pod and now
it's already asking our name and has all
this nice user interface and stuff so I
hope you guys liked it and I'll see you
guys in the 14th tutorial and have a
nice day bye