1

00:00:01,140 --> 00:00:08,520

OK, there's a couple of other things I want to add in our JavaScript, part of this section of the



2

00:00:08,520 --> 00:00:11,520

course, and it's a pretty straightforward thing.



3

00:00:11,520 --> 00:00:17,250

I want some means of sending notifications or alerts to the user.



4

00:00:18,090 --> 00:00:19,750

So there's lots of ways of doing that.



5

00:00:19,770 --> 00:00:27,870

For example, I could when I submit this, if there is no availability, I could send the request to



6

00:00:27,870 --> 00:00:31,440

you to my application written and go processed.



7

00:00:31,440 --> 00:00:36,720

The request determined that there's no application and send the information back, reload this page



8

00:00:36,720 --> 00:00:38,090

and then display the message here.



9

00:00:38,100 --> 00:00:40,830

I could do that, or I could.



10

00:00:41,280 --> 00:00:46,830

If somebody did something wrong, I could send the request to the server, process it, discover there's



11

00:00:46,830 --> 00:00:49,380

an error, send it back, rebuild the whole page.



12

00:00:49,560 --> 00:00:54,930

There's lots of times when I want to display information, but sometimes I don't really want to put



13

00:00:54,930 --> 00:00:58,860

it here and and have the page shift down.



14

00:00:59,220 --> 00:01:03,000

There's a bit really there might be no screen real estate to put the information that I want.



15

00:01:03,000 --> 00:01:11,010

So I want a really non-intrusive method of sending notifications, other success notifications or warnings



16

00:01:11,010 --> 00:01:13,470

or errors or whatever it may be to the user.



17

00:01:14,070 --> 00:01:16,560

And there's a really nice package called Nottie.



18

00:01:16,710 --> 00:01:18,240

And this is the address right here.



19

00:01:18,240 --> 00:01:19,260

Again, it's on GitHub.



20

00:01:20,070 --> 00:01:21,750

It's a straightforward package.



21

00:01:21,750 --> 00:01:24,720

It's really easy to work with and it gives notifications.



22

00:01:24,720 --> 00:01:26,340

And I give you a kind of a preview here.



23

00:01:26,760 --> 00:01:29,550

So I'm actually going to find the online demo.



24

00:01:29,560 --> 00:01:30,420

There's one right there.



25

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

So I'll go over here and here's the page and I'll say, show me what a Nottie alert that looks like



26

00:01:37,530 --> 00:01:38,220

a success.



27

00:01:38,220 --> 00:01:40,160

Something worked the way you wanted it to.



28

00:01:40,170 --> 00:01:44,200

So I click on this button and it appears at the top of the screen, right.



29

00:01:44,220 --> 00:01:44,820

A little big.



30

00:01:44,820 --> 00:01:45,990

I might make it smaller later.



31

00:01:46,230 --> 00:01:47,280

Here's a warning.



32

00:01:47,280 --> 00:01:48,990

And they stuck some Temel in there.



33

00:01:49,530 --> 00:01:52,200

And here's an error that looks helpful.



34

00:01:52,200 --> 00:01:52,590

All right.



35

00:01:52,620 --> 00:01:53,820

How do I use this?



36

00:01:54,330 --> 00:02:00,750

Well, I'll scroll down here and installation shows me that again, I can pull this information off



37

00:02:00,750 --> 00:02:08,760

of the CDN, so I'll copy that and I will go back to my HTML for my page and I'll paste it in right



38

00:02:08,760 --> 00:02:09,360

at the top.



39

00:02:09,660 --> 00:02:13,710

There's my access again, just pulling it off as CFO of the CDN.



40

00:02:14,040 --> 00:02:17,490

And you also need at the bottom the JavaScript.



41

00:02:17,490 --> 00:02:23,100

So I'll go to the bottom of my page where I'm imparting all of my JavaScript from CDMs and paste it



42

00:02:23,100 --> 00:02:23,430

in there.



43

00:02:23,730 --> 00:02:27,360

OK, so I have that and then it says, how do you actually use this?



44

00:02:27,360 --> 00:02:30,300

Again, I can use no package manager, but we're not using that.



45

00:02:30,540 --> 00:02:31,890

We're not using ESX.



46

00:02:31,890 --> 00:02:34,410

We're using this here.



47

00:02:34,410 --> 00:02:36,120

We're available methods.



48

00:02:36,120 --> 00:02:38,400

So this says Nottie Alert.



49

00:02:38,880 --> 00:02:40,530

That's gives me the actual syntax.



50

