- 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