1

00:00:01,710 --> 00:00:08,040

OK, let's make our JavaScript module a little more useful right now, all we have is toast and success



2

00:00:08,040 --> 00:00:11,860

and all we get when we click on or when those are called is a right to the console.



3

00:00:11,880 --> 00:00:15,660

So back over at our page, I have the console window open.



4

00:00:15,660 --> 00:00:18,510

I click on this button and it writes there, that's great.



5

00:00:18,960 --> 00:00:21,240

Well, I actually want to do something more useful than that.



6

00:00:21,240 --> 00:00:26,730

So I'm going to get rid of this console log and I'm going to come up here and change this attention



7

00:00:26,730 --> 00:00:31,260

success to attention tost, which is what I want to work on first.



8

00:00:31,590 --> 00:00:37,590

So I want to use my JavaScript module, which I have stored in a variable called attention, to call



9

00:00:37,590 --> 00:00:38,910

the function tost.



10

00:00:39,150 --> 00:00:40,770

So it's going to go in here.



11

00:00:41,160 --> 00:00:44,020

And of course, I need to know how Tostes work in Sweedler.



12

00:00:44,040 --> 00:00:46,800

So let's go into here and let's find tost.



13

00:00:48,450 --> 00:00:49,770

There's an example here somewhere.



14

00:00:49,800 --> 00:00:50,830

There it is.



15

00:00:51,180 --> 00:00:54,780

So this is an example that will actually run a toast just like that.



16

00:00:54,940 --> 00:01:02,010

OK, so I'm going to copy all of this and I will paste it right in the toast function.



17

00:01:02,970 --> 00:01:05,820

Now, the problem is this is all hardcoded.



18

00:01:05,850 --> 00:01:10,770

This will always give me the icon success and it will always give me the message sinden successfully,



19

00:01:10,770 --> 00:01:11,420

whatever it is.



20

00:01:11,880 --> 00:01:14,190

So I need to pass parameters to it.



21

00:01:14,190 --> 00:01:20,100

And I do that by specifying a parameter right here C and then I have to define what that's going to



22

00:01:20,100 --> 00:01:20,400

be.



23

00:01:20,490 --> 00:01:23,870

So let me get down here and create a new constant.



24

00:01:24,660 --> 00:01:27,020

And this one is not going to be named yet.



25

00:01:27,030 --> 00:01:27,990

I'm going to create it.



26

00:01:28,410 --> 00:01:29,210

And then I'm a store.



27

00:01:29,220 --> 00:01:30,470

The value in C..



28

00:01:30,910 --> 00:01:37,530

OK, so C is passed to us and then C will be overridden by things that are in here if they're not specified



29

00:01:38,040 --> 00:01:38,840

or expanded.



30

00:01:39,210 --> 00:01:44,100

So the very first thing I'm going to need is something called a message and that is going to default



31

00:01:44,100 --> 00:01:45,210

to nothing.



32

00:01:45,750 --> 00:01:50,730

So if you don't specify the value message in your JavaScript object that you pass to the function,



33

00:01:51,150 --> 00:01:52,830

then you get an empty string.



34

00:01:53,250 --> 00:01:57,230

And then I want an icon which will be equal to by default success.



35

00:01:57,240 --> 00:02:00,510

So if you don't specify that will choose the icon success.



36

00:02:00,780 --> 00:02:04,130

And then I want to put it somewhere on the screen and the way that this works.



37

00:02:04,140 --> 00:02:05,670

Let me just get it in here, please.



38

00:02:06,420 --> 00:02:12,340

P o o o n is equal to top end.



39

00:02:12,780 --> 00:02:19,500

So the way that Sweedler actually specifies where the toast is going to go is using top, center and



40

00:02:19,500 --> 00:02:19,850

bottom.



41

00:02:20,070 --> 00:02:24,870

So you can have top start, which is the top left hand corner, top center, which is the middle of



42

00:02:24,870 --> 00:02:30,240

the page at the top of your browser window and Top End, which is where I want it by default, the upper



43

00:02:30,240 --> 00:02:31,000

right hand corner.



44

00:02:31,410 --> 00:02:36,430

Then you going have just center or bottom start bottom and that sort of thing.



45

00:02:36,600 --> 00:02:38,880

So I want it to be in the top end by default.



46

00:02:39,450 --> 00:02:42,870

Now specified these, but nowhere here have I use them.



47

00:02:42,870 --> 00:02:47,430

In fact, down here I actually specify them on the fire for the icon in the message.



48

00:02:47,430 --> 00:02:48,330

So I'm going to get rid of those.



49

00:02:48,330 --> 00:02:52,590

