jQuery and AJAX Tutorials 11 | Adjusting and Fixing Code 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 11th jquery tutorial and
in this tutorial we are going to make
some improvements on our chat bot and
the first thing i would like to do is
you know I want this checkbox to be
checked when we roll out the page so
let's just go ahead and find our check
box which is in this controls div div
element and there we go
this is input type equals checkbox and
to make this check box checked
constantly not constantly to make these
check box checked when we reload the
page just say checked and that's it and
done don't write any equal signs or any
parenthesis just say checked and so we
just checked every time we loaded page
so this is done and the first thing the
second thing I would like to do is when
I type the message when I starts just
chatting I see that I get this blank
space right here well it's because we we
add this line break to the previous
state and we don't check if the previous
state is empty so I honestly I didn't I
didn't figure out about the solution yet
so we are going to do it right now first
I think we can actually just go ahead
and check if the previous state is empty
and if it is empty we know if it's not
empty we are going to add this break
just break to the previous state
variable so I just say brief state
should be equal to proof state plus line
break and if the previous state not
empty it should add the line break and
if the previous state is empty which
means if this is the first message we
are going to send it shouldn't append
this line break and of course get rid of
this break right here otherwise we'll
have to
line breaks right so let's just go ahead
and test it whether whether it works
um test no it doesn't work so we have to
figure out any another solution we can
check the div elements length before we
send a message so let's just go ahead
and do that let's just say let's just
check the previous States length and you
know JavaScript allows you to access
elements properties using this dot and
just type the property so if previous
state is I don't know zero but now we
don't actually know what the previous
state length is when the div element is
empty so let's just go ahead and let let
the browser display the the div elements
length when it's empty so just go ahead
and say come so log previous proof state
length and it will display the the
length of this of the empty div element
so just open the console just go ahead
and click send and it says three so
let's just go ahead and do it again it
says three again and three again and
three again well great that means that
the length of the empty div element is
three so we can use it so uh let's just
go ahead and say if previous state
length is ah less than four or yeah less
than four we should add the line break
so just let's just test it no it doesn't
work right um
well I think I'm sorry I think it should
be greater than three
yeah now it works now we got rid of this
empty blank line before the first
message so what we actually did is the
following we we got the length of these
of this empty div element and which is
three and if the length is greater than
three that means this is not this is not
the the empty state and we can add this
break line break to the previous stage
well it sounds kind of tricky but well
if you just do it a couple times you
will get the idea of it let me see how
much time we have well unfortunately
this is it for this tutorial and in this
tutorial we are going to add some
feature we are going to ask the user
what his name is
using javascript dialog and will display
the name before the message right here
for example your name is Ilias and your
message is this is my message and of
course will style the name so it will be
easy to recognize that this is the name
and this is the message all right guys
that's it for this tutorial I hope you
had fun and I'll see you guys in the
next one and have a nice one