So so far, we have this kind of functionality, we can pop up a sweet alert dialogue and that's great.
But as we said last time, Sweetland actually does a ton of things.
It creates little Tostes that show up in the in the corner that are not too intrusive.
You can do full HTML in a pop up dialogue, which, you know, might allow us to put a form in there.
For example, we can make Ajax calls through JavaScript, we can do a ton of things and we don't want
to write this code over and over and over.
So in my existing project right now, I have this notify model and that's not too bad.
But as we saw last time, this can actually get fairly long.
And if I'm going to be doing a ton of these things or doing it regularly, it might make sense to kind
of make reusable code.
So I said we were going to use JavaScript modules and we are.
And a place you can go read about this in detail is a great site developer, Dortmund's Mozilla Dawg,
and it's the MDN Web docs.
So right there, if you search for modules there, you can get to this page and it gives you a background
on modules that give you the support for the browser and it supports every modern browser these days.
So we are fine and that gives you lots of examples.
What are we going to do?
A really simple example right now.
Let's go back to our code and we're going to leave this stuff that we have here right now.
But at the very bottom, I'm going to create a new function and I'm going to call it prompt, because
I'll be prompting people and I'll be prompting them for all kinds of things.
So in here, it's just like a regular function.
But I'm going to create a new function within this function and I'm going to start it with a keyword
left.
So I'm just creating a variable.
I'm going to call this tost, and that's going to be equal to I'm going to store a function in this
variable function.
And right now I'm just going to make it do nothing more than console log and I'll print out some text
clicked.
Button and got toast.
OK, so I have one functioning and at the very bottom of this function, so I have a function inside,
a function at the very bottom.
This I'm going to return something.
But what I'm going to return is within curly brackets and I'm going to return for tost return toast.
So when this function gets the request for toast, when prompt gets a request for toast, it's going
to return toast and toast is itself a function.
Now we'll do another one.
So I'll copy this and I'll paste this and then this one.
I can't call it toast because I use that name already.
I'll just call it success.
Clicked button and got success the right now, this function, which I stored in a variable success,
is only available within this prompt function until I return it and I can return it by saying success,
Kolan success.
When you get a request for success, return the function success.
And that refers to this function.
So I've created this and now I need to make it available to my code, the rest of the application,
the rest of this page in this case as something that it can use.
So right at the very top, I'm going to get rid of this old console log that we put in ages ago.
I'm going to create a new variable.
I'm going to call it I can't call it project because that gets confusing.
I'll call it attention because this is going to be used to get people's attention and I'm going to make
that equal to the function prompt.
Now it's accessible in here, so let's go down to our event listener here and let's not do a notify
model.
Let's just do this instead.
Let's just call attention the variable I just to find at the top of this, and that is now my autocomplete
says, oh, you have success and toast.
Well, let's call toast and say this now.
I'm going to go back to my page.
I'm going to reload this page.
I'm going to open the console.
And I did that.
I used the keyboard shortcut.
But you can go over here and click on this and choose a web developer and choose web console.
And I'm going to click on this button.
I clicked on the button and I got toast.
OK, that's great.
If I change it from toast to success, the other one and reload this, I click on the button and this
time I got success.
So that's the basic principle behind how modules work.
Now we're using an embedded module.
Normally you'll store these as their separate files and then import them into the page and we'll get
to that eventually.
But right now, I just want to talk about how we can use modules to make things more efficient for us.
So you might be asking yourself, why did you go to all this trouble just to do a console log when you
could have just done console?
Well, imagine, if you will, the console log is thirty lines of JavaScript or 150 lines of JavaScript.
And imagine, if you will, that console, that success is also another 150 lines of JavaScript.
And just imagine that you have to use the functionality found in that function in 75 places around your
Web application.
What I'm doing here is making one larger piece of code that will embody all of the functionality that
I need for all of those various calls.
So I'm going to reduce 75 calls, each being a 75 line function or whatever it is to one module that
I can call with much smaller amounts of code and one that results in is less code overall and less code
overall is easier to maintain.
If I make a change in the module that's called upon in various places throughout my application, I
just need to change it in one place so it becomes way more efficient.
So in the next lecture, we'll turn these little toasts and successes into actual toasts and successes
using Switzler or Swoll, as I tend to call it now and again.
And we'll do that in the next lecture.