But notice that although I called my message, it's called title.



50

00:02:52,590 --> 00:02:54,380

So let's put those in first before we delete them.



51

00:02:55,020 --> 00:03:00,180

So we want a message which is actually called title for Sweedler to be MSG.



52

00:03:00,360 --> 00:03:04,530

I want this value to be used here position.



53

00:03:04,530 --> 00:03:05,400

I don't want to specify.



54

00:03:05,400 --> 00:03:06,330

I don't want to hardcoded.



55

00:03:06,330 --> 00:03:07,830

I'll allow that to be customized.



56

00:03:08,040 --> 00:03:09,210

So I'll call it position.



57

00:03:10,140 --> 00:03:17,280

And then the last one is icon, which I want to be icon, which means I don't need them here, which



58

00:03:17,280 --> 00:03:22,350

means I can just fire that so I can even put this back up in this line just to make it a little cleaner.



59

00:03:23,400 --> 00:03:25,080

And let's see if we've got everything.



60

00:03:25,080 --> 00:03:30,630

So we have our message, our icon, our position, our message, our position, our icon, everything



61

00:03:30,630 --> 00:03:31,890

else should be just great.



62

00:03:32,250 --> 00:03:38,250

So now I should be able to come up here where I call it, and passing the necessary values that I want.



63

00:03:38,250 --> 00:03:44,550

And the only thing I want to specify to start with is in curly braces is I'm going to specify my message



64

00:03:45,090 --> 00:03:47,430

and I'll call it Hello World



65

00:03:50,940 --> 00:03:51,480

and save it.



66

00:03:52,200 --> 00:03:56,010

Now I go back over to my browser window and I reload that.



67

00:03:56,760 --> 00:04:00,890

And hopefully if we did everything right, we get Hello World up there.



68

00:04:00,900 --> 00:04:01,410

Perfect.



69

00:04:01,750 --> 00:04:07,140

Notice it chose the icon checkmark and put it in the top left, even though I didn't specify it.



70

00:04:07,140 --> 00:04:08,940

That's because these defaults are set.



71

00:04:09,270 --> 00:04:16,440

So if I come up here now and add a second value in here, comma, the name of the value, which is Icon



72

00:04:16,800 --> 00:04:21,750

Colon and then the name of the icon I want, which is error because it takes the string for passing



73

00:04:21,750 --> 00:04:22,170

a string.



74

00:04:22,170 --> 00:04:27,300

So I save that, go back over, reload it, and now it should be exactly the same, except I should



75

00:04:27,300 --> 00:04:30,810

get the error icon and I do the perfect.



76

00:04:30,810 --> 00:04:31,940

So that's easy enough.



77

00:04:32,460 --> 00:04:34,080

Well that's one example.



78

00:04:34,380 --> 00:04:36,450

Now let's do the success one.



79

00:04:36,540 --> 00:04:37,710

So I'll get rid of this.



80

00:04:38,760 --> 00:04:45,540

I'll go back over to my documentation for Sweedler, which is over here, and find other examples.



81

00:04:45,720 --> 00:04:49,260

One that does what I want that looks about right.



82

00:04:49,260 --> 00:04:53,610

I'll put a success marker there and I might get rid of this, but I'm going to go with that.



83

00:04:53,700 --> 00:04:57,240

So I will copy this example, which is this one.



84

00:04:57,450 --> 00:04:57,900

This one.



85

00:04:59,370 --> 00:05:00,060

And I'll copy.



86

00:05:01,700 --> 00:05:07,940

And I will paste it in here, and again, I want to pass a parameter to this and I need to define what



87

00:05:07,940 --> 00:05:10,810

those parameters are going to be and default.



88

00:05:10,850 --> 00:05:11,720

So const



89

00:05:14,450 --> 00:05:20,960

equals C and my constants are going to be the well, it's going to be success.



90

00:05:20,970 --> 00:05:22,370

So I'm always going to have a success.



91

00:05:22,490 --> 00:05:24,050

Can't I don't want that to be overwritten.



92

00:05:25,580 --> 00:05:26,750

I do want a message.



93

00:05:26,990 --> 00:05:36,830

So MSG is equal to nothing by default and title which is equal to nothing by default and text.



94

00:05:40,490 --> 00:05:42,740

Not text, that's really sure.



95

00:05:42,770 --> 00:05:47,630

Let's see the one footer which is going to be equal to nothing by default so you don't specify anything,



96

00:05:47,630 --> 00:05:52,760

you're going to get an empty dialogue, which means I need to replace this bit with my variable four



97

00:05:52,760 --> 00:05:59,750

