Coding

Vanilla JavaScript Modal – With CSS display

  • 00:00:01 hi everyone welcome to this video in
  • 00:00:03 this video we'll build a modal or will
  • 00:00:06 have a modal but will control it with
  • 00:00:08 JavaScript and not just a modal which we
  • 00:00:11 toggle we'll learn different ways of
  • 00:00:13 opening and closing it and we'll also do
  • 00:00:15 something in the modal added some text
  • 00:00:18 which we then display outside of the
  • 00:00:19 modal and all of that with vanilla
  • 00:00:21 JavaScript to learn something about
  • 00:00:23 vanilla JavaScript and also to learn how
  • 00:00:26 we can approach something like this or
  • 00:00:28 do something like this which we often
  • 00:00:31 these days do with frameworks or
  • 00:00:32 third-party libraries which might be
  • 00:00:34 better I'm not saying that but let's
  • 00:00:36 have a look at how that would work with
  • 00:00:38 vanilla JavaScript because you always
  • 00:00:40 need to know these basics
  • 00:00:45 now I will actually start with a very
  • 00:00:48 simple starting project
  • 00:00:51 HTML file in that file here
  • 00:00:53 I got a container a day of container
  • 00:00:55 with my molar control there we have some
  • 00:00:58 text this is the text which I want to
  • 00:01:00 edit through or in the modal at some
  • 00:01:02 point a button which should open that
  • 00:01:05 modal and then I got my modal up here so
  • 00:01:08 this will be the modal we display in the
  • 00:01:10 end the modal where I have a text area
  • 00:01:12 to edit this input later and then a
  • 00:01:14 button Q well cancel it or confirm the
  • 00:01:17 editing and then I get my backdrop here
  • 00:01:20 behind the modal now we can't see that
  • 00:01:22 we only see the modal control by the way
  • 00:01:24 all the styles are surprisingly handled
  • 00:01:27 in that style.css file just some basic
  • 00:01:29 CSS if you want to learn more about CSS
  • 00:01:31 if you want to learn these basics take
  • 00:01:33 our complete guide or dive into the
  • 00:01:35 other CSS resources links can be found
  • 00:01:37 in the video description
  • 00:01:38 I'll not dive into it here so let's
  • 00:01:41 close that and let's focus on the
  • 00:01:43 JavaScript code we'll need to write the
  • 00:01:45 first step will be to use that button
  • 00:01:47 that added value button here to open
  • 00:01:49 that modal
  • 00:01:51 so to display this modal the question
  • 00:01:53 therefore is why is it not shown well
  • 00:01:55 that's the one thing we'll dig into you
  • 00:01:57 in the start CSS file the modal right
  • 00:01:59 now is not shown because it has
  • 00:02:01 display:none and it's the same for the
  • 00:02:03 backdrop here at the bottom
  • 00:02:05 it all says display non so an approach
  • 00:02:08 to show that mode would be to simply
  • 00:02:10 switch that value from non to block and
  • 00:02:13 for that let's first of all add a
  • 00:02:16 JavaScript file here I'll simply name it
  • 00:02:18 app dot J s you can name it however you
  • 00:02:20 want and let's make sure that this file
  • 00:02:22 gets imported we want to import it here
  • 00:02:25 right before that closing body tag now I
  • 00:02:28 sometimes get the question why do we
  • 00:02:30 import it there well if we import it
  • 00:02:32 here we're not blocking the rendering
  • 00:02:35 and the parsing of the HTML code because
  • 00:02:38 the browser will parse that file from
  • 00:02:40 top to bottom and if we load the script
  • 00:02:42 last year we ensure that the browser can
  • 00:02:45 parse and render all the average T ml
  • 00:02:47 code additionally we ensure that when
  • 00:02:50 our script loads the rest of the Dom
  • 00:02:53 will have been rendered which allows us
  • 00:02:55 to interact with it from inside
  • 00:02:57 JavaScript now
  • 00:02:59 there are other ways to handle this too
  • 00:03:02 but this is a way that works really well
  • 00:03:04 and works across browsers so let's add
  • 00:03:06 the script tag here script source and
  • 00:03:09 import the app dot JS file and in that
  • 00:03:13 file we need to do two things basically
  • 00:03:15 we need to register a click handler on
  • 00:03:18 that edit value' button which should
  • 00:03:20 open the modal so we want to listen to
  • 00:03:23 clicks on that button and when such a
  • 00:03:25 click of course we want to toggle the
  • 00:03:28 style of the backdrop and the modal
  • 00:03:31 element here so let's go to app J's and
  • 00:03:34 then there let's get access to that
  • 00:03:37 button we want to listen to so – whoops
  • 00:03:40 – that edit value' button here now how
  • 00:03:43 can we do that well there are actually
  • 00:03:45 multiple ways of doing that now this
  • 00:03:48 button doesn't have an ID or anything
  • 00:03:50 about which we could identify it and of
  • 00:03:52 course we could assign such an ID but we
  • 00:03:55 can also of course do it differently we
  • 00:03:58 can simply get a reference to all our
  • 00:04:00 buttons and store all these buttons in
  • 00:04:02 that buttons variable we can do that by
  • 00:04:05 accessing our document it's a built-in
  • 00:04:07 JavaScript object javascript gives us X
  • 00:04:09 – this refers to the Dom basically and
  • 00:04:12 there we can use query selector all to
  • 00:04:15 get access to a couple of elements all
  • 00:04:17 elements which match our selector and
  • 00:04:20 the selector is a string we pass as an
  • 00:04:22 argument and here I simply want to get
  • 00:04:24 access to all buttons and we've dead we
  • 00:04:26 have essentially an array of buttons
  • 00:04:28 stored in that variable now by the way
  • 00:04:30 if you're already a bit of a more
  • 00:04:32 advanced JavaScript user you could of
  • 00:04:34 course also turn this into a constant
  • 00:04:36 this is next-gen JavaScript syntax it's
  • 00:04:39 not supported in older browsers you
  • 00:04:41 would need to compile your JavaScript
  • 00:04:43 code queue older browser code with tools
  • 00:04:46 like babel now I will simply write es5
  • 00:04:49 code which will work in all browsers but
  • 00:04:51 you could of course stored it in a
  • 00:04:53 constant here queue now I got that array
  • 00:04:56 of buttons and now I want to register a
  • 00:04:58 click listener to the last button I
  • 00:05:00 simply know that it's the last button if
  • 00:05:02 you had a more complex project where you
  • 00:05:05 can't ensure that there won't be another
  • 00:05:07 button added in front of this at some
  • 00:05:10 point of time you of course want to
  • 00:05:12 select this there
  • 00:05:12 friendly you wanna use an ID or clearly
  • 00:05:16 at a defined class which only exists on
  • 00:05:19 this button something like this or
  • 00:05:21 you'll use a framework or library like
  • 00:05:23 you or react or angular to control this
  • 00:05:25 anyways but that's not the topic of this
  • 00:05:28 video so I will simply take my patents
  • 00:05:30 and I know that the button to which I
  • 00:05:32 wanna register D click listener is my
  • 00:05:35 third button and therefore since the
  • 00:05:38 index here starts at zero it's that
  • 00:05:40 second well the element with the index
  • 00:05:43 to not the second element but the
  • 00:05:45 element in that array with the index to
  • 00:05:47 which will be the third element and here
  • 00:05:50 I can then call addeventlistener to add
  • 00:05:53 an event listener for the click event
  • 00:05:54 like this and then I define a function
  • 00:05:57 and here again you could use NextGen's
  • 00:05:59 in text to use an arrow function for
  • 00:06:01 example but I'll use the old-fashioned
  • 00:06:04 function here to define a function which
  • 00:06:06 will execute when this happens so this
  • 00:06:09 is my function it's an anonymous
  • 00:06:11 function as you can tell doesn't have a
  • 00:06:12 name it's defined in place where we then
  • 00:06:15 use it and in that function and I want
  • 00:06:17 to open my modal now for that we also
  • 00:06:20 need to get access to that modal and the
  • 00:06:22 backdrop and here we have classes by
  • 00:06:25 which you can select that and we only
  • 00:06:27 use these classes once so for our app
  • 00:06:29 here it's safe to simply select them by
  • 00:06:32 that selector so we'll have the modal
  • 00:06:35 document query selector now not query
  • 00:06:38 selector all because I don't want to
  • 00:06:39 like all elements with the class I know
  • 00:06:41 I will only have one so I will simply
  • 00:06:44 use dot modal to select the first
  • 00:06:47 element which has that modal CSS class
  • 00:06:50 and let's also select that backdrop so
  • 00:06:53 that a grayish area which is displayed
  • 00:06:56 behind the modal we can do that with
  • 00:06:59 document query selector backdrop like
  • 00:07:03 that okay so now we got access to these
  • 00:07:05 elements and in here on the click I will
  • 00:07:08 now use my modal and there access the
  • 00:07:10 style property which is a property an
  • 00:07:15 HTML element has and on that style
  • 00:07:18 property I can then access the display
  • 00:07:22 property and this access to
  • 00:07:25 CSS display style and I can set it to a
  • 00:07:28 new value and I want to set it to block
  • 00:07:30 here and the same for the backdrop
  • 00:07:33 backdrop style gives me access to that
  • 00:07:36 style object and they're all set display
  • 00:07:39 to block now if Dad let's save that and
  • 00:07:43 reload that page and click that button
  • 00:07:45 and you should see that modal in the
  • 00:07:47 backdrop now so this is now controlled
  • 00:07:50 through JavaScript we can't close it the
  • 00:07:52 buttons don't do anything I click on the
  • 00:07:54 backdrop doesn't do anything so that's
  • 00:07:56 the next step and that's of course also
  • 00:07:58 something you can try on your own now
  • 00:08:00 try add and click listeners to the
  • 00:08:02 cancel and confirm button and the
  • 00:08:04 backdrop to close them all on a click of
  • 00:08:06 course I'll now also do it with you it's
  • 00:08:10 essentially the same approach as we have
  • 00:08:11 it here we have a button a click
  • 00:08:14 listener on that third button now the
  • 00:08:16 first two buttons should close the modal
  • 00:08:19 but they'll then also do different
  • 00:08:21 things once we control the text so let
  • 00:08:23 me add more listeners for the first
  • 00:08:26 button for example that will be the
  • 00:08:27 cancel button I'll add a click listener
  • 00:08:30 execute a function here and in that
  • 00:08:33 function I'll set my styles here of the
  • 00:08:36 modal and the backdrop back to non so
  • 00:08:39 that's essentially what I wanted you
  • 00:08:40 here and I'll duplicate this and for now
  • 00:08:44 and that will later change and for now
  • 00:08:46 I'll do the same on that second button
  • 00:08:48 with the index one so that will be the
  • 00:08:50 confirm button and I'll also do the same
  • 00:08:53 when we click the backdrop now this will
  • 00:08:56 not change later so therefore it makes
  • 00:08:59 sense to refactor this and add a new
  • 00:09:02 function which we give a name close
  • 00:09:05 modal maybe and in there I will execute
  • 00:09:09 this code so let's put it in there and
  • 00:09:11 then upon a click on the cancel button
  • 00:09:14 I'll simply point at close modal now
  • 00:09:20 important don't add parentheses here
  • 00:09:22 because Dad would execute it immediately
  • 00:09:24 when this javascript file is first
  • 00:09:26 executed and therefore parsed I don't
  • 00:09:29 want to execute it right at the start of
  • 00:09:31 the script I want to execute it when
  • 00:09:33 this click event occurs and for that
  • 00:09:36 I'll simply pass a reference to this
  • 00:09:38 function
  • 00:09:39 the parentheses to Det click listener
  • 00:09:41 and now this click listener word this
  • 00:09:44 click event will trigger this function
  • 00:09:46 to be executed and I'll do the same for
  • 00:09:49 a click on the backdrop so I'll register
  • 00:09:51 this next to it so that this is really
  • 00:09:53 clear on the backdrop I'll also add an
  • 00:09:55 event listener and there if we click it
  • 00:09:58 I'll also execute clothes modal now down
  • 00:10:01 there on that confirm button we could
  • 00:10:04 also write it in the same way but as I
  • 00:10:06 said we'll change this later so we'll
  • 00:10:08 execute closed modal in here
  • 00:10:10 now here we need parentheses because
  • 00:10:12 we're now inside of that anonymous
  • 00:10:13 function and therefore this anonymous
  • 00:10:15 function is assigned as a reference to
  • 00:10:18 this click event when it executes we run
  • 00:10:20 that code in there and there we then
  • 00:10:22 want to execute closed modal so that's
  • 00:10:24 why we need the parentheses in there and
  • 00:10:26 with all that in place if we now reload
  • 00:10:30 this one more time I can close it with a
  • 00:10:32 click on the backdrop I can't close with
  • 00:10:34 a click on the cancel button and it can
  • 00:10:36 closed with a click on the confirm
  • 00:10:37 button so this is now working we're not
  • 00:10:40 controlling that value though so let's
  • 00:10:42 see how we can do that and for that all
  • 00:10:45 first of all control the value in
  • 00:10:47 JavaScript
  • 00:10:48 I'll name it quote and I'll grab my
  • 00:10:51 quote from HTML here cut it out and add
  • 00:10:56 it to app J's as a string here as a
  • 00:10:59 value for quote and the goal will be to
  • 00:11:02 load that quote into that paragraph
  • 00:11:05 where we output it here and to also load
  • 00:11:08 it into that text area in the modal when
  • 00:11:11 we open the model so that we dare it can
  • 00:11:14 edit it and save the new value entered
  • 00:11:17 by the user in a new variable which we
  • 00:11:20 then assign to that quote variable and
  • 00:11:23 update in all the places where we output
  • 00:11:26 it when the user confirms the choice so
  • 00:11:29 how can we do that well first of all
  • 00:11:32 let's output that quote in that
  • 00:11:34 paragraph there and to do that we need
  • 00:11:37 to get access to the paragraph now for
  • 00:11:39 this app this is the only paragraph on
  • 00:11:41 the page realistically you would of
  • 00:11:43 course have multiple paragraphs on a
  • 00:11:45 page so you would probably add some ID
  • 00:11:48 like quote or something like that which
  • 00:11:51 makes the selection of this easier
  • 00:11:52 here we could have selected directly
  • 00:11:54 with the P tag but I will use the ID so
  • 00:11:58 let me get access to the output
  • 00:12:00 paragraph and they do this with document
  • 00:12:03 query selector selecting by ID with a
  • 00:12:06 hash tag and the ID I assigned was quote
  • 00:12:08 and therefore I'll set output paragraph
  • 00:12:12 text content equal to quote this should
  • 00:12:15 ensure that when I reload here I still
  • 00:12:18 see the text now let's load that text
  • 00:12:21 into the modal when we start editing it
  • 00:12:24 so we need to get access to that text
  • 00:12:26 area in the modal and since it is a text
  • 00:12:29 area in the modal we can get access like
  • 00:12:31 this text edit may be as a variable name
  • 00:12:35 that name all these variable names are
  • 00:12:37 of course up to you and there let's
  • 00:12:39 access document query selector and now
  • 00:12:42 the query selector I can use here and
  • 00:12:43 you use normal CSS selectors here as an
  • 00:12:46 argument
  • 00:12:47 so the selector I can use is in my modal
  • 00:12:49 the text area now we only got one text
  • 00:12:52 area on the page so it could have just
  • 00:12:54 used text area but to be more specific
  • 00:12:56 and avoid clashes with potential over
  • 00:12:59 text areas we might have all use this
  • 00:13:01 approach so now we got that text edit
  • 00:13:04 field here and I now want to change this
  • 00:13:07 when we open the modal which happens
  • 00:13:09 here don't forget so in there I'll set
  • 00:13:11 text edit value' equal to quote if we
  • 00:13:17 now save that and I reload and I click
  • 00:13:19 added value we see the quote in there so
  • 00:13:22 that's working if I change it however
  • 00:13:24 and I confirm I close this but I'm of
  • 00:13:26 course not using that changed value and
  • 00:13:28 the reason for that is that we don't
  • 00:13:30 register that changes to user applies so
  • 00:13:33 that will be the next task we got our
  • 00:13:35 text edit now we also need to do
  • 00:13:37 something when the user changes this and
  • 00:13:39 for this I'll set up a new listener and
  • 00:13:44 you can add it anywhere I'll simply
  • 00:13:46 added at the bottom here text edit add
  • 00:13:48 an event listener and we want to listen
  • 00:13:51 to user input events the input event is
  • 00:13:53 a built-in Dom event which fires
  • 00:13:55 whenever the user changes this value so
  • 00:13:57 on every keystroke basically not when
  • 00:14:00 user types and leaves with the focus the
  • 00:14:03 text area but on every keystroke instead
  • 00:14:06 so that is the event I want to listen to
  • 00:14:09 you and on every keystroke
  • 00:14:11 I'll execute this function here so this
  • 00:14:13 will run quite a lot and in that
  • 00:14:15 function I now wanna update the value
  • 00:14:18 the user entered I don't want to
  • 00:14:20 directly change the quote variable
  • 00:14:22 because I don't know if the user will
  • 00:14:24 confirm his choice and even though
  • 00:14:26 updating the quote variable wouldn't
  • 00:14:28 instantly change the output paragraph it
  • 00:14:30 would still change the value we start
  • 00:14:33 with when we open the modal because
  • 00:14:34 there we load the quote so I don't want
  • 00:14:36 to edit this before we confirm our added
  • 00:14:39 so instead I'll add a new variable
  • 00:14:42 edited quote and that will be an empty
  • 00:14:45 string initially let's say and now when
  • 00:14:49 we open that modal I'll also set the
  • 00:14:53 edited quote equal to the quote because
  • 00:14:54 status D quote we now start with but
  • 00:14:58 when the user types something or changes
  • 00:15:00 something and that could also be dead
  • 00:15:02 the user deleted everything then I'll
  • 00:15:04 set edited quote equal to and now we
  • 00:15:07 need to get access to the current value
  • 00:15:09 of that a text area so we can now use
  • 00:15:12 text edit value again this is not just a
  • 00:15:15 property we can use to set the value
  • 00:15:17 it's also something we can use to get
  • 00:15:19 the current value so now we'll get the
  • 00:15:21 current value after the user did
  • 00:15:24 something and then we'll store that new
  • 00:15:26 value in edited quote this is the value
  • 00:15:29 we want to use when the user closes the
  • 00:15:31 button by clicking that confirm button
  • 00:15:33 which is this button remember now in
  • 00:15:36 there we could add some if check to
  • 00:15:38 check if edited quote trim to remove
  • 00:15:42 excess white space at the beginning and
  • 00:15:43 end length is greater than zero if it's
  • 00:15:47 not greater let's say we don't want to
  • 00:15:49 take that value so it has to be a
  • 00:15:50 non-empty value but that's optional so
  • 00:15:53 we can't add this check and if this is
  • 00:15:55 true all said quote equal to edited
  • 00:15:57 quote and I'll update my output
  • 00:15:59 paragraph so here I'll set output
  • 00:16:01 paragraph equal to quote again excuse me
  • 00:16:04 output paragraph text content equal to
  • 00:16:07 quote again so that essentially here is
  • 00:16:10 the same line I have up here of course
  • 00:16:13 so therefore we can also refactor this
  • 00:16:15 remove it from there and put it into a
  • 00:16:17 function functional add here
  • 00:16:22 Update paragraph and in there I'll set
  • 00:16:27 my text content to the quote and I just
  • 00:16:29 called that update paragraph when we
  • 00:16:34 first run our script and then whenever I
  • 00:16:36 do want to update it so for example here
  • 00:16:39 when I know I changed something
  • 00:16:40 I'll call update paragraph with that
  • 00:16:44 let's save that and let's reload this
  • 00:16:46 one more time if I load this and I click
  • 00:16:48 confirm we keep the value if I now
  • 00:16:51 replace that with an exclamation mark we
  • 00:16:53 see that exclamation mark here too and
  • 00:16:55 if I remove everything
  • 00:16:57 it keeps the old value because that was
  • 00:17:00 now an empty input and we added this if
  • 00:17:02 check if I just remove something like
  • 00:17:06 this then it takes that value so this is
  • 00:17:08 now working and now we're controlling
  • 00:17:10 this all with vanilla JavaScript we now
  • 00:17:13 have a way of opening and closing the
  • 00:17:15 modal and off adding that text to the
  • 00:17:19 text area controlling it there using the
  • 00:17:22 new value and outputting it in the
  • 00:17:24 paragraph now there's one thing we're
  • 00:17:27 doing thus far though we already created
  • 00:17:30 the entire modal here in the HTML code
  • 00:17:33 and we just toggled some CSS class to
  • 00:17:37 show or hide it now this is not
  • 00:17:39 necessarily wrong but you could of
  • 00:17:41 course also try to create this modal and
  • 00:17:45 the pro backdrop programmatically so
  • 00:17:48 through JavaScript that of course is way
  • 00:17:52 more work though because that would mean
  • 00:17:54 that we remove our entire markup here
  • 00:17:57 and instead add a lot of JavaScript code
  • 00:18:00 to create it there let's still do that
  • 00:18:02 in the second part of this video