Form Exercise

[00:00:00]
>> Last exercise and this is definitely going to be the trickiest one. If you're going to take some time and have a go at it yourself, don't be alarmed if it takes you an hour or longer because this is meant to be quite a, there's a lot going on there.

[00:00:16]
So here's a little recording of what the end product would look like. We've got an add color scheme button which is similar to what we already have. And then this launches a Moodle. And in the Moodle we have an input where you can name your color palettes. And then we have a list of loads and loads of colors.

[00:00:37]
And you can toggle these on. And finally, we submit the color and it gets added at the top of our list. So I've added some requirements here, so you can basically work on these one by one. Firstly, pressing on add color scheme opens the Moodle, we've pretty much done that already so you get that one for free.

[00:01:01]
Secondly, the user can enter the name for the color scheme. Here you can add name. Thirdly, the user can toggle the buttons to select colors to add the theme. Now, ideally, we'd show a little preview for the colors but I didn't want to go too crazy cause there was a lot going on already, and you can have a go at it on your own.

[00:01:23]
So each color just has a toggle button on the right and you can toggle that on and off. If the user has to submit without entering a name for the color, they will get an error message. So this is not actually demonstrated in the GIF. But if the, if I was to press Submit, without actually adding the name, it would give me an alert, saying, please add a name.

[00:01:45]
If the user hits Submit without entering the correct number of colors, which is three, I do get an error message. Should there is a check before you submit that if the user has selected two or fewer colors, it will say please select at least three. And finally, if the user has entered the name correctly, and have chosen at least three colors, the Moodle will close and a new color scheme will be added at the top of the list.

[00:02:16]
There's basically the requirements. I've added some hints here, if you're gonna have a go at this, don't use all colors all at once. I've added, so basically these are all the web colors. So you can start with just a couple and I just to figure out how the toggle button works and just getting that working, and then adding more once the basic is done.

[00:02:40]
For these bits, the submit warnings, you can use the native alert Moodle, which is here. You just call alert dot alert. With this you don't even need to add all these arguments. And this will tell the user that, something's wrong. This is the like cheapest way to do little alerts.

[00:03:02]
And finally, navigation, navigate works just like navigation go back if the page you target is already on the stack. So if I'm here inside the Moodle, and then, if I do navigation go back, would go back to the home. But similarly, if I did navigation, Navigate Home, it would do exactly the same thing.

[00:03:23]
And this is handy because you can pass in arguments into navigate whereas you can't pass in arguments into go back.