JavaScript Tutorial | Modals & Loops

00:00:01 welcome to this video in the previous
00:00:04 video of the series we created the
00:00:07 JavaScript logic to make it possible to
00:00:10 open and close a modal on click so if we
00:00:14 click on to this image right here this
00:00:15 modal and this backdrop open and if we
00:00:19 click anywhere on to this backdrop both
00:00:21 the modal and the backdrop are closing
00:00:24 that's nice and we achieved this by
00:00:27 using the query selector right here and
00:00:30 we selected the trip image class a class
00:00:33 both the left and the right image share
00:00:37 right here
00:00:38 but the problem is that with this method
00:00:41 we are not able to open the modal
00:00:43 whenever we click onto this second image
00:00:46 the reason for that is that by using the
00:00:49 curie selector method we are only able
00:00:52 to select the first model that has a
00:00:56 specific class in our case so this means
00:00:59 the query selector is probably not the
00:01:02 perfect approach for our goal let's see
00:01:05 how we can change that and improve that
00:01:07 solution in this video
00:01:12 now as I said the problem is that with
00:01:15 our current Curie selector we can only
00:01:17 select the first image right here so we
00:01:21 actually need a method well that allows
00:01:23 us to select both images for that we can
00:01:27 go back to our code and now add the all
00:01:30 keyword after our query selector right
00:01:34 here with all we will now no longer be
00:01:37 able to select only the first image of a
00:01:40 specific class in our cage and then it's
00:01:42 done we cannot select any additional
00:01:44 element with this method as the name
00:01:48 says we can select all the elements of a
00:01:51 specific sector in our case tea trip
00:01:53 image class on our website so if we go
00:01:56 back to the page and reload it we can
00:01:59 now see that we don't have a single
00:02:01 element selected but we get such a node
00:02:05 list if we open that node list right
00:02:07 here you can see that we have the first
00:02:10 image selected right here and we also
00:02:13 selected the second image right there
00:02:15 also have a look at these numbers right
00:02:18 here each image has its own index number
00:02:22 inside this node list the first image
00:02:25 has the index number zero so item one is
00:02:28 zero from a node list perspective and
00:02:31 then we have the second image which has
00:02:33 the index number one this would continue
00:02:36 the third image would have the index
00:02:37 number two and so on but with that we
00:02:40 are now able to select both images the
00:02:43 question now is can we also access these
00:02:46 images because now we have these two
00:02:48 images with two different index numbers
00:02:50 but we might want to access a specific
00:02:52 image the first or the second one we can
00:02:55 do that in JavaScript by simply adding
00:02:58 the image SF variable so this variable
00:03:03 appear now adding the curly braces like
00:03:08 this and now select the image or access
00:03:13 the image based on this index number
00:03:16 right here this means if I would now add
00:03:19 the zero right here like that and now
00:03:23 console.log this and
00:03:25 tire code right here and don't forget
00:03:29 bracket and if I now reload the page you
00:03:32 can see that we now have the same
00:03:35 behavior we had before we selected this
00:03:38 first image but now we selected it
00:03:41 inside this node list this means if I
00:03:45 now change the zero right here to one
00:03:47 like that and we load the page you can
00:03:51 see that now the second image is
00:03:53 selected and therefore we have access to
00:03:56 the second image now so that's pretty
00:03:59 cool already we are now able to select
00:04:01 both images but we cannot work with that
00:04:05 as of now because actually what we now
00:04:07 want to achieve is once we click onto
00:04:10 this or that image our modal should open
00:04:13 once again to do this we have to react
00:04:16 to a specific event again a click event
00:04:19 now in the last video I used the on
00:04:22 click method right here in this video I
00:04:26 want to use an alternative I want to use
00:04:29 an event listener how does this work
00:04:31 well first I will get rid of the
00:04:34 console.log now like this and like that
00:04:36 and now we have our image that we want
00:04:40 to select then I will add a dot and now
00:04:43 write add event listener like that to
00:04:47 make such an event listener work we have
00:04:49 to specify an event and we have to
00:04:52 specify well what should happen once

