OK, let's make our JavaScript module a little more useful right now, all we have is toast and success
and all we get when we click on or when those are called is a right to the console.
So back over at our page, I have the console window open.
I click on this button and it writes there, that's great.
Well, I actually want to do something more useful than that.
So I'm going to get rid of this console log and I'm going to come up here and change this attention
success to attention tost, which is what I want to work on first.
So I want to use my JavaScript module, which I have stored in a variable called attention, to call
the function tost.
So it's going to go in here.
And of course, I need to know how Tostes work in Sweedler.
So let's go into here and let's find tost.
There's an example here somewhere.
There it is.
So this is an example that will actually run a toast just like that.
OK, so I'm going to copy all of this and I will paste it right in the toast function.
Now, the problem is this is all hardcoded.
This will always give me the icon success and it will always give me the message sinden successfully,
whatever it is.
So I need to pass parameters to it.
And I do that by specifying a parameter right here C and then I have to define what that's going to
be.
So let me get down here and create a new constant.
And this one is not going to be named yet.
I'm going to create it.
And then I'm a store.
The value in C..
OK, so C is passed to us and then C will be overridden by things that are in here if they're not specified
or expanded.
So the very first thing I'm going to need is something called a message and that is going to default
to nothing.
So if you don't specify the value message in your JavaScript object that you pass to the function,
then you get an empty string.
And then I want an icon which will be equal to by default success.
So if you don't specify that will choose the icon success.
And then I want to put it somewhere on the screen and the way that this works.
Let me just get it in here, please.
P o o o n is equal to top end.
So the way that Sweedler actually specifies where the toast is going to go is using top, center and
bottom.
So you can have top start, which is the top left hand corner, top center, which is the middle of
the page at the top of your browser window and Top End, which is where I want it by default, the upper
right hand corner.
Then you going have just center or bottom start bottom and that sort of thing.
So I want it to be in the top end by default.
Now specified these, but nowhere here have I use them.
In fact, down here I actually specify them on the fire for the icon in the message.
So I'm going to get rid of those.
But notice that although I called my message, it's called title.
So let's put those in first before we delete them.
So we want a message which is actually called title for Sweedler to be MSG.
I want this value to be used here position.
I don't want to specify.
I don't want to hardcoded.
I'll allow that to be customized.
So I'll call it position.
And then the last one is icon, which I want to be icon, which means I don't need them here, which
means I can just fire that so I can even put this back up in this line just to make it a little cleaner.
And let's see if we've got everything.
So we have our message, our icon, our position, our message, our position, our icon, everything
else should be just great.
So now I should be able to come up here where I call it, and passing the necessary values that I want.
And the only thing I want to specify to start with is in curly braces is I'm going to specify my message
and I'll call it Hello World
and save it.
Now I go back over to my browser window and I reload that.
And hopefully if we did everything right, we get Hello World up there.
Perfect.
Notice it chose the icon checkmark and put it in the top left, even though I didn't specify it.
That's because these defaults are set.
So if I come up here now and add a second value in here, comma, the name of the value, which is Icon
Colon and then the name of the icon I want, which is error because it takes the string for passing
a string.
So I save that, go back over, reload it, and now it should be exactly the same, except I should
get the error icon and I do the perfect.
So that's easy enough.
Well that's one example.
Now let's do the success one.
So I'll get rid of this.
I'll go back over to my documentation for Sweedler, which is over here, and find other examples.
One that does what I want that looks about right.
I'll put a success marker there and I might get rid of this, but I'm going to go with that.
So I will copy this example, which is this one.
This one.
And I'll copy.
And I will paste it in here, and again, I want to pass a parameter to this and I need to define what
those parameters are going to be and default.
So const
equals C and my constants are going to be the well, it's going to be success.
So I'm always going to have a success.
Can't I don't want that to be overwritten.
I do want a message.
So MSG is equal to nothing by default and title which is equal to nothing by default and text.
Not text, that's really sure.
Let's see the one footer which is going to be equal to nothing by default so you don't specify anything,
you're going to get an empty dialogue, which means I need to replace this bit with my variable four
footer, this bit with my variable, which I'm calling MSG, because it's faster type and easy to remember
that it's the message, the title, which I'll make a title and I want to leave the icon a success and
everything else should be just the same.
Good.
All right.
Let's see if this works.
So we need to come up here and instead of calling tost, we will call success
and that's going to have a message and not an icon.
It's not specified.
OK, leave it there.
It wouldn't do anything.
But let's just go.
Hello, world.
Save that.
Go back here, reload the page and hope that everything works out.
Wrong button.
There it is.
Hello, world.
Perfectly perfect.
And I could even put a footer in there if I want to, but I'm not going to bother you.
Just put another parameter here.
Footer, colon and then in quotation marks, whatever you want that to be.
So we have toast.
We have success.
Let's go with error and error should be really easy to do because all I'm doing is copying success,
pasting it here, calling it error and changing the icon to error.
And then I can just duplicate this line and have error.
Whenever you call error, go to the internal function error safe.
So come up here, we'll call an error.
And instead of saying hello, world will say oops and we'll call function error.
And that should be all we have to do.
We can reload this page and we get an error.
Perfect.
OK, so that is how modules work.
And again, as I said earlier, you can are usually do store modules in their own file and then import
them into your webpage and we'll get to that eventually.
But for right now, we just want to get our feet wet with functions and see how they work and see why
they're good, why, why modules are good.
So if you think it through what I'm calling a toast, all of this code is getting executed.
But I'm doing that merely by calling one line up here if I'm calling tost.
And and that's makes things ever so much simpler.
The same thing for success modals and the same thing for error modals.
So modules are our friends.
In the next lecture, what we're going to do is take the page or the button over here, which is under
let me see here.
Close this so I can see my menu again and go to Romes.
This button I want when I click on this, I want to pop up a Sweedler model that has a form in it,
and the contents of that form will be the same thing that we see right here, arrival date and departure
date with that nice pop up calendar and a search button that allows us to search and find out whether
or not a room is available.
And we'll do that in the next lecture.