OK, there's a couple of other things I want to add in our JavaScript, part of this section of the
course, and it's a pretty straightforward thing.
I want some means of sending notifications or alerts to the user.
So there's lots of ways of doing that.
For example, I could when I submit this, if there is no availability, I could send the request to
you to my application written and go processed.
The request determined that there's no application and send the information back, reload this page
and then display the message here.
I could do that, or I could.
If somebody did something wrong, I could send the request to the server, process it, discover there's
an error, send it back, rebuild the whole page.
There's lots of times when I want to display information, but sometimes I don't really want to put
it here and and have the page shift down.
There's a bit really there might be no screen real estate to put the information that I want.
So I want a really non-intrusive method of sending notifications, other success notifications or warnings
or errors or whatever it may be to the user.
And there's a really nice package called Nottie.
And this is the address right here.
Again, it's on GitHub.
It's a straightforward package.
It's really easy to work with and it gives notifications.
And I give you a kind of a preview here.
So I'm actually going to find the online demo.
There's one right there.
So I'll go over here and here's the page and I'll say, show me what a Nottie alert that looks like
a success.
Something worked the way you wanted it to.
So I click on this button and it appears at the top of the screen, right.
A little big.
I might make it smaller later.
Here's a warning.
And they stuck some Temel in there.
And here's an error that looks helpful.
All right.
How do I use this?
Well, I'll scroll down here and installation shows me that again, I can pull this information off
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
at the top.
There's my access again, just pulling it off as CFO of the CDN.
And you also need at the bottom the JavaScript.
So I'll go to the bottom of my page where I'm imparting all of my JavaScript from CDMs and paste it
in there.
OK, so I have that and then it says, how do you actually use this?
Again, I can use no package manager, but we're not using that.
We're not using ESX.
We're using this here.
We're available methods.
So this says Nottie Alert.
That's gives me the actual syntax.
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,
function alert.
So in JavaScript, that's how you write a function function alert.
We can put any parameters in here and I'll just paste in what I just copied and get rid of these comments
in a moment.
So the first option is type optional.
Default equals four and you can use a number for a type or you can use a string pretty well, the strings
a lot more straightforward.
So maybe I want to put an X success as my my type here.
So I'll copy this or delete this and put in success followed by a common text.
What do you want to say?
Well, I don't know what I want to say in this function.
This is function alert, so maybe I should put it up in here message as my first parameter and I'll
just use that as message stay optional.
Default equals false.
So it goes away after a few seconds.
Time stays for a minimum of stays for a minimum of one second.
But the default is three, three seconds is fine.
So I'll use the defaults for those and position optional top or bottom.
And I want it to be at the top, which is the default so I can delete that.
OK, so there's a function and is this really exactly what I want.
Yeah, I think it is.
But what kind of function is this.
This is a success alert, so I call it a alert success just so I know what kind of alert is.
And then if I want to, I can copy this and paste this alert.
Error and type, the change, the type to what was my text for errors, error.
And then I can copy this again, you can see that this is probably not the best approach, alert, warning.
And it's called warning, so I can come down here and do that so I can have three alerts for three different
kinds of three, three functions for three different kinds of alerts.
But that seems to me to be really inefficient.
So why don't we do this instead?
We'll call this function and I can't actually call it alert because it alerts a built in function,
but I can call it what shall I call it?
Notify.
I'll call it notify.
And then I can say the message is the first parameter and the type of message is the second parameter.
So I could say message type as my second parameter and then just copy, not replace what's in success,
replace the string with my parameter and then get rid of these two altogether because I don't need them
anymore.
That is way more efficient.
So now I have a function.
I actually want to test it out.
How am I going to do that?
Well, we have this document get element by the Colaba.
So if I save this and go back over and look at my page again and reload this, we have this button that
does this right now.
And I said I was leaving this here because I was going to do things with it.
And I am.
So what I'm going to do is change that button from what it does right now and I'll just delete that
and I'll simply pass it.
I'll call the function I just created, I will say notify and notify takes two parameters my message,
this is my message and the type of message and it's going to be a success message.
So let's save that.
Come back here, reload this page.
And now when I click this, because I've changed what the listener does, it calls a function I have
to find.
I should get a new dealer and I do.
OK, now what if we change the type to error?
Oops.
Save that, reload the page, there's my error message perfect.
Well, that is going to be incredibly useful for us and we may as well try the warning one as well.
So warning reload.
And there's my warning.
So that's going to be useful for us to actually notify our users about success events, about errors
that have taken place, just to give them a warning, whatever it may be.
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.
And the last thing I want to mention is that if you actually go to the documentation again, they give
you an example here.
So you can say override the styles for the Nodi container.
And we haven't talked a lot about CSFs and we will in in a later section.
But right now, let's just see what we can do with that.
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
text anymore, so I can get rid of that.
And I'll just paste in Nodi container and it says Box Shadow None.
Well, let's see what it looks like.
So before I reload the page, let's have a look at it that has a little shadow right.
There might be difficult to see, but it does.
Now, if I reload the page, that shadow is gone.
So I do have control over the way that this message is displayed.
And that's good.
I'm not going to do that right now.
Will maybe leave that for the next section of the course.
But now we have a great way of notifying people in a way that's not too intrusive.
And in the next section, we'll look at a way of notifying people, things that is a little intrusive
and also will figure out how to use that.
What we're going to do is display a modal dialog.
We'll figure out how to use that on these parts.
This part of the site right here, check availability.
If you recall, I said I don't want to take people to a new page to check availability for an individual
room.
Instead, I want to pop a dialog box, let them enter their start and end dates and notify them right
on this page.
Let them book this room right from this page without leaving the page.
And we'll get started on that in the next lecture.