jQuery and AJAX Tutorials 33 | AJAX Custom Filters Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

top guys my name is Elias as your 33rd
tutorial in this tutorial we want to
have a filter so I already created
categories for the pictures which is
architecture city in nature that means
if I click on architecture I want only
pictures with architecture to be on the
screen and the rest should fade out so
we have three categories like nature
nature these pictures could be nature
and these could be architecture and well
this is a an unordered list which I
created right here so I'll leave it on
the screen for real quick so that you
can click pause and type all this code
and I also added classes to the pictures
and I didn't add classes to the image
elements I added classes to its parent
elements which is this li li HTML tags
so now I want you guys to retype this
code from from here to here and when you
are done you can go ahead and do the
following so we we need a code for it
and since this code is going to be a
little tricky because this is going to
be the most difficult algorithm so far
we written in jQuery and this tutorials
so I'll create a new document call it in
the J's folder for JavaScript alcohol
just filtered rjs and now we are going
to start programming for it so let's
just go ahead and do something what we
usually do create this function to make
the code run only when the hold page is
loaded and so I have the following idea
if user clicks nature I want first all
the pictures here to disappear and the
pictures we which have class nature to
appear back and this is how we are going
to make it so first we need a selector
for
event for the event of click on this
three categories and we had but before
but after you could created this
filtered IGS you would want to add this
external JS file to your document so
just type script source and set it equal
to GS filter da GS otherwise this
children s won't be added to your page
alright now we can already create a
selector for for the events for this
clicks and this for example this nature
Ally element is situated just right in
this UL unordered list with the ideal
filter so we can just say filter space
Li and this will track all the clicks on
the on these three categories and then
use our standard function click and
right now our first task is to fetch the
category which is clicked which is going
to be very easy so we create a new
variable and sell it set it equal I will
name it categories that equal to this
dot HTML so what it does is this that
this refers to the element which is
clicked and that HTML is referring to
its contents so in this case we will
have nature if you click on nature so
the category will be nature now let's
just go ahead and run a simple test so
we make sure that it works on that
nature I'm sorry category so when I
click on nature I expect the word nature
to appear in the console as well as when
I click on a city I expect the word city
to appear in the console let's go ahead
and do that or load the page first so I
click architecture and I have
architecture down here so that my script
knows that that I want only pictures
with the idea of with a class of our key
sure to stay on the page okay great so
we don't have lots of time we won't make
it in this tutorial anymore probably do
it in the next two or three tutorials
but this is your beginning anyway
and I promise that the next tutorial
will be lots of fun and it'll be very
interesting and you'll you will see how
cool jQuery is and that you did a good
job learning jQuery because you will be
able to do the same things on your own
so I hope you guys like this tutorial
and I'll see you guys the next one