My other blog about building cool sign up form got a lot of attention, so I decided to write another tutorial for a ~cool form~.
This is a tutorial for how to build this animated password checklist:
The code on GitHub
Table of Contents
- Preliminary Junk
- Update Password Form
- MustContainItem Component
- Validation Checklist Functionality
To create this demo, I entered
create-react-app into my terminal, deleted the preliminary junk, and set up a file structure like this:
I added some basic styles to things and created a class called
cfb that adds a
flexbox centering the children of an element to which it’s applied. Also, I found out some nice colors using Coolors.co.
Update Password Form
This project’s purpose is to validate a password as it’s entered into an update form. The first thing I need is a password to validate. In
UpdatePasswordContainer.js, I set up a form:
I will explain
validatePassword() in detail later, but it checks the password to make sure it meets the requirements.
allValid variable enables the submit button if the password passes all requirements.
Otherwise, this is a fairly typical React form. It’s inputs update the
onChange for each input and then displays the
useState variable as its value.
Each item on the list will be represented by a
MustContainItem component which looks like this:
data, which is an array containing a string that labels the item and a boolean of whether or not the requirement has been met.
In the div with class
must-item, I put
label in a li node. Then I created a div that receives its class from a function called
setClass() returns a string of classnames that will conditionally animate a line striking through
label based on
meetsReq, the boolean from
Here’s the CSS:
I give the
must-item parent container a
position: relative; so that the child li node and
must-line div are positioned absolutely on top of each other.
must-line gets a
z-index of 1. It's positioned on top of
must-text which has a
z-index of 0. It will cover the text when it appears.
must-line gets a
width of 0. When I add the class
cross-out, the div’s
width expands to 100% and, due to
transition, the div's
width animates between sizes.
Validation Checklist Functionality
The final step is to actually check the password to see if it meets the requirements and update all the relevant components.
First, I set up a
useState hook for each requirement that I want to put on a new password. Then, I set up a hook for when all the requirements are met,
Next, I set up an array of arrays. Each of the inner arrays contains the label string and corresponding
useState variable to pass to a
map() this array creating a
MustContainItem for each array in the array, passed to the component as
Everything is set up at this point except for the actual validating of the password.
I check the password after each character is added or deleted in case a required character is added and then later deleted. For this, I used
onKeyUp. Each time, a key is lifted, I run the function
validatePassword() runs a series of conditional statements.
Each conditional checks the
passwordOne variable stored in a
useState hook for a different thing. If
passwordOne meets the requirement, it updates that specific requirement’s
useState hook. If the hook updates, the strikethrough animation is triggered. Viola.
Hope this is interesting or helpful!
Again, you can find all the code here.