1

00:00:00,810 --> 00:00:07,560

So so far, we have this kind of functionality, we can pop up a sweet alert dialogue and that's great.



2

00:00:07,560 --> 00:00:10,560

But as we said last time, Sweetland actually does a ton of things.



3

00:00:11,040 --> 00:00:15,410

It creates little Tostes that show up in the in the corner that are not too intrusive.



4

00:00:15,840 --> 00:00:23,090

You can do full HTML in a pop up dialogue, which, you know, might allow us to put a form in there.



5

00:00:23,100 --> 00:00:28,080

For example, we can make Ajax calls through JavaScript, we can do a ton of things and we don't want



6

00:00:28,080 --> 00:00:30,420

to write this code over and over and over.



7

00:00:30,720 --> 00:00:36,660

So in my existing project right now, I have this notify model and that's not too bad.



8

00:00:37,020 --> 00:00:40,010

But as we saw last time, this can actually get fairly long.



9

00:00:40,140 --> 00:00:44,820

And if I'm going to be doing a ton of these things or doing it regularly, it might make sense to kind



10

00:00:44,820 --> 00:00:45,920

of make reusable code.



11

00:00:46,590 --> 00:00:49,860

So I said we were going to use JavaScript modules and we are.



12

00:00:50,370 --> 00:00:56,280

And a place you can go read about this in detail is a great site developer, Dortmund's Mozilla Dawg,



13

00:00:56,310 --> 00:00:59,040

and it's the MDN Web docs.



14

00:00:59,040 --> 00:01:05,250

So right there, if you search for modules there, you can get to this page and it gives you a background



15

00:01:05,250 --> 00:01:10,230

on modules that give you the support for the browser and it supports every modern browser these days.



16

00:01:10,260 --> 00:01:13,860

So we are fine and that gives you lots of examples.



17

00:01:13,860 --> 00:01:14,370

What are we going to do?



18

00:01:14,370 --> 00:01:16,130

A really simple example right now.



19

00:01:16,170 --> 00:01:21,750

Let's go back to our code and we're going to leave this stuff that we have here right now.



20

00:01:21,750 --> 00:01:27,450

But at the very bottom, I'm going to create a new function and I'm going to call it prompt, because



21

00:01:27,450 --> 00:01:31,690

I'll be prompting people and I'll be prompting them for all kinds of things.



22

00:01:31,710 --> 00:01:35,070

So in here, it's just like a regular function.



23

00:01:35,430 --> 00:01:41,100

But I'm going to create a new function within this function and I'm going to start it with a keyword



24

00:01:41,100 --> 00:01:41,520

left.



25

00:01:41,520 --> 00:01:42,960

So I'm just creating a variable.



26

00:01:42,960 --> 00:01:49,140

I'm going to call this tost, and that's going to be equal to I'm going to store a function in this



27

00:01:49,140 --> 00:01:50,780

variable function.



28

00:01:51,420 --> 00:01:57,450

And right now I'm just going to make it do nothing more than console log and I'll print out some text



29

00:01:58,980 --> 00:01:59,550

clicked.



30

00:02:03,630 --> 00:02:05,820

Button and got toast.



31

00:02:08,250 --> 00:02:14,400

OK, so I have one functioning and at the very bottom of this function, so I have a function inside,



32

00:02:14,400 --> 00:02:16,310

a function at the very bottom.



33

00:02:16,330 --> 00:02:17,730

This I'm going to return something.



34

00:02:17,740 --> 00:02:24,840

But what I'm going to return is within curly brackets and I'm going to return for tost return toast.



35

00:02:25,650 --> 00:02:31,980

So when this function gets the request for toast, when prompt gets a request for toast, it's going



36

00:02:31,980 --> 00:02:34,720

to return toast and toast is itself a function.



37

00:02:35,400 --> 00:02:36,230

Now we'll do another one.



38

00:02:36,240 --> 00:02:40,470

So I'll copy this and I'll paste this and then this one.



39

00:02:40,470 --> 00:02:42,640

I can't call it toast because I use that name already.



40

00:02:42,660 --> 00:02:43,920

I'll just call it success.



41

00:02:45,790 --> 00:02:52,690

Clicked button and got success the right now, this function, which I stored in a variable success,



42

00:02:52,690 --> 00:02:59,710

is only available within this prompt function until I return it and I can return it by saying success,



43

00:03:00,310 --> 00:03:01,570

Kolan success.



44

00:03:01,990 --> 00:03:05,590

When you get a request for success, return the function success.



45

00:03:05,590 --> 00:03:07,870

