Coding

JavaScript Tutorial | Modals & Loops | Part 2

  • 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