Welcome to another lecture in this lecture, we'll look into watch properties. But before we go any further, in the previous lecture mouse events have made some changes to the code and have updated them into the GitHub. So what the essentially what a genius have done is have separated the mouse events into its own individual div and now just correct them individually and each of them have given them their own methods, alright. So for example, this is the mouse up, this is mouse down, this is mouse Enter, and this should be mouse leave, and so on is the mouse move. Alright. So instead of having them all in one dip for your clarity and understanding, I just divided them into different methods divs and stylesheets and stylings.

Alright, so all right, we have a clean template. So basically, Water Watch properties. So in order to understand what properties you can kind of like imagine them as event listeners. So let's say you have a data property right? And you want to listen or watch the changes that will happen to the data property. You can use the watch property, watch properties would be much more useful for form validations when you can evaluate the validity of the data in real time.

So let's have an example. So we can understand much more better. So what we'll do is we'll create a small form. Inside this form, we can have two input variables. Let's use placeholder Alright, suppose let us say this is a signup form. And for the users to register, the username should be more than 10 characters.

And the password should be more than eight characters. All right. So one way what we could do is we could have two messages. All right. So these messages, I can show them right beside the input piece. So the reason why I'm putting these messages right beside the input fields is, I just want to know how many characters that are left, right.

So usually it would be. And for password, it's a guy just left. So if I save it, we can see username has 10 characters left and password has eight characters left. I'm sorry, we need two more variables to store the input fields. So let's say username and password. And we'll quickly bind them to these input fields using the model.

And this one is password, right? So whatever the whatever the text I'm inputting into these fields will be stored automatically to the username and password. So now I want to monitor These two data properties or you know, now I want to watch these two data properties, to understand the length of them and, and to make sure that they are at least 10 characters long. Or if it's password, it's eight characters long. So what I can do is, I can create another property called as watch. It also follows the syntax of an object.

So instead of the watch properties, I can directly use the data properties as a method, right? So let's say I have a username, right? I say username. And say it's a method. So what this syntax essentially does is this data property is being watched. Right?

It's, it's kind of like attaching an eventlistener to variable right? So inside username, for example, what we'll do is console dot log, this dot username. So whenever the data property username is being changed the watch property, what is the data property and whenever Something changes, it outputs us, or it triggers this method, right. So for example, if we open the console log, and if I'm typing anything, you can see whatever a type is being outputted onto the console log. So far removed, blank. Alright, so what we can do is with the help of this, since username is a string, we can output the length of it.

So I'm going to console log it. So if I save it, and I start typing, I can see that the length of the string starts to appear here. So now what we can do is to achieve our desired effect for the form. We can say this stored using a message equal to 10 minus this dot username Plus left. So every single time the username property changes, this gets recalculated. So the length of the username is calculated, and it is subtracted from 10.

And are added the string characters left. And this one is written to the data property username message. So if I save it, and I go out, so as I'm typing, you can see that the number of characters left decreases. So I can just add a small space here if I can. Yeah. So now it's going to negative four means which means the length of the username is much more greater than 10.

So what if we want to restrict it only to 10 so we can add a small check that says, if a name dot length is greater than 10 alert If I save this and also what we can also do is we also have this message. And if I save it, and I go back, as I'm typing, I still have four characters left. And if I exceeded there is an alert All right. So, you can also do the same thing with password or you can also make sure that once the username and password have matched the right amount of terms you can submit the form automatically or that would not be that would not be actually practical, but you can do many more cool stuff with it. And you can also try to add an input events to this form like to kind of like create much more intuitive experience to or to make the user understand like whatever is happening.

So most websites can have like uses watch properties and input events to kind of like as a means for mid form form validation. So whenever the user exits the input field or you know onblur input event is used can affect to understand If the format is right, or if while they're while they're typing, that they can find out if the length is right or if they're including any special characters. So that kind of stuff. So that's it for watch properties. I'll see you in the next one.