00:02:40,530 --> 00:02:46,380

I'm going to copy that and I will go to the bottom of my page and I'm going to create my own function,



51

00:02:46,890 --> 00:02:48,260

function alert.



52

00:02:51,090 --> 00:02:55,740

So in JavaScript, that's how you write a function function alert.



53

00:02:55,740 --> 00:03:01,110

We can put any parameters in here and I'll just paste in what I just copied and get rid of these comments



54

00:03:01,110 --> 00:03:01,520

in a moment.



55

00:03:01,530 --> 00:03:05,160

So the first option is type optional.



56

00:03:05,160 --> 00:03:10,410

Default equals four and you can use a number for a type or you can use a string pretty well, the strings



57

00:03:10,410 --> 00:03:12,330

a lot more straightforward.



58

00:03:12,630 --> 00:03:16,530

So maybe I want to put an X success as my my type here.



59

00:03:16,530 --> 00:03:22,800

So I'll copy this or delete this and put in success followed by a common text.



60

00:03:22,830 --> 00:03:23,960

What do you want to say?



61

00:03:23,970 --> 00:03:26,460

Well, I don't know what I want to say in this function.



62

00:03:26,790 --> 00:03:31,590

This is function alert, so maybe I should put it up in here message as my first parameter and I'll



63

00:03:31,590 --> 00:03:36,060

just use that as message stay optional.



64

00:03:36,060 --> 00:03:37,140

Default equals false.



65

00:03:37,140 --> 00:03:39,270

So it goes away after a few seconds.



66

00:03:39,600 --> 00:03:43,350

Time stays for a minimum of stays for a minimum of one second.



67

00:03:43,350 --> 00:03:45,360

But the default is three, three seconds is fine.



68

00:03:45,570 --> 00:03:51,600

So I'll use the defaults for those and position optional top or bottom.



69

00:03:51,600 --> 00:03:54,390

And I want it to be at the top, which is the default so I can delete that.



70

00:03:55,060 --> 00:03:59,430

OK, so there's a function and is this really exactly what I want.



71

00:03:59,430 --> 00:04:00,210

Yeah, I think it is.



72

00:04:00,210 --> 00:04:01,530

But what kind of function is this.



73

00:04:01,530 --> 00:04:09,360

This is a success alert, so I call it a alert success just so I know what kind of alert is.



74

00:04:09,360 --> 00:04:14,790

And then if I want to, I can copy this and paste this alert.



75

00:04:16,220 --> 00:04:22,400

Error and type, the change, the type to what was my text for errors, error.



76

00:04:25,770 --> 00:04:32,910

And then I can copy this again, you can see that this is probably not the best approach, alert, warning.



77

00:04:35,680 --> 00:04:43,510

And it's called warning, so I can come down here and do that so I can have three alerts for three different



78

00:04:43,510 --> 00:04:47,530

kinds of three, three functions for three different kinds of alerts.



79

00:04:47,860 --> 00:04:51,690

But that seems to me to be really inefficient.



80

00:04:51,700 --> 00:04:52,930

So why don't we do this instead?



81

00:04:53,350 --> 00:04:58,360

We'll call this function and I can't actually call it alert because it alerts a built in function,



82

00:04:58,360 --> 00:05:00,970

but I can call it what shall I call it?



83

00:05:00,970 --> 00:05:01,810

Notify.



84

00:05:02,260 --> 00:05:03,340

I'll call it notify.



85

00:05:03,550 --> 00:05:08,770

And then I can say the message is the first parameter and the type of message is the second parameter.



86

00:05:08,980 --> 00:05:15,760

So I could say message type as my second parameter and then just copy, not replace what's in success,



87

00:05:15,970 --> 00:05:20,800

replace the string with my parameter and then get rid of these two altogether because I don't need them



88

00:05:20,800 --> 00:05:21,140

anymore.



89

00:05:21,400 --> 00:05:22,900

That is way more efficient.



90

00:05:23,500 --> 00:05:24,730

So now I have a function.



91

00:05:25,600 --> 00:05:26,920

I actually want to test it out.



92

00:05:26,950 --> 00:05:27,950

How am I going to do that?



93

00:05:27,970 --> 00:05:31,970

Well, we have this document get element by the Colaba.



94

00:05:32,170 --> 00:05:37,600

So if I save this and go back over and look at my page again and reload this, we have this button that



95

00:05:37,600 --> 00:05:38,500

does this right now.



96

00:05:38,590 --> 00:05:41,350

And I said I was leaving this here because I was going to do things with it.



97