footer, this bit with my variable, which I'm calling MSG, because it's faster type and easy to remember



98

00:05:59,750 --> 00:06:05,180

that it's the message, the title, which I'll make a title and I want to leave the icon a success and



99

00:06:05,180 --> 00:06:08,700

everything else should be just the same.



100

00:06:08,810 --> 00:06:09,230

Good.



101

00:06:09,710 --> 00:06:10,130

All right.



102

00:06:10,130 --> 00:06:11,240

Let's see if this works.



103

00:06:11,240 --> 00:06:16,910

So we need to come up here and instead of calling tost, we will call success



104

00:06:20,660 --> 00:06:23,730

and that's going to have a message and not an icon.



105

00:06:23,730 --> 00:06:24,420

It's not specified.



106

00:06:24,420 --> 00:06:24,950

OK, leave it there.



107

00:06:24,950 --> 00:06:25,730

It wouldn't do anything.



108

00:06:25,970 --> 00:06:26,600

But let's just go.



109

00:06:26,600 --> 00:06:27,170

Hello, world.



110

00:06:27,180 --> 00:06:27,770

Save that.



111

00:06:28,100 --> 00:06:34,460

Go back here, reload the page and hope that everything works out.



112

00:06:34,460 --> 00:06:34,960

Wrong button.



113

00:06:35,840 --> 00:06:36,340

There it is.



114

00:06:36,350 --> 00:06:36,860

Hello, world.



115

00:06:36,860 --> 00:06:38,000

Perfectly perfect.



116

00:06:38,270 --> 00:06:40,950

And I could even put a footer in there if I want to, but I'm not going to bother you.



117

00:06:41,010 --> 00:06:42,200

Just put another parameter here.



118

00:06:42,200 --> 00:06:45,710

Footer, colon and then in quotation marks, whatever you want that to be.



119

00:06:46,280 --> 00:06:47,420

So we have toast.



120

00:06:47,420 --> 00:06:48,500

We have success.



121

00:06:48,530 --> 00:06:53,780

Let's go with error and error should be really easy to do because all I'm doing is copying success,



122

00:06:55,250 --> 00:06:59,750

pasting it here, calling it error and changing the icon to error.



123

00:07:01,730 --> 00:07:05,390

And then I can just duplicate this line and have error.



124

00:07:05,390 --> 00:07:11,360

Whenever you call error, go to the internal function error safe.



125

00:07:12,290 --> 00:07:14,480

So come up here, we'll call an error.



126

00:07:14,870 --> 00:07:21,830

And instead of saying hello, world will say oops and we'll call function error.



127

00:07:22,490 --> 00:07:23,810

And that should be all we have to do.



128

00:07:23,990 --> 00:07:27,880

We can reload this page and we get an error.



129

00:07:27,980 --> 00:07:28,550

Perfect.



130

00:07:28,970 --> 00:07:32,150

OK, so that is how modules work.



131

00:07:32,450 --> 00:07:39,680

And again, as I said earlier, you can are usually do store modules in their own file and then import



132

00:07:39,680 --> 00:07:41,630

them into your webpage and we'll get to that eventually.



133

00:07:41,630 --> 00:07:46,940

But for right now, we just want to get our feet wet with functions and see how they work and see why



134

00:07:46,940 --> 00:07:49,100

they're good, why, why modules are good.



135

00:07:49,550 --> 00:07:54,950

So if you think it through what I'm calling a toast, all of this code is getting executed.



136

00:07:55,280 --> 00:07:59,960

But I'm doing that merely by calling one line up here if I'm calling tost.



137

00:08:01,130 --> 00:08:04,100

And and that's makes things ever so much simpler.



138

00:08:04,100 --> 00:08:08,270

The same thing for success modals and the same thing for error modals.



139

00:08:08,690 --> 00:08:11,570

So modules are our friends.



140

00:08:12,110 --> 00:08:19,160

In the next lecture, what we're going to do is take the page or the button over here, which is under



141

00:08:19,160 --> 00:08:20,000

let me see here.



142

00:08:22,160 --> 00:08:25,700

Close this so I can see my menu again and go to Romes.



143

00:08:26,330 --> 00:08:33,500

This button I want when I click on this, I want to pop up a Sweedler model that has a form in it,



144

00:08:33,500 --> 00:08:38,750

and the contents of that form will be the same thing that we see right here, arrival date and departure



145

00:08:38,750 --> 00:08:44,780

date with that nice pop up calendar and a search button that allows us to search and find out whether



146

00:08:44,780 --> 00:08:47,000

or not a room is available.



147

00:08:47,420 --> 00:08:48,800

And we'll do that in the next lecture.