00:04:54 this event occurs for that we'll open
00:04:57 the brackets and first specify our event
00:05:00 which is a click event at the moment
00:05:04 like that if you're not sure about the
00:05:07 events we can add to such an event
00:05:09 listener make sure to have a look at the
00:05:11 video description where you can find a
00:05:13 link to the mdn which dives deeper into
00:05:15 that but in this video we will only use
00:05:18 the click event after specifying this
00:05:21 event we also have to specify what
00:05:23 should happen now and well what should
00:05:25 happen is actually already defined by us
00:05:28 because we want to open the modal
00:05:30 whenever we click onto this image right
00:05:32 here so let's simply add open modal
00:05:36 right here no brackets because we don't
00:05:39 want to ex
00:05:39 the function immediately and if we now
00:05:42 delete our old code right here we don't
00:05:45 need that anymore like this and now go
00:05:48 back to our website and reload it you
00:05:50 can see that if I click onto it now the
00:05:54 modal and the backdrop is opening if I
00:05:57 click on to the first image nothing is
00:05:59 happening though because we only
00:06:01 specified or selected the image with the
00:06:04 index number in the node list one so as
00:06:08 you can see right here this image right
00:06:10 here with that number if we would now
00:06:13 simply take the code right here and
00:06:16 maybe copy it up there and now change
00:06:19 the one to a zero like that and go back
00:06:23 and reload the page then this would work
00:06:26 for the left image right here and also
00:06:29 for the right image so with that we made
00:06:33 our modal work for both images and that
00:06:36 actually is quite fine but it's only
00:06:39 quite fine because if you look at the
00:06:41 code again we can see that we basically
00:06:44 copy and paste it at the same code two
00:06:47 times the only difference is the number
00:06:49 right here which allows us to select the
00:06:52 item in the node list and if we would
00:06:54 have more than two images we would have
00:06:56 to copy and paste the same code again
00:06:58 and again and I don't think that's what
00:07:01 we want to achieve wouldn't it be better
00:07:03 if we could do this differently because
00:07:07 why don't we just copy that one time
00:07:10 right here and then not set the fixed
00:07:14 number into our brackets but a variable
00:07:17 for example something like I like that
00:07:21 like this one I so this is basically all
00:07:26 the code that we should need and this
00:07:28 would allow us to get rid of this code
00:07:30 right there
00:07:31 because now we only need a structure
00:07:33 that allows us to change the value for I
00:07:36 so basically it should be 0 and 1 equal
00:07:39 to the index number in our node list
00:07:42 right here and then this code should be
00:07:45 executed now repeating the same code
00:07:48 again and again and changing a variable
00:07:50 is something a loop is perfect for
00:07:53 a loop is a so-called control structure
00:07:56 and in JavaScript we have different
00:07:58 loops for example a while loop and for
00:08:01 loop and for this purpose
00:08:03 the for loop is the one to choose now
00:08:06 how does such a for loop work then well
00:08:08 the for loop starts big surprise now
00:08:10 with the for keyword then we need
00:08:13 brackets right here inside these
00:08:16 brackets we have to specify some
00:08:18 conditions for this loop I will come
00:08:20 back to that in a few seconds and then
00:08:22 we need our curly braces right here so
00:08:25 basically our block and then we could
00:08:27 add this block right here because that's
00:08:30 exactly what should happen for each
00:08:32 iteration of this loop the problem now
00:08:35 is that we didn't specify any conditions
00:08:38 so we didn't define how this loop should
00:08:40 work and because of that we only have I
00:08:42 right here so the first thing we have to
00:08:44 define in our for loop is the starting
00:08:47 condition the starting point that we
00:08:49 have for that we will use the same
00:08:52 variable we have right here
00:08:53 so I and in the beginning I should be
00:08:57 equal to 0
00:08:58 what does this mean well we would have 0
00:09:01 in here and therefore select the first
00:09:03 item in our node list and then this
00:09:06 event listener would become active and
00:09:08 see if we have a click event and if
00:09:10 that's the case the open modal function
00:09:12 would be executed so with that starting
00:09:15 condition being specified we also have

