jQuery Tutorial - 27 - Font size switcher Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' de org
and this is a video tutorial for the new
Boston in this video we're going to look
at creating an example application
that's going to reference the paragraph
using a selector or some paragraphs on a
page using a select using selectors in
jQuery so essentially what we're going
to be creating is an application that
allows you to increase the text size on
a page between paragraph tags so the
first thing we're going to do is set up
our page so we know exactly how it looks
so let's first of all go ahead and
create our paragraphs I'm going to
create a paragraph here and that's going
to have some text inside of it so this
is some text I'm then going to create
another paragraph just below this this
is some more text so now just up here we
want to create some links that are going
to allow us to click smaller or bigger
in order to increase or decrease the
font size of this text so let's go ahead
and create our links so this one is
going to be well we'll put a label here
so font size this one is going to be
smaller and this one here is going to be
bigger so the link is going to be hash
because we're not actually linking to a
page we're using jQuery to handle when
we click on these links but we're going
to give each one an ID so the first
one's going to be smaller and this one
is going to be bigger so now what we can
do is we can create event handlers for
each of these links and then actually
perform an operation on the paragraphs
on the page I increase their size using
the bigger link or decrease their size
using the smaller link let's just go
over to our browser and take a look at
our page so this is how it looks at the
moment we've got a smaller link and a
bigger link which we can click on and
then once we finish the tutorial and
actually created the jQuery
functionality these paragraphs will
increase now we're kind of taking the
long way round however the reason I'm
doing there
is to demonstrate the use of selectors
and just to make things a bit easier to
understand so we've included selectors
jjs inside of our page as well as jQuery
j/s and we have selectors j/s here open
in our text editor ready to start
editing so the first thing we want to do
is create event handlers for both these
links so we're going to use a selector
to reference the smaller link and then
when this is clicked we want to run a
function so we create our function
definition and then between these
paragraphs hit our these curly braces
here we are going to perform a function
and this function is going to be change
underscore size we're going to go ahead
and look at the parameters in a minute
when we've done the same for bigger and
then we'll be you know feeding in the
parameters and and looking at creating
the actual function itself so the next
is a hash bigger and we want to again
create the same on the same click event
handler and again we want to outline a
function here and between these brackets
we want to run the same function now the
parameters that we're going to feed here
is which element we want to be made
bigger now for example we could choose
the element or an asterisks or for all
elements on the page or we could just
choose a specific element and in this
case we're just going to choose a
specific element so the element that we
want to feed in is P and the next
parameter will just be smaller so what's
going to happen in this change size
function we're going to change all of
the elements that correspond to this
selector to a smaller font size and
we're going to use an if statement to
check this value inside of this change
size function so we'll do that
the same for this one we'll select all
paragraphs and we want to make them
bigger
okay so let's go up and start to define
our function and the parameters that we
need to feed in and then we'll create
the rest of the function so the function
is called change underscore size we'll
create our block and then we'll fill in
the parameters that we need to feed in
so the first is the element that we want
to change or the element set that we
want to change and the second parameter
is the size so this element here
corresponds to the P and this size here
corresponds to this textual
representation of where we want the size
to go do we want to increase it or
decrease it
okay so inside of our function we need
to grab the current size of the text
inside of these paragraphs so there'll
be a default text size for these
paragraphs which we can retrieve so I'm
going to create a variable called
current and that's going to be equal to
element CSS