jQuery and AJAX Tutorials 12 | Adding the Username Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Yas and
welcome to your 12 gay queer tutorial
and this tutorial we are going to add
this feature which I was talking in the
previous tutorial we want to add the
name of the of the user before the
message with a user Colin so and in the
previous tutorial we added this feature
kind of feature so that the checkbox is
checked every time and we also fix this
issue which we had when we send the
first message we had we had a blank line
right here so in this tutorial as I said
we are going to add the username and
first let's just set a default username
for instance user or whatever for player
oh I don't know and in the next tutorial
we will figure out a kind of a prompt
kind of a dialog and we'll do it in in
JavaScript real quick so that we can ask
what the users name is or we can also
just say you or we can figure out what
we actually how we solve this so and now
let's just go ahead and make the name
appear before the message and so let's
see the previous state is something
which is before and we have to add the
name before the new message right
yeah so we can just go ahead and add a
new variable called user name now I
didn't really do a good job right now
just type in a variables name before
defining it so right here we can
define a new variable and call it user
name and for now let's just set it to
you like this and now the variable is
defined and now we should have this user
name you before every message let's just
try hey
yeah it's saying you and hey but we are
not really satisfied with it so what we
want to do we want the word you to be
styled
to have the word you kind of I don't
know like red or something so um let's
just say we create a span and span is
it's just a basic HTML text element it
doesn't create any line breaks or
something so we can just easily style a
piece of text and we can actually just
go ahead and say class you can define a
class of user name by the way if you
have parentheses and you want to have
another parenthesis within parenthesis I
hope you guys understand what I mean you
can use the other the other type of
parentheses just this once and so just
create a class of user name right yeah
user name and now we have to go to our
CSS and kind of style the user name so
just create a new CSS lecture and I hope
you remember that you know that the dot
stands for the class so which is just
type username and there is why we use
classes for this is well we have user
name we have this span element every
time in every message so we can use ID
we can only use classes and let's just
start
save font size now we don't change the
font size we can change the color and
set the color to all too blue you can
just tie blue or CSS knows of the most
common colors and we can also make it
bold which is font weight I hope ya want
wait and just say bold yeah so we can
now just go ahead and test it test one
yeah now you see it makes the username
blue and bald and the test message the
message is just normal like normal style
so we can say hello is there anybody and
there are no answers and why there are
no answers because we don't have any
chat bot itself which will talk to us
and next tutorials will be programming
our chat bot algorithm so I hope you
guys learn something from this tutorial
and well now our chat bot looks more
like like a chat I mean our chat room
looks like a chat room it looks pretty
pretty real well we can use the word
real for it anyway I hope you guys had
fun and I'll see you guys in the in the
13th tutorial so have a nice day