jQuery and AJAX Tutorials 7 | Implementing Chat Features Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is julius and
welcome to the seventh tutorial and
jquery and this tutorial we are going to
start program in the chat pod and if you
didn't watch the previous tutorial we
just simply created this user interface
right here and you can download it if
you want but before continue I would
like to get rid of this send button
issue because I don't like the way it is
displayed on the screen I'll just do it
by applying position:absolute to send
send button so now it's fixed so the
first thing I want to do is the
following
you know if I enter some text and press
the Enter key it creates a new line
which is normal but sometimes I want to
have the message sent when I press Enter
so why don't you just create a simple
checkbox down here saying press send a
send on enter so this is what I want to
do first so let's just create a check
box real quick input type equals check
box and ID
I don't know enter mmm yeah it's fine
okay so now we have a checks checkbox
but we don't have any label for it so we
can create a label saying sand on enter
okay great
now we can actually start programming
but before we continue
first let's add jQuery to our document
and I hope you remember I was telling
you to store your jQuery file locally
which I actually did right here so I'll
just copy its name and my jQuery source
is stored within CAS directory I'll just
save it and now I added jQuery to the to
the page so now
start programming let's just create a
script tag and this jQuery function
which is very useful if you forgot what
it does you know every line of code I I
enter between these two curly brackets
will be executed only when the whole
document is loaded okay so since we are
going to work with the text area today
we need to track the the Enter key press
context area we need to select the text
area first and text areas ID is text box
so let's just like the text box and
jQuery has is not nice built-in function
called key press and don't forget to say
event here in the in the brackets and
now let's check if you know this key
press function will fire every time you
you press any key but we want to track
we only want to track the Enter key so
let's just do the magic saying if event
that which is equals to 13 and 13 stands
for stands for enter and if you're
really familiar with other programming
languages you would have to know that
okay so if event which is equal to 13
the following should execute and now we
actually have to check if the checkbox
is checked 3 sounds funny so now let's
say if a checkbox has ID enter so let's
select the checkbox if entered dot prop
and prop stands for property this is how
I can ask if the checkbox is checked and
then just open
Kitt's and say checked which is very
easy because you know jQuery is very
intuitive it's very easy to work with so
if it's checked the following code
should exit code should execute let me
make it look nicer I'm afraid I forgot
to put the dollar sign here okay so what
is it now now we track the Enter key
press and we track the check box so we
just check whether it's checked great
and now we can actually test it by using
the console saying console log enter
pressed checkbox is checked yeah let's
just open the console and make a test so
nothing happens because I didn't check
the checkbox and now I check the
checkbox and enter some stuff and it
says enter press checkbox is checked but
as I see it creates the new line anyway
so we want to prevent it's to create the
new line and so jQuery is very simple
one has a very simple syntax so it's
only event that prevent default and
that's it now it should work the new
line no new line should be created yeah
it works I enter the text I press Enter
it doesn't create any new line and it
kind of sends the message and in this
tutorial we'll really learn how to send
this message to the chat pod so that's
it for this tutorial I hope you liked it
I hope you learned stuff and I'll see
you guys in the next
you'll have a nice one