00:05:41,350 --> 00:05:42,400

And I am.



98

00:05:43,360 --> 00:05:48,970

So what I'm going to do is change that button from what it does right now and I'll just delete that



99

00:05:50,020 --> 00:05:51,310

and I'll simply pass it.



100

00:05:53,520 --> 00:05:59,970

I'll call the function I just created, I will say notify and notify takes two parameters my message,



101

00:06:00,240 --> 00:06:06,530

this is my message and the type of message and it's going to be a success message.



102

00:06:07,710 --> 00:06:08,580

So let's save that.



103

00:06:08,580 --> 00:06:10,470

Come back here, reload this page.



104

00:06:10,470 --> 00:06:15,060

And now when I click this, because I've changed what the listener does, it calls a function I have



105

00:06:15,060 --> 00:06:15,540

to find.



106

00:06:15,720 --> 00:06:18,370

I should get a new dealer and I do.



107

00:06:18,390 --> 00:06:22,500

OK, now what if we change the type to error?



108

00:06:23,730 --> 00:06:23,980

Oops.



109

00:06:25,470 --> 00:06:30,760

Save that, reload the page, there's my error message perfect.



110

00:06:31,050 --> 00:06:35,010

Well, that is going to be incredibly useful for us and we may as well try the warning one as well.



111

00:06:35,700 --> 00:06:39,260

So warning reload.



112

00:06:41,340 --> 00:06:42,230

And there's my warning.



113

00:06:42,990 --> 00:06:50,190

So that's going to be useful for us to actually notify our users about success events, about errors



114

00:06:50,190 --> 00:06:52,860

that have taken place, just to give them a warning, whatever it may be.



115

00:06:52,890 --> 00:06:56,850

I don't know how I'm going to use it yet, but I know that it's going to be a useful thing to do.



116

00:06:57,210 --> 00:07:02,250

And the last thing I want to mention is that if you actually go to the documentation again, they give



117

00:07:02,250 --> 00:07:03,300

you an example here.



118

00:07:03,660 --> 00:07:06,690

So you can say override the styles for the Nodi container.



119

00:07:06,690 --> 00:07:10,580

And we haven't talked a lot about CSFs and we will in in a later section.



120

00:07:11,160 --> 00:07:13,290

But right now, let's just see what we can do with that.



121

00:07:13,920 --> 00:07:20,070

So if I go back up to my top of my page, I have already some success in here and I'm not using red



122

00:07:20,070 --> 00:07:21,720

text anymore, so I can get rid of that.



123

00:07:22,650 --> 00:07:26,550

And I'll just paste in Nodi container and it says Box Shadow None.



124

00:07:26,610 --> 00:07:28,440

Well, let's see what it looks like.



125

00:07:28,470 --> 00:07:32,760

So before I reload the page, let's have a look at it that has a little shadow right.



126

00:07:32,760 --> 00:07:34,660

There might be difficult to see, but it does.



127

00:07:34,830 --> 00:07:38,570

Now, if I reload the page, that shadow is gone.



128

00:07:38,580 --> 00:07:42,410

So I do have control over the way that this message is displayed.



129

00:07:42,420 --> 00:07:43,020

And that's good.



130

00:07:43,080 --> 00:07:44,220

I'm not going to do that right now.



131

00:07:44,230 --> 00:07:46,650

Will maybe leave that for the next section of the course.



132

00:07:47,310 --> 00:07:52,530

But now we have a great way of notifying people in a way that's not too intrusive.



133

00:07:52,980 --> 00:07:57,870

And in the next section, we'll look at a way of notifying people, things that is a little intrusive



134

00:07:58,380 --> 00:08:01,350

and also will figure out how to use that.



135

00:08:01,380 --> 00:08:03,780

What we're going to do is display a modal dialog.



136

00:08:04,080 --> 00:08:06,960

We'll figure out how to use that on these parts.



137

00:08:07,260 --> 00:08:09,330

This part of the site right here, check availability.



138

00:08:09,330 --> 00:08:14,850

If you recall, I said I don't want to take people to a new page to check availability for an individual



139

00:08:14,850 --> 00:08:15,180

room.



140

00:08:15,510 --> 00:08:21,510

Instead, I want to pop a dialog box, let them enter their start and end dates and notify them right



141

00:08:21,510 --> 00:08:22,470

on this page.



142

00:08:22,470 --> 00:08:25,860

Let them book this room right from this page without leaving the page.



143

00:08:26,220 --> 00:08:28,260

And we'll get started on that in the next lecture.