Custom Controls

Now, I quickly want to talk about custom controls. So you will see that quite often on websites, and usually they are implemented in a quite cumbersome way.

But they don't need to. So sometimes there's a lot behind those custom controls and sometimes there's not. And these are like a couple of simple ways.

So here we have a share button.

So this would be like your Facebook share button.

I don't even know if they're doing this anymore.

I've not been on Facebook for many, many years.

But basically, this could be just a button that you submit.

And, you know, JavaScript can get into the middle and do the submission through JavaScript.

But it can be just that easy.

And then you click it and you get like shared and the checkpoint.

And that would be a nice way to have a button like this. In this case, we cross them through because it's now a disabled button, so you can't unshare this.

And then the second example is a star rating. And here we have an X, which is basically zero stars, or I won't rate it. Then you have one star, two stars, three stars, four stars, five stars. And you can say three stars and boom, you have selected three stars.

And here again, for color vision reasons, there is an underline under the X.

And then also once you selected a star, there's also an underline underneath there.

If it's focused, you see that it's with like dotted lines.

And if it's going to the submission field, submission button, it basically gets solid underline.

And the reason for that is, why do we have a submit rating button there at all?

is because when you're using the keyboard, you can't select, in this case, a radio button

and submit it at the same time.

If I click here, this would be directly submitted.

You can program that in JavaScript and that's totally fine.

But if I'm using the keyboard, I don't want to submit, like if I'm at the start,

I don't want to submit one star and then submit two stars and then submit three stars

and submit four stars and then submit five stars.

So you need another button and you can make that as a hidden button that you then activate when you tap to it.

Yeah, and I think that's it.

I mean, there are a lot of code examples in those things.

So you can knock yourself out.

And for this, I think, you know, that might be an interesting case study.

Basically, the stars and also the X, they are these SVGs.

And they get like the label, in this case, zero stars.

And the SVGs are inside of the label.

And then when the input becomes checked, it will then basically use styling to change the SVG inside of the label.

It's very clever.

And I don't say that because I did this, but because it's a really nice technique that, you know, makes sure that you don't have like a lot of different things going on.

And the same goes here when I select like two stars, then basically it formats everything up to the two and including the two stars SVG. Yeah, that's all you need to know about custom controls. There's a lot of flexibility in here that we can't get into and which I don't think is like useful in this like format.

If you have anything that you want to show, feel free to bring that to the tutoring sessions and we can talk about it.