And that refers to this function.



46

00:03:08,620 --> 00:03:15,280

So I've created this and now I need to make it available to my code, the rest of the application,



47

00:03:15,280 --> 00:03:19,070

the rest of this page in this case as something that it can use.



48

00:03:19,090 --> 00:03:23,950

So right at the very top, I'm going to get rid of this old console log that we put in ages ago.



49

00:03:24,400 --> 00:03:25,690

I'm going to create a new variable.



50

00:03:25,690 --> 00:03:28,330

I'm going to call it I can't call it project because that gets confusing.



51

00:03:28,330 --> 00:03:32,830

I'll call it attention because this is going to be used to get people's attention and I'm going to make



52

00:03:32,830 --> 00:03:34,630

that equal to the function prompt.



53

00:03:37,750 --> 00:03:46,090

Now it's accessible in here, so let's go down to our event listener here and let's not do a notify



54

00:03:46,090 --> 00:03:46,540

model.



55

00:03:46,840 --> 00:03:48,180

Let's just do this instead.



56

00:03:48,610 --> 00:03:55,540

Let's just call attention the variable I just to find at the top of this, and that is now my autocomplete



57

00:03:55,540 --> 00:03:57,010

says, oh, you have success and toast.



58

00:03:57,020 --> 00:04:01,330

Well, let's call toast and say this now.



59

00:04:01,330 --> 00:04:02,880

I'm going to go back to my page.



60

00:04:04,420 --> 00:04:06,010

I'm going to reload this page.



61

00:04:06,490 --> 00:04:07,960

I'm going to open the console.



62

00:04:07,960 --> 00:04:08,650

And I did that.



63

00:04:08,650 --> 00:04:10,120

I used the keyboard shortcut.



64

00:04:10,120 --> 00:04:14,130

But you can go over here and click on this and choose a web developer and choose web console.



65

00:04:14,890 --> 00:04:16,360

And I'm going to click on this button.



66

00:04:17,380 --> 00:04:19,480

I clicked on the button and I got toast.



67

00:04:19,620 --> 00:04:20,620

OK, that's great.



68

00:04:21,010 --> 00:04:29,680

If I change it from toast to success, the other one and reload this, I click on the button and this



69

00:04:29,680 --> 00:04:30,730

time I got success.



70

00:04:30,880 --> 00:04:33,760

So that's the basic principle behind how modules work.



71

00:04:33,980 --> 00:04:35,890

Now we're using an embedded module.



72

00:04:36,460 --> 00:04:41,140

Normally you'll store these as their separate files and then import them into the page and we'll get



73

00:04:41,140 --> 00:04:41,860

to that eventually.



74

00:04:41,860 --> 00:04:48,180

But right now, I just want to talk about how we can use modules to make things more efficient for us.



75

00:04:48,730 --> 00:04:54,550

So you might be asking yourself, why did you go to all this trouble just to do a console log when you



76

00:04:54,550 --> 00:04:55,800

could have just done console?



77

00:04:56,500 --> 00:05:02,650

Well, imagine, if you will, the console log is thirty lines of JavaScript or 150 lines of JavaScript.



78

00:05:03,250 --> 00:05:08,940

And imagine, if you will, that console, that success is also another 150 lines of JavaScript.



79

00:05:08,950 --> 00:05:16,810

And just imagine that you have to use the functionality found in that function in 75 places around your



80

00:05:16,810 --> 00:05:17,610

Web application.



81

00:05:17,650 --> 00:05:24,490

What I'm doing here is making one larger piece of code that will embody all of the functionality that



82

00:05:24,490 --> 00:05:27,640

I need for all of those various calls.



83

00:05:27,640 --> 00:05:35,470

So I'm going to reduce 75 calls, each being a 75 line function or whatever it is to one module that



84

00:05:35,470 --> 00:05:41,650

I can call with much smaller amounts of code and one that results in is less code overall and less code



85

00:05:41,650 --> 00:05:43,600

overall is easier to maintain.



86

00:05:44,020 --> 00:05:49,090

If I make a change in the module that's called upon in various places throughout my application, I



87

00:05:49,090 --> 00:05:52,940

just need to change it in one place so it becomes way more efficient.



88

00:05:53,350 --> 00:05:59,050

So in the next lecture, we'll turn these little toasts and successes into actual toasts and successes



89

00:05:59,170 --> 00:06:03,100

using Switzler or Swoll, as I tend to call it now and again.



90

00:06:03,340 --> 00:06:04,810

And we'll do that in the next lecture.