00:09:18 to specify an exiting condition this is
00:09:21 also related to I of course so we will
00:09:24 continue our loop until I is smaller but
00:09:28 smaller than what the image SF length
00:09:35 like that no what does this mean now
00:09:38 well the image SF length right here is
00:09:43 equal to 2 we can see this right here in
00:09:46 our node list but I should only have
00:09:49 values of 0 the starting value so
00:09:53 basically the value that lets us select
00:09:54 do that selects the first image or one
00:09:58 because one would select the second
00:10:00 image and that's why this node list is
00:10:02 important to keep in mind
00:10:04 so this well behavior that the first
00:10:07 has the index number zero the second has
00:10:09 the index number one and so on but with
00:10:11 that structure we make sure that I can
00:10:14 only have values of zero and one and
00:10:16 once I is equal to 1 the loop will no
00:10:19 longer be continued
00:10:20 the only problem now is that our loop
00:10:23 doesn't change the number so it always
00:10:26 stays at zero because we didn't specify
00:10:28 that it should increase the value of our
00:10:32 variable after each iteration this is
00:10:35 the last thing we have to specify in our
00:10:37 for loop and for that we can use the
00:10:40 increment operator here in JavaScript
00:10:43 which simply works like that I plus plus
00:10:46 this simply says that whenever we
00:10:49 finished our loops or one iteration of
00:10:51 our loop the variable so I right here
00:10:55 will be increased by one integer so
00:10:57 after the first loop this will change to
00:11:00 one so this is basically all the code we
00:11:03 need right now so we start with I equal
00:11:06 to 0 therefore we select the first item
00:11:09 in our node list we check if we click on
00:11:12 to this item and if we do that the open
00:11:15 modal function so this function right
00:11:17 here will be executed after that the
00:11:21 variable I will be increased or will
00:11:25 increase by one integer so I will then
00:11:27 be equal to one the loop will check if I
00:11:31 is still smaller than the image SF
00:11:34 variable length so our 2 right here this
00:11:38 is the case so the loop will run once
00:11:41 again this time with I being equal to
00:11:44 one right here
00:11:45 therefore this event listener will
00:11:47 become active and see if we click on to
00:11:50 the second image so this one right here
00:11:52 and if that's the case the open modal
00:11:55 function will be executed after that
00:11:57 this increment operator will become
00:12:00 active again and increase the value for
00:12:04 our I variable to two now and then our
00:12:07 for loop will check if I is still
00:12:10 smaller than our image SF length right
00:12:13 here and as this is equal to two
00:12:15 it will stop the loop right there
00:12:16 because this condition is no longer
00:12:19 fulfilled so
00:12:20 let me now get rid maybe off this code
00:12:23 we don't need anymore
00:12:24 and if we now save that go back to our
00:12:28 page and reload it we should see that if
00:12:31 we click on to this image the modal and
00:12:34 the backdrop is opening and if we click
00:12:36 on to the second image this is also
00:12:38 working perfectly and that's it actually
00:12:41 that's the entire code we need right
00:12:43 here to be able to open and close this
00:12:46 modal depending on the image we are
00:12:49 selecting what we could do as a last
00:12:51 step to make this a bit more consistent
00:12:53 we could also add the event listener
00:12:55 right here to our backdrop to close the
00:12:57 modal for that we will get rid of that
00:13:00 code right here now type at event
00:13:03 listener open the bracket add the click
00:13:06 event as we did it before and now add
00:13:09 the closed modal function right here so
00:13:12 this one with that if we go back and try
00:13:16 it out one less time we can open the
00:13:19 modal close the modal open the modal and
00:13:21 close the model and this is it actually
00:13:24 this was the second approach how to make
00:13:27 such a modal visible and invisible I
00:13:30 hope you liked the video and in the next
00:13:32 video of this beginner sky JavaScript
00:13:34 series we'll work on the contact page
00:13:37 right here because this page is empty
00:13:40 that's not the biggest issue but I also
00:13:43 want to add some nice JavaScript
00:13:45 features in this form we will create
00:13:47 right there which features these are and
00:13:49 how this works let's find that out in
00:13:51 the next video

You may also like