Скачать или смотреть ReactJS button that will run away from the pointer as long as the input is not valid-Run Away button

How to create form with a button that will run away from the pointer on hover as long as the input is not valid. #reactjs RunAway button

Hello, and welcome to my awesome tutorial!

In this video I will explain to you how to make simple email input form, and the submit button will be running away from the pointer if the email is not valid.
So firstly you will need to create your react js project, if you don’t know how to create new project please find the tutorial on my channel.

After successful creation of the project we should go to the App.js file and start writing our logic. Now I will have 2 states, one is for the email input string and the other one is for the validation state.

After initializing the states, I am creating the submit handler function, which will be pretty simple, it will only set the email when the button is clicked for submitting. After we will need to create a function for validating the input. We will test the email string against the regex expression. Now let’s create the form. I will add only one input with a button but you can experiment and create additional inputs.

At the end we should implement the logic for changing the position of the button on hover. We will be manipulating the event target style in order to achieve our final result. The first thing the function does is check if the isValid variable is false by using the negation operator !. If it is false, the function sets the background color of the e.target element to "red" using the style.background property. It then generates random values for the left and top CSS properties using the Math.random() method, multiplies them by 90, and rounds them up using the Math.ceil() method. These values are then set as the left and top CSS properties of the e.target element. Finally, the function sets the text color of the element to "white".
If the isValid state is true, the function sets the background color of the e.target element to "green" using the style.background property.

And also we need to have a useEffect hook which will have the email into the dependency array and will re-render when the email changes and this will enable the user to get green button as soon as he enters valid email.

We forgot to add the input so lets add it to the form and add a function that will be called every time the user changes the input. This function sets the email state to the string that is entered in the input.

And at the end lets write CSS code that sets the style for the button element. Here is an explanation of each line:
• position: absolute - sets the position of the button element to be absolute, which means it is positioned relative to the nearest positioned ancestor element.
• border-radius: 10px - sets the border radius of the button element to be 10 pixels, giving it rounded corners.
• border: solid 1px grey - sets the border of the button element to be a solid line with a width of 1 pixel and a grey color.
• color: white - sets the color of the text within the button to be white.
• background-color: red - sets the background color of the button to be red.
And also I will center the input using flex display and justify content center.

Thanks for watching, please like and subscribe if you like my content.