Learn how build an animated login form with HTML and CSS. Then take it to the next level with a dynamic password meter using JavaScript (Svelte). https://github.com/fireship-io/230-animated-form-password-meter

#tutorial #css #js

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T14:23:20.228Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
1239dd50-3377-4b83-833c-c574e17eb924
4db9986bb2165a5ee036d89399f51f2acffd0549c2ef752642e193cdcbe8d0f9
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
HTML forms are usually very boring, but there's no reason that they can't be one of the most creative aspects of your UI.
And you don't even need a library like Material Design to make that happen.
In today's video, we'll build an animated login form from scratch with HTML and CSS.
Notice how it moves the label up when an input field is focused and also slides in a border underneath.
But when it comes to the password, we'll throw in some JavaScript With Svelte, to take things to another level.
We'll write a simple algorithm to analyze the password strength, then show the end user a strength meter along with validation errors based on the content of their password.
In order to make all this happen from scratch, you'll learn about CSS transforms and transition animations, pseudo elements like After, box shadows and gradients, and even a little bit of regex.
If you're new here, like and subscribe.
And if you like the format of this video, make sure to let me know what you want to see next in the comments.
Let's start by taking a closer look at what we're building today.
What we have here is just a regular HTML form input along with a label.
When the user focuses in on a form input, We translate the label up along the y axis and scale it down a little bit.
This behavior was made famous by material design, but you can easily implement it on your own with just a few lines of CSS.
When the input is focused, we also animate in a border from the left side, but it's not handled with a border.
It actually uses a CSS pseudo element, which we'll talk about later.
Now our password field is really over the top.
When the user starts typing, it animates this password meter based on the strength of the password.
I'll show you how to use a box shadow to create this shutter like effect for each bar in the meter.
In addition, we'll also validate different patterns in the password string to show the user specific validation errors.
And finally, we'll add a little button in the form input so the user can see their password text.
This tutorial is designed for you to follow along step by step, And you can find the project source code on GitHub.
We'll mostly be talking about HTML and CSS, but we'll use Svelte to manage our JavaScript and application state.
And if you've never used Svelte before, don't worry.
You're gonna love it.
It's super intuitive and easy to learn.
To get things started, we'll head over to svelte.dev.
You'll see a command here that you can run with npx to create a new Svelte project.
Go ahead and run these commands from the terminal, then open up your project in Versus Code, and we're ready to go.
In the source directory, you'll see a file called app dot svelte.
This is where we'll be writing all of our code.
For now, you can treat this file like a regular HTML file.
We'll set up a script tag.
This is where our JavaScript will go.
Then a style tag is where our CSS will go.
Everything outside of these tags will be our main HTML markup.
Towards the end of the video, you'll learn how Svelte can magically connect your JavaScript to your HTML.
Now one side note here is that if you go into the public folder, you'll also see a global dot CSS file.
In my demo, I modified the body styles to have a black background with white text.
Now back in our main app component, we'll start by setting up the markup for the initial HTML form.
We have a main element with a form element nested inside, and then inside that, we have a div with a class of field that is basically a container for the input and label.
Inside of this div, we'll add the actual form input, and we'll make sure to give it a type of email.
After the input, we'll add the label, and it's important that this label comes after the input.
And I'll tell you why that's important when we get to the relevant CSS code.
Then we'll do the same exact thing for our password field, but give it a type of password.
If you open up the app on local host 5000, you should have a basic form that looks like this.
Back in our code, we'll start by targeting the form element.
I'm going to be using a gray text color throughout my styles, so I'm going to set that up as a CSS variable here.
That'll make it really easy to change the color of the form if we decide to in the future.
And then we'll set the max width of the form to 500 pixels.
Then we'll define our field style, which is basically a container for the input and label.
We'll give it a width of 100%, and then we'll change the position to relative.
By default, a div has static positioning.
The difference here is very subtle, But the most important thing to know is that when you use relative positioning, it means you can use properties like top, left, bottom, and right to control where this element sits relative to its normal position.
From there, we'll give it a 2 pixel dash border on the bottom that uses our text color variable.
Then we'll provide a good sized margin here to make room for our animations.
Because I'm providing 3 values here, the margin will work like this.
The top margin will be 4 rem, the left and right margins will be auto, and the bottom margin will be 1 rem.
One rem is equal to the root font size of the HTML.
So if you have a font size of 16 pixels, 1 rem is 16 pixels.
And then we'll override a bunch of styles on the input, like the outline, border, overflow, and so on.
The input will basically just sit inside the container while its parent field class will handle all of the fancy animation stuff.
Now because our input has a type of email, it will automatically be validated by the browser.
We can actually target the pseudo selectors of valid and invalid to give the input text a different color based on whether or not it's a valid email address.
You should now have a form that looks like this.
And as you can see, when you type your email address in, it goes from red to green when it becomes a valid email.
And now we're ready to get into the fun stuff.
Let's look at how we can make that border animation when a form field is focused.
We'll do that by targeting the after pseudo element on the field.
Many HTML elements like a div have pseudo elements that you can target and style.
After is like an invisible element that comes after your div.
It never appears in your HTML markup, but if you go into the browser's inspector, you'll see it listed there when you have a style targeting it.
And in our case, we'll use it to display a border underneath the field.
The advantage in this case over a regular CSS border is that we can use transforms to apply fancy animations to it.
We'll give it a position of relative And then a height of 4 pixels, a width of a 100%, and a purple background.
Now by default, we want this element to be hidden.
We can hide it with a transform by setting the scale along the x axis to 0.
And the reason we use scale x here and not just scale It's because we want to preserve the height when we animate it back in.
Now by default, the transform will happen right in the middle of its position.
However, we want it to animate in from left to right, So we set the transform origin to 0%.
However, if you wanted to go from right to left, you could set the transform origin to 100%.
Now to animate it, we simply set up a transition that targets the transform property.
We'll set it for 500 milliseconds and give it an easing timing function.
And then because it's relatively positioned, we'll set its top property to 2 pixels.
That'll just move it down slightly to cover the existing border.
Now in order to have an animation, we need some sort of state change.
We want that state change to happen when the input is focused.
However, the actual styles we're changing are on the field div.
CSS has a very useful pseudo selector called focus within.
When the inner input is focused, we can change styles on the outer field div.
We can set the border color to transparent, and then we'll target the after pseudo element, and we'll set its transform to scale x 1.
And that'll make it appear to slide in from left to right.
At this point, you have a cool looking animated border, but the label isn't positioned right at all.
So how do we create that material design label animation?
In the label class, we'll first set a z index of negative one.
Remember, in the HTML, the label comes after the input, So, technically, it sits on top of it.
But setting a z index of negative one will make the label as if it sits behind the actual form input.
We'll make its position absolute, which means it's relative normally to the entire document or the next relatively positioned element further up in the tree, which, in our case, happens to be the field div, which contains the label.
Next, we'll use a transform to move along the y axis and with a negative value that will move it up higher along the y axis.
We'll set a transform origin of 0%, and then also set up a transition here to animate it.
Now just like our animated border, we can target the label by using field focus within.
When it's focused, we'll go ahead and transform it with a scale of 0.08, making it slightly smaller, and then we'll translate it further up the y axis.
At this point, your animation should work, but you'll notice when we type into the form, the label comes back down into the form field covering up the user's text, and that's not going to work.
This is why it's important that the label comes after the input because it allows us to target the input when its placeholder is not shown, Or in other words, when the user has typed something into the form.
And we can use the plus sign to target the next sibling that has a class of label.
So this means the label will be positioned in the right spot if the field either has focus or if it has text inside the input.
And now we're ready to start building out our password validation meter.
We'll go back into our HTML markup and add a div with a class of strength.
Then inside that div, we'll have 4 spans, each with a class of bar and each with a unique class for bars 1, 2, 3, and 4.
Then directly below that, we'll add an unordered list with a few validation error messages.
Now up in our CSS, we'll define the strength class as a flexible row that has a height of exactly 20 pixels and a width of a 100%.
Now each of the bars inside this flexible row will have a margin right of 5 pixels, a height of 100%, and a width of 25%.
So each individual bar in the password meter will take up exactly 25% of the parent's width.
Now each individual bar can be animated in or out with a little shutter effect using a box shadow.
So we'll set that up as a transition now, and then our box shadow will be inset with an offset on the x axis of 0 pixels and an offset of 20 pixels on the y axis.
The result of this code is an inner shadow that covers up the entire element, because remember, the parent element's height is exactly 20 pixels, And the offset y here is exactly 20 pixels as well.
When we want to show the colors inside one of these bars, we can simply set the box shadow to none.
Now each individual bar has its own color gradient.
So for bar 1, we'll set a background that's equal to a linear gradient that moves from left to right.
On the left side, we'll have red, and then it will gradually transition to orange red on the right side.
Then we'll do the same thing for all the other bars after that, where the color on the left side is the color that ended on the right side from the previous bar.
Your demo at this point should have 4 gray bars.
But if you go back into your source code and comment out the box shadow, then you should see your color gradient.
Okay.
So at this point, everything we've done has been just plain HTML CSS.
But now, we're going to make this app reactive and interactive with Svelte.
The first thing we'll do is go up into our script and add a variable for strength as a number that starts at 0 and a second variable validations, which starts as an empty array.
And the beauty of Svelte It's that this is all you have to do to create reactive state in your application.
Anytime the strength or validation's values change, the component will rerender to display the latest values.
In our case, we want the state to change every time the user types into the password form field, and we'll do that by running a function that validates their password after each input.
This function will take the event as an argument, and then we can get the actual string value of the password by calling event target value.
Now to validate the password, we have 4 different rules that we want to apply.
And we can define those rules as an array where each value in that array is a boolean value That's true or false whether or not the user has passed that rule with their input.
So if the password length is greater than 5, then we know that the validation rule at index 0 has been passed.
The next rule at index 1 in the array performs a reg x search.
Regular expressions are pretty weird, but we have some pretty simple use cases here.
This first rule will search the string for any capital letters ranging from a to z.
If it doesn't find any, it returns negative one.
So we know we have a capital letter in the string if it's greater than negative one.
Our next validation will search through the digits of 0 to 9 to see if they have a number in their password.
And the 4th and final validation will look for a series of special characters.
Now at this point, we have an array of 4 boolean values that will be updated every time the user types into the form.
In JavaScript, we can calculate the total strength of the password by adding up these 4 boolean values, assigning the number 1 to each true value.
An easy way to do that is with array reduce by simply adding the accumulated value to the current value, giving us the sum of all the values in the array.
That's actually all the JavaScript code we need at this point.
Our next step is to bind it to the actual HTML.
To use our validate password function, we need to go down to our password input And listen to the input event, which we do with on and Svelte.
Every time the user types into the form, the input event is fired and then runs our validate password event handler.
That'll update the state of the application.
Now we need to put that state to use by binding it to our HTML.
In Svelte, we can bind a class using this class directive.
What this does is it only applies the bar show class, which will remove that box shadow when the right side evaluates to true.
So we'll show the first bar when the strength is greater than 0, then we'll show the second bar when it's greater than 1, greater than 2, 3, and so on.
Now below that, we either want to show a green check mark or a red x depending on whether or not that validation has been passed.
We can look at each validation by its index And then use a ternary operator to display a check mark when true or an x when false.
And then we can follow the same pattern for each validation message.
At this point, if you open up your demo, you should be able to type into the password field and see it reactively update the state and the UI.
And each time the password goes stronger, it should show the password bar with a shutter like animation.
Now we've already done a lot at this point, but there is one more thing I wanna show you, And that's implementing a way for the user to preview their password before submitting it.
We'll go up into our JavaScript and first add a new property called show password.
Then in our CSS, I'll create a new class here called toggle password, which just absolutely positions a button so it is displayed in the right side of the actual form input itself.
From there, we'll go into our HTML, and right below the label for the password, we'll add a span that has the class of toggle password.
There are a few different ways we could implement this, but I think a kind of unique way to do this is to have the user preview their password by hovering over the actual button itself as opposed to clicking on it.
We can do that by listening to the mouse enter event, and then we'll pass an anonymous function here that simply toggles the show password property to true.
And then on mouse leave, we'll toggle the show password value back to false.
Then inside the actual button content, we'll use a ternary operator here to show a different emoji based on the State of show password.
Then the final magic to convert this from a password field to a text field is to go up here to the input type.
And where we have a static string value for password, we'll use a dynamic ternary that changes it from password to text based on the state of the application.
And now at this point, you should be able to preview the password value by simply hovering over the emoji.
Like, I'm gonna go ahead and wrap things up there.
If you wanna see more Svelte content or have more project ideas, make sure to let me know in the comments.
And if you want access to more advanced content, consider becoming a pro member at FireShip IO.
Thanks for watching, and I will see you in the next one.

Speaker 0: HTML forms are usually very boring, but there's no reason that they can't be one of the most creative aspects of your UI. And you don't even need a library like Material Design to make that happen. In today's video, we'll build an animated login form from scratch with HTML and CSS. Notice how it moves the label up when an input field is focused and also slides in a border underneath. But when it comes to the password, we'll throw in some JavaScript With Svelte, to take things to another level.

We'll write a simple algorithm to analyze the password strength, then show the end user a strength meter along with validation errors based on the content of their password. In order to make all this happen from scratch, you'll learn about CSS transforms and transition animations, pseudo elements like After, box shadows and gradients, and even a little bit of regex. If you're new here, like and subscribe. And if you like the format of this video, make sure to let me know what you want to see next in the comments. Let's start by taking a closer look at what we're building today.

What we have here is just a regular HTML form input along with a label. When the user focuses in on a form input, We translate the label up along the y axis and scale it down a little bit. This behavior was made famous by material design, but you can easily implement it on your own with just a few lines of CSS. When the input is focused, we also animate in a border from the left side, but it's not handled with a border. It actually uses a CSS pseudo element, which we'll talk about later.

Now our password field is really over the top. When the user starts typing, it animates this password meter based on the strength of the password. I'll show you how to use a box shadow to create this shutter like effect for each bar in the meter. In addition, we'll also validate different patterns in the password string to show the user specific validation errors. And finally, we'll add a little button in the form input so the user can see their password text.

This tutorial is designed for you to follow along step by step, And you can find the project source code on GitHub. We'll mostly be talking about HTML and CSS, but we'll use Svelte to manage our JavaScript and application state. And if you've never used Svelte before, don't worry. You're gonna love it. It's super intuitive and easy to learn.

To get things started, we'll head over to svelte.dev. You'll see a command here that you can run with npx to create a new Svelte project. Go ahead and run these commands from the terminal, then open up your project in Versus Code, and we're ready to go. In the source directory, you'll see a file called app dot svelte. This is where we'll be writing all of our code.

For now, you can treat this file like a regular HTML file. We'll set up a script tag. This is where our JavaScript will go. Then a style tag is where our CSS will go. Everything outside of these tags will be our main HTML markup.

Towards the end of the video, you'll learn how Svelte can magically connect your JavaScript to your HTML. Now one side note here is that if you go into the public folder, you'll also see a global dot CSS file. In my demo, I modified the body styles to have a black background with white text. Now back in our main app component, we'll start by setting up the markup for the initial HTML form. We have a main element with a form element nested inside, and then inside that, we have a div with a class of field that is basically a container for the input and label.

Inside of this div, we'll add the actual form input, and we'll make sure to give it a type of email. After the input, we'll add the label, and it's important that this label comes after the input. And I'll tell you why that's important when we get to the relevant CSS code. Then we'll do the same exact thing for our password field, but give it a type of password. If you open up the app on local host 5000, you should have a basic form that looks like this.

Back in our code, we'll start by targeting the form element. I'm going to be using a gray text color throughout my styles, so I'm going to set that up as a CSS variable here. That'll make it really easy to change the color of the form if we decide to in the future. And then we'll set the max width of the form to 500 pixels. Then we'll define our field style, which is basically a container for the input and label.

We'll give it a width of 100%, and then we'll change the position to relative. By default, a div has static positioning. The difference here is very subtle, But the most important thing to know is that when you use relative positioning, it means you can use properties like top, left, bottom, and right to control where this element sits relative to its normal position. From there, we'll give it a 2 pixel dash border on the bottom that uses our text color variable. Then we'll provide a good sized margin here to make room for our animations.

Because I'm providing 3 values here, the margin will work like this. The top margin will be 4 rem, the left and right margins will be auto, and the bottom margin will be 1 rem. One rem is equal to the root font size of the HTML. So if you have a font size of 16 pixels, 1 rem is 16 pixels. And then we'll override a bunch of styles on the input, like the outline, border, overflow, and so on.

The input will basically just sit inside the container while its parent field class will handle all of the fancy animation stuff. Now because our input has a type of email, it will automatically be validated by the browser. We can actually target the pseudo selectors of valid and invalid to give the input text a different color based on whether or not it's a valid email address. You should now have a form that looks like this. And as you can see, when you type your email address in, it goes from red to green when it becomes a valid email.

And now we're ready to get into the fun stuff. Let's look at how we can make that border animation when a form field is focused. We'll do that by targeting the after pseudo element on the field. Many HTML elements like a div have pseudo elements that you can target and style. After is like an invisible element that comes after your div.

It never appears in your HTML markup, but if you go into the browser's inspector, you'll see it listed there when you have a style targeting it. And in our case, we'll use it to display a border underneath the field. The advantage in this case over a regular CSS border is that we can use transforms to apply fancy animations to it. We'll give it a position of relative And then a height of 4 pixels, a width of a 100%, and a purple background. Now by default, we want this element to be hidden.

We can hide it with a transform by setting the scale along the x axis to 0. And the reason we use scale x here and not just scale It's because we want to preserve the height when we animate it back in. Now by default, the transform will happen right in the middle of its position. However, we want it to animate in from left to right, So we set the transform origin to 0%. However, if you wanted to go from right to left, you could set the transform origin to 100%.

Now to animate it, we simply set up a transition that targets the transform property. We'll set it for 500 milliseconds and give it an easing timing function. And then because it's relatively positioned, we'll set its top property to 2 pixels. That'll just move it down slightly to cover the existing border. Now in order to have an animation, we need some sort of state change.

We want that state change to happen when the input is focused. However, the actual styles we're changing are on the field div. CSS has a very useful pseudo selector called focus within. When the inner input is focused, we can change styles on the outer field div. We can set the border color to transparent, and then we'll target the after pseudo element, and we'll set its transform to scale x 1.

And that'll make it appear to slide in from left to right. At this point, you have a cool looking animated border, but the label isn't positioned right at all. So how do we create that material design label animation? In the label class, we'll first set a z index of negative one. Remember, in the HTML, the label comes after the input, So, technically, it sits on top of it.

But setting a z index of negative one will make the label as if it sits behind the actual form input. We'll make its position absolute, which means it's relative normally to the entire document or the next relatively positioned element further up in the tree, which, in our case, happens to be the field div, which contains the label. Next, we'll use a transform to move along the y axis and with a negative value that will move it up higher along the y axis. We'll set a transform origin of 0%, and then also set up a transition here to animate it. Now just like our animated border, we can target the label by using field focus within.

When it's focused, we'll go ahead and transform it with a scale of 0.08, making it slightly smaller, and then we'll translate it further up the y axis. At this point, your animation should work, but you'll notice when we type into the form, the label comes back down into the form field covering up the user's text, and that's not going to work. This is why it's important that the label comes after the input because it allows us to target the input when its placeholder is not shown, Or in other words, when the user has typed something into the form. And we can use the plus sign to target the next sibling that has a class of label. So this means the label will be positioned in the right spot if the field either has focus or if it has text inside the input.

And now we're ready to start building out our password validation meter. We'll go back into our HTML markup and add a div with a class of strength. Then inside that div, we'll have 4 spans, each with a class of bar and each with a unique class for bars 1, 2, 3, and 4. Then directly below that, we'll add an unordered list with a few validation error messages. Now up in our CSS, we'll define the strength class as a flexible row that has a height of exactly 20 pixels and a width of a 100%.

Now each of the bars inside this flexible row will have a margin right of 5 pixels, a height of 100%, and a width of 25%. So each individual bar in the password meter will take up exactly 25% of the parent's width. Now each individual bar can be animated in or out with a little shutter effect using a box shadow. So we'll set that up as a transition now, and then our box shadow will be inset with an offset on the x axis of 0 pixels and an offset of 20 pixels on the y axis. The result of this code is an inner shadow that covers up the entire element, because remember, the parent element's height is exactly 20 pixels, And the offset y here is exactly 20 pixels as well.

When we want to show the colors inside one of these bars, we can simply set the box shadow to none. Now each individual bar has its own color gradient. So for bar 1, we'll set a background that's equal to a linear gradient that moves from left to right. On the left side, we'll have red, and then it will gradually transition to orange red on the right side. Then we'll do the same thing for all the other bars after that, where the color on the left side is the color that ended on the right side from the previous bar.

Your demo at this point should have 4 gray bars. But if you go back into your source code and comment out the box shadow, then you should see your color gradient. Okay. So at this point, everything we've done has been just plain HTML CSS. But now, we're going to make this app reactive and interactive with Svelte.

The first thing we'll do is go up into our script and add a variable for strength as a number that starts at 0 and a second variable validations, which starts as an empty array. And the beauty of Svelte It's that this is all you have to do to create reactive state in your application. Anytime the strength or validation's values change, the component will rerender to display the latest values. In our case, we want the state to change every time the user types into the password form field, and we'll do that by running a function that validates their password after each input. This function will take the event as an argument, and then we can get the actual string value of the password by calling event target value.

Now to validate the password, we have 4 different rules that we want to apply. And we can define those rules as an array where each value in that array is a boolean value That's true or false whether or not the user has passed that rule with their input. So if the password length is greater than 5, then we know that the validation rule at index 0 has been passed. The next rule at index 1 in the array performs a reg x search. Regular expressions are pretty weird, but we have some pretty simple use cases here.

This first rule will search the string for any capital letters ranging from a to z. If it doesn't find any, it returns negative one. So we know we have a capital letter in the string if it's greater than negative one. Our next validation will search through the digits of 0 to 9 to see if they have a number in their password. And the 4th and final validation will look for a series of special characters.

Now at this point, we have an array of 4 boolean values that will be updated every time the user types into the form. In JavaScript, we can calculate the total strength of the password by adding up these 4 boolean values, assigning the number 1 to each true value. An easy way to do that is with array reduce by simply adding the accumulated value to the current value, giving us the sum of all the values in the array. That's actually all the JavaScript code we need at this point. Our next step is to bind it to the actual HTML.

To use our validate password function, we need to go down to our password input And listen to the input event, which we do with on and Svelte. Every time the user types into the form, the input event is fired and then runs our validate password event handler. That'll update the state of the application. Now we need to put that state to use by binding it to our HTML. In Svelte, we can bind a class using this class directive.

What this does is it only applies the bar show class, which will remove that box shadow when the right side evaluates to true. So we'll show the first bar when the strength is greater than 0, then we'll show the second bar when it's greater than 1, greater than 2, 3, and so on. Now below that, we either want to show a green check mark or a red x depending on whether or not that validation has been passed. We can look at each validation by its index And then use a ternary operator to display a check mark when true or an x when false. And then we can follow the same pattern for each validation message.

At this point, if you open up your demo, you should be able to type into the password field and see it reactively update the state and the UI. And each time the password goes stronger, it should show the password bar with a shutter like animation. Now we've already done a lot at this point, but there is one more thing I wanna show you, And that's implementing a way for the user to preview their password before submitting it. We'll go up into our JavaScript and first add a new property called show password. Then in our CSS, I'll create a new class here called toggle password, which just absolutely positions a button so it is displayed in the right side of the actual form input itself.

From there, we'll go into our HTML, and right below the label for the password, we'll add a span that has the class of toggle password. There are a few different ways we could implement this, but I think a kind of unique way to do this is to have the user preview their password by hovering over the actual button itself as opposed to clicking on it. We can do that by listening to the mouse enter event, and then we'll pass an anonymous function here that simply toggles the show password property to true. And then on mouse leave, we'll toggle the show password value back to false. Then inside the actual button content, we'll use a ternary operator here to show a different emoji based on the State of show password.

Then the final magic to convert this from a password field to a text field is to go up here to the input type. And where we have a static string value for password, we'll use a dynamic ternary that changes it from password to text based on the state of the application. And now at this point, you should be able to preview the password value by simply hovering over the emoji. Like, I'm gonna go ahead and wrap things up there. If you wanna see more Svelte content or have more project ideas, make sure to let me know in the comments.

And if you want access to more advanced content, consider becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one.
HTML forms are usually very boring, but there's no reason that they can't be one of the most creative aspects of your UI. And you don't even need a library like Material Design to make that happen.
In today's video, we'll build an animated login form from scratch with HTML and CSS. Notice how it moves the label up when an input field is focused and also slides in a border underneath. But when it comes to the password, we'll throw in some JavaScript With Svelte, to take things to another level.
animation
We'll write a simple algorithm to analyze the password strength, then show the end user a strength meter along with validation errors based on the content of their password.
In order to make all this happen from scratch, you'll learn about CSS transforms and transition animations, pseudo elements like After, box shadows and gradients, and even a little bit of regex. If you're new here, like and subscribe. And if you like the format of this video, make sure to let me know what you want to see next in the comments. Let's start by taking a closer look at what we're building today. What we have here is just a regular HTML form input along with a label.
animation
youtube
When the user focuses in on a form input, We translate the label up along the y axis and scale it down a little bit.
This behavior was made famous by material design, but you can easily implement it on your own with just a few lines of CSS. When the input is focused, we also animate in a border from the left side, but it's not handled with a border. It actually uses a CSS pseudo element, which we'll talk about later.
animation
Now our password field is really over the top. When the user starts typing, it animates this password meter based on the strength of the password. I'll show you how to use a box shadow to create this shutter like effect for each bar in the meter. In addition, we'll also validate different patterns in the password string to show the user specific validation errors. And finally, we'll add a little button in the form input so the user can see their password text. This tutorial is designed for you to follow along step by step, And you can find the project source code on GitHub. We'll mostly be talking about HTML and CSS, but we'll use Svelte to manage our JavaScript and application state. And if you've never used Svelte before, don't worry.
You're gonna love it. It's super intuitive and easy to learn. To get things started, we'll head over to svelte.dev. You'll see a command here that you can run with npx to create a new Svelte project. Go ahead and run these commands from the terminal, then open up your project in Versus Code, and we're ready to go. In the source directory, you'll see a file called app dot svelte. This is where we'll be writing all of our code. For now, you can treat this file like a regular HTML file.
software development
software
We'll set up a script tag. This is where our JavaScript will go. Then a style tag is where our CSS will go. Everything outside of these tags will be our main HTML markup. Towards the end of the video, you'll learn how Svelte can magically connect your JavaScript to your HTML. Now one side note here is that if you go into the public folder, you'll also see a global dot CSS file. In my demo, I modified the body styles to have a black background with white text. Now back in our main app component, we'll start by setting up the markup for the initial HTML form. We have a main element with a form element nested inside, and then inside that, we have a div with a class of field that is basically a container for the input and label. Inside of this div, we'll add the actual form input, and we'll make sure to give it a type of email. After the input, we'll add the label, and it's important that this label comes after the input. And I'll tell you why that's important when we get to the relevant CSS code. Then we'll do the same exact thing for our password field, but give it a type of password. If you open up the app on local host 5000, you should have a basic form that looks like this. Back in our code, we'll start by targeting the form element. I'm going to be using a gray text color throughout my styles, so I'm going to set that up as a CSS variable here. That'll make it really easy to change the color of the form if we decide to in the future. And then we'll set the max width of the form to 500 pixels. Then we'll define our field style, which is basically a container for the input and label. We'll give it a width of 100%, and then we'll change the position to relative. By default, a div has static positioning. The difference here is very subtle, But the most important thing to know is that when you use relative positioning, it means you can use properties like top, left, bottom, and right to control where this element sits relative to its normal position.
From there, we'll give it a 2 pixel dash border on the bottom that uses our text color variable. Then we'll provide a good sized margin here to make room for our animations. Because I'm providing 3 values here, the margin will work like this. The top margin will be 4 rem, the left and right margins will be auto, and the bottom margin will be 1 rem.
graphic design
One rem is equal to the root font size of the HTML. So if you have a font size of 16 pixels, 1 rem is 16 pixels.
And then we'll override a bunch of styles on the input, like the outline, border, overflow, and so on. The input will basically just sit inside the container while its parent field class will handle all of the fancy animation stuff. Now because our input has a type of email, it will automatically be validated by the browser.
animation
We can actually target the pseudo selectors of valid and invalid to give the input text a different color based on whether or not it's a valid email address.
You should now have a form that looks like this. And as you can see, when you type your email address in, it goes from red to green when it becomes a valid email. And now we're ready to get into the fun stuff. Let's look at how we can make that border animation when a form field is focused. We'll do that by targeting the after pseudo element on the field. Many HTML elements like a div have pseudo elements that you can target and style.
email
animation
After is like an invisible element that comes after your div. It never appears in your HTML markup, but if you go into the browser's inspector, you'll see it listed there when you have a style targeting it.
And in our case, we'll use it to display a border underneath the field. The advantage in this case over a regular CSS border is that we can use transforms to apply fancy animations to it. We'll give it a position of relative And then a height of 4 pixels, a width of a 100%, and a purple background. Now by default, we want this element to be hidden. We can hide it with a transform by setting the scale along the x axis to 0. And the reason we use scale x here and not just scale It's because we want to preserve the height when we animate it back in. Now by default, the transform will happen right in the middle of its position. However, we want it to animate in from left to right, So we set the transform origin to 0%. However, if you wanted to go from right to left, you could set the transform origin to 100%.
graphic design
geometry
Now to animate it, we simply set up a transition that targets the transform property.
We'll set it for 500 milliseconds and give it an easing timing function. And then because it's relatively positioned, we'll set its top property to 2 pixels. That'll just move it down slightly to cover the existing border. Now in order to have an animation, we need some sort of state change. We want that state change to happen when the input is focused. However, the actual styles we're changing are on the field div. CSS has a very useful pseudo selector called focus within.
animation
When the inner input is focused, we can change styles on the outer field div. We can set the border color to transparent, and then we'll target the after pseudo element, and we'll set its transform to scale x 1.
And that'll make it appear to slide in from left to right. At this point, you have a cool looking animated border, but the label isn't positioned right at all. So how do we create that material design label animation? In the label class, we'll first set a z index of negative one. Remember, in the HTML, the label comes after the input, So, technically, it sits on top of it. But setting a z index of negative one will make the label as if it sits behind the actual form input.
animation
graphic design
We'll make its position absolute, which means it's relative normally to the entire document or the next relatively positioned element further up in the tree, which, in our case, happens to be the field div, which contains the label.
Next, we'll use a transform to move along the y axis and with a negative value that will move it up higher along the y axis. We'll set a transform origin of 0%, and then also set up a transition here to animate it. Now just like our animated border, we can target the label by using field focus within. When it's focused, we'll go ahead and transform it with a scale of 0.08, making it slightly smaller, and then we'll translate it further up the y axis. At this point, your animation should work, but you'll notice when we type into the form, the label comes back down into the form field covering up the user's text, and that's not going to work. This is why it's important that the label comes after the input because it allows us to target the input when its placeholder is not shown, Or in other words, when the user has typed something into the form.
animation
geometry
And we can use the plus sign to target the next sibling that has a class of label. So this means the label will be positioned in the right spot if the field either has focus or if it has text inside the input. And now we're ready to start building out our password validation meter. We'll go back into our HTML markup and add a div with a class of strength. Then inside that div, we'll have 4 spans, each with a class of bar and each with a unique class for bars 1, 2, 3, and 4. Then directly below that, we'll add an unordered list with a few validation error messages. Now up in our CSS, we'll define the strength class as a flexible row that has a height of exactly 20 pixels and a width of a 100%. Now each of the bars inside this flexible row will have a margin right of 5 pixels, a height of 100%, and a width of 25%. So each individual bar in the password meter will take up exactly 25% of the parent's width. Now each individual bar can be animated in or out with a little shutter effect using a box shadow. So we'll set that up as a transition now, and then our box shadow will be inset with an offset on the x axis of 0 pixels and an offset of 20 pixels on the y axis. The result of this code is an inner shadow that covers up the entire element, because remember, the parent element's height is exactly 20 pixels, And the offset y here is exactly 20 pixels as well. When we want to show the colors inside one of these bars, we can simply set the box shadow to none. Now each individual bar has its own color gradient. So for bar 1, we'll set a background that's equal to a linear gradient that moves from left to right. On the left side, we'll have red, and then it will gradually transition to orange red on the right side. Then we'll do the same thing for all the other bars after that, where the color on the left side is the color that ended on the right side from the previous bar. Your demo at this point should have 4 gray bars. But if you go back into your source code and comment out the box shadow, then you should see your color gradient. Okay. So at this point, everything we've done has been just plain HTML CSS. But now, we're going to make this app reactive and interactive with Svelte.
The first thing we'll do is go up into our script and add a variable for strength as a number that starts at 0 and a second variable validations, which starts as an empty array. And the beauty of Svelte It's that this is all you have to do to create reactive state in your application.
programming
Anytime the strength or validation's values change, the component will rerender to display the latest values. In our case, we want the state to change every time the user types into the password form field, and we'll do that by running a function that validates their password after each input. This function will take the event as an argument, and then we can get the actual string value of the password by calling event target value. Now to validate the password, we have 4 different rules that we want to apply. And we can define those rules as an array where each value in that array is a boolean value That's true or false whether or not the user has passed that rule with their input. So if the password length is greater than 5, then we know that the validation rule at index 0 has been passed. The next rule at index 1 in the array performs a reg x search. Regular expressions are pretty weird, but we have some pretty simple use cases here. This first rule will search the string for any capital letters ranging from a to z. If it doesn't find any, it returns negative one. So we know we have a capital letter in the string if it's greater than negative one. Our next validation will search through the digits of 0 to 9 to see if they have a number in their password. And the 4th and final validation will look for a series of special characters. Now at this point, we have an array of 4 boolean values that will be updated every time the user types into the form. In JavaScript, we can calculate the total strength of the password by adding up these 4 boolean values, assigning the number 1 to each true value. An easy way to do that is with array reduce by simply adding the accumulated value to the current value, giving us the sum of all the values in the array. That's actually all the JavaScript code we need at this point. Our next step is to bind it to the actual HTML. To use our validate password function, we need to go down to our password input And listen to the input event, which we do with on and Svelte. Every time the user types into the form, the input event is fired and then runs our validate password event handler. That'll update the state of the application. Now we need to put that state to use by binding it to our HTML. In Svelte, we can bind a class using this class directive. What this does is it only applies the bar show class, which will remove that box shadow when the right side evaluates to true. So we'll show the first bar when the strength is greater than 0, then we'll show the second bar when it's greater than 1, greater than 2, 3, and so on. Now below that, we either want to show a green check mark or a red x depending on whether or not that validation has been passed.
We can look at each validation by its index And then use a ternary operator to display a check mark when true or an x when false. And then we can follow the same pattern for each validation message. At this point, if you open up your demo, you should be able to type into the password field and see it reactively update the state and the UI.
logic
And each time the password goes stronger, it should show the password bar with a shutter like animation. Now we've already done a lot at this point, but there is one more thing I wanna show you, And that's implementing a way for the user to preview their password before submitting it. We'll go up into our JavaScript and first add a new property called show password. Then in our CSS, I'll create a new class here called toggle password, which just absolutely positions a button so it is displayed in the right side of the actual form input itself. From there, we'll go into our HTML, and right below the label for the password, we'll add a span that has the class of toggle password. There are a few different ways we could implement this, but I think a kind of unique way to do this is to have the user preview their password by hovering over the actual button itself as opposed to clicking on it. We can do that by listening to the mouse enter event, and then we'll pass an anonymous function here that simply toggles the show password property to true. And then on mouse leave, we'll toggle the show password value back to false. Then inside the actual button content, we'll use a ternary operator here to show a different emoji based on the State of show password. Then the final magic to convert this from a password field to a text field is to go up here to the input type. And where we have a static string value for password, we'll use a dynamic ternary that changes it from password to text based on the state of the application. And now at this point, you should be able to preview the password value by simply hovering over the emoji. Like, I'm gonna go ahead and wrap things up there.
If you wanna see more Svelte content or have more project ideas, make sure to let me know in the comments. And if you want access to more advanced content, consider becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one.
blogging
HTML forms are usually very boring, but there's no reason that they can't be one of the most creative aspects of your UI. And you don't even need a library like Material Design to make that happen. In today's video, we'll build an animated login form from scratch with HTML and CSS. Notice how it moves the label up when an input field is focused and also slides in a border underneath. But when it comes to the password, we'll throw in some JavaScript With Svelte, to take things to another level. We'll write a simple algorithm to analyze the password strength, then show the end user a strength meter along with validation errors based on the content of their password. In order to make all this happen from scratch, you'll learn about CSS transforms and transition animations, pseudo elements like After, box shadows and gradients, and even a little bit of regex. If you're new here, like and subscribe. And if you like the format of this video, make sure to let me know what you want to see next in the comments. Let's start by taking a closer look at what we're building today. What we have here is just a regular HTML form input along with a label. When the user focuses in on a form input, We translate the label up along the y axis and scale it down a little bit. This behavior was made famous by material design, but you can easily implement it on your own with just a few lines of CSS. When the input is focused, we also animate in a border from the left side, but it's not handled with a border. It actually uses a CSS pseudo element, which we'll talk about later. Now our password field is really over the top. When the user starts typing, it animates this password meter based on the strength of the password. I'll show you how to use a box shadow to create this shutter like effect for each bar in the meter. In addition, we'll also validate different patterns in the password string to show the user specific validation errors. And finally, we'll add a little button in the form input so the user can see their password text. This tutorial is designed for you to follow along step by step, And you can find the project source code on GitHub. We'll mostly be talking about HTML and CSS, but we'll use Svelte to manage our JavaScript and application state. And if you've never used Svelte before, don't worry. You're gonna love it. It's super intuitive and easy to learn. To get things started, we'll head over to svelte.dev. You'll see a command here that you can run with npx to create a new Svelte project. Go ahead and run these commands from the terminal, then open up your project in Versus Code, and we're ready to go. In the source directory, you'll see a file called app dot svelte. This is where we'll be writing all of our code. For now, you can treat this file like a regular HTML file. We'll set up a script tag. This is where our JavaScript will go. Then a style tag is where our CSS will go. Everything outside of these tags will be our main HTML markup. Towards the end of the video, you'll learn how Svelte can magically connect your JavaScript to your HTML. Now one side note here is that if you go into the public folder, you'll also see a global dot CSS file. In my demo, I modified the body styles to have a black background with white text. Now back in our main app component, we'll start by setting up the markup for the initial HTML form. We have a main element with a form element nested inside, and then inside that, we have a div with a class of field that is basically a container for the input and label. Inside of this div, we'll add the actual form input, and we'll make sure to give it a type of email. After the input, we'll add the label, and it's important that this label comes after the input. And I'll tell you why that's important when we get to the relevant CSS code. Then we'll do the same exact thing for our password field, but give it a type of password. If you open up the app on local host 5000, you should have a basic form that looks like this. Back in our code, we'll start by targeting the form element. I'm going to be using a gray text color throughout my styles, so I'm going to set that up as a CSS variable here. That'll make it really easy to change the color of the form if we decide to in the future. And then we'll set the max width of the form to 500 pixels. Then we'll define our field style, which is basically a container for the input and label. We'll give it a width of 100%, and then we'll change the position to relative. By default, a div has static positioning. The difference here is very subtle, But the most important thing to know is that when you use relative positioning, it means you can use properties like top, left, bottom, and right to control where this element sits relative to its normal position. From there, we'll give it a 2 pixel dash border on the bottom that uses our text color variable. Then we'll provide a good sized margin here to make room for our animations. Because I'm providing 3 values here, the margin will work like this. The top margin will be 4 rem, the left and right margins will be auto, and the bottom margin will be 1 rem. One rem is equal to the root font size of the HTML. So if you have a font size of 16 pixels, 1 rem is 16 pixels. And then we'll override a bunch of styles on the input, like the outline, border, overflow, and so on. The input will basically just sit inside the container while its parent field class will handle all of the fancy animation stuff. Now because our input has a type of email, it will automatically be validated by the browser. We can actually target the pseudo selectors of valid and invalid to give the input text a different color based on whether or not it's a valid email address. You should now have a form that looks like this. And as you can see, when you type your email address in, it goes from red to green when it becomes a valid email. And now we're ready to get into the fun stuff. Let's look at how we can make that border animation when a form field is focused. We'll do that by targeting the after pseudo element on the field. Many HTML elements like a div have pseudo elements that you can target and style. After is like an invisible element that comes after your div. It never appears in your HTML markup, but if you go into the browser's inspector, you'll see it listed there when you have a style targeting it. And in our case, we'll use it to display a border underneath the field. The advantage in this case over a regular CSS border is that we can use transforms to apply fancy animations to it. We'll give it a position of relative And then a height of 4 pixels, a width of a 100%, and a purple background. Now by default, we want this element to be hidden. We can hide it with a transform by setting the scale along the x axis to 0. And the reason we use scale x here and not just scale It's because we want to preserve the height when we animate it back in. Now by default, the transform will happen right in the middle of its position. However, we want it to animate in from left to right, So we set the transform origin to 0%. However, if you wanted to go from right to left, you could set the transform origin to 100%. Now to animate it, we simply set up a transition that targets the transform property. We'll set it for 500 milliseconds and give it an easing timing function. And then because it's relatively positioned, we'll set its top property to 2 pixels. That'll just move it down slightly to cover the existing border. Now in order to have an animation, we need some sort of state change. We want that state change to happen when the input is focused. However, the actual styles we're changing are on the field div. CSS has a very useful pseudo selector called focus within. When the inner input is focused, we can change styles on the outer field div. We can set the border color to transparent, and then we'll target the after pseudo element, and we'll set its transform to scale x 1. And that'll make it appear to slide in from left to right. At this point, you have a cool looking animated border, but the label isn't positioned right at all. So how do we create that material design label animation? In the label class, we'll first set a z index of negative one. Remember, in the HTML, the label comes after the input, So, technically, it sits on top of it. But setting a z index of negative one will make the label as if it sits behind the actual form input. We'll make its position absolute, which means it's relative normally to the entire document or the next relatively positioned element further up in the tree, which, in our case, happens to be the field div, which contains the label. Next, we'll use a transform to move along the y axis and with a negative value that will move it up higher along the y axis. We'll set a transform origin of 0%, and then also set up a transition here to animate it. Now just like our animated border, we can target the label by using field focus within. When it's focused, we'll go ahead and transform it with a scale of 0.08, making it slightly smaller, and then we'll translate it further up the y axis. At this point, your animation should work, but you'll notice when we type into the form, the label comes back down into the form field covering up the user's text, and that's not going to work. This is why it's important that the label comes after the input because it allows us to target the input when its placeholder is not shown, Or in other words, when the user has typed something into the form. And we can use the plus sign to target the next sibling that has a class of label. So this means the label will be positioned in the right spot if the field either has focus or if it has text inside the input. And now we're ready to start building out our password validation meter. We'll go back into our HTML markup and add a div with a class of strength. Then inside that div, we'll have 4 spans, each with a class of bar and each with a unique class for bars 1, 2, 3, and 4. Then directly below that, we'll add an unordered list with a few validation error messages. Now up in our CSS, we'll define the strength class as a flexible row that has a height of exactly 20 pixels and a width of a 100%. Now each of the bars inside this flexible row will have a margin right of 5 pixels, a height of 100%, and a width of 25%. So each individual bar in the password meter will take up exactly 25% of the parent's width. Now each individual bar can be animated in or out with a little shutter effect using a box shadow. So we'll set that up as a transition now, and then our box shadow will be inset with an offset on the x axis of 0 pixels and an offset of 20 pixels on the y axis. The result of this code is an inner shadow that covers up the entire element, because remember, the parent element's height is exactly 20 pixels, And the offset y here is exactly 20 pixels as well. When we want to show the colors inside one of these bars, we can simply set the box shadow to none. Now each individual bar has its own color gradient. So for bar 1, we'll set a background that's equal to a linear gradient that moves from left to right. On the left side, we'll have red, and then it will gradually transition to orange red on the right side. Then we'll do the same thing for all the other bars after that, where the color on the left side is the color that ended on the right side from the previous bar. Your demo at this point should have 4 gray bars. But if you go back into your source code and comment out the box shadow, then you should see your color gradient. Okay. So at this point, everything we've done has been just plain HTML CSS. But now, we're going to make this app reactive and interactive with Svelte. The first thing we'll do is go up into our script and add a variable for strength as a number that starts at 0 and a second variable validations, which starts as an empty array. And the beauty of Svelte It's that this is all you have to do to create reactive state in your application. Anytime the strength or validation's values change, the component will rerender to display the latest values. In our case, we want the state to change every time the user types into the password form field, and we'll do that by running a function that validates their password after each input. This function will take the event as an argument, and then we can get the actual string value of the password by calling event target value. Now to validate the password, we have 4 different rules that we want to apply. And we can define those rules as an array where each value in that array is a boolean value That's true or false whether or not the user has passed that rule with their input. So if the password length is greater than 5, then we know that the validation rule at index 0 has been passed. The next rule at index 1 in the array performs a reg x search. Regular expressions are pretty weird, but we have some pretty simple use cases here. This first rule will search the string for any capital letters ranging from a to z. If it doesn't find any, it returns negative one. So we know we have a capital letter in the string if it's greater than negative one. Our next validation will search through the digits of 0 to 9 to see if they have a number in their password. And the 4th and final validation will look for a series of special characters. Now at this point, we have an array of 4 boolean values that will be updated every time the user types into the form. In JavaScript, we can calculate the total strength of the password by adding up these 4 boolean values, assigning the number 1 to each true value. An easy way to do that is with array reduce by simply adding the accumulated value to the current value, giving us the sum of all the values in the array. That's actually all the JavaScript code we need at this point. Our next step is to bind it to the actual HTML. To use our validate password function, we need to go down to our password input And listen to the input event, which we do with on and Svelte. Every time the user types into the form, the input event is fired and then runs our validate password event handler. That'll update the state of the application. Now we need to put that state to use by binding it to our HTML. In Svelte, we can bind a class using this class directive. What this does is it only applies the bar show class, which will remove that box shadow when the right side evaluates to true. So we'll show the first bar when the strength is greater than 0, then we'll show the second bar when it's greater than 1, greater than 2, 3, and so on. Now below that, we either want to show a green check mark or a red x depending on whether or not that validation has been passed. We can look at each validation by its index And then use a ternary operator to display a check mark when true or an x when false. And then we can follow the same pattern for each validation message. At this point, if you open up your demo, you should be able to type into the password field and see it reactively update the state and the UI. And each time the password goes stronger, it should show the password bar with a shutter like animation. Now we've already done a lot at this point, but there is one more thing I wanna show you, And that's implementing a way for the user to preview their password before submitting it. We'll go up into our JavaScript and first add a new property called show password. Then in our CSS, I'll create a new class here called toggle password, which just absolutely positions a button so it is displayed in the right side of the actual form input itself. From there, we'll go into our HTML, and right below the label for the password, we'll add a span that has the class of toggle password. There are a few different ways we could implement this, but I think a kind of unique way to do this is to have the user preview their password by hovering over the actual button itself as opposed to clicking on it. We can do that by listening to the mouse enter event, and then we'll pass an anonymous function here that simply toggles the show password property to true. And then on mouse leave, we'll toggle the show password value back to false. Then inside the actual button content, we'll use a ternary operator here to show a different emoji based on the State of show password. Then the final magic to convert this from a password field to a text field is to go up here to the input type. And where we have a static string value for password, we'll use a dynamic ternary that changes it from password to text based on the state of the application. And now at this point, you should be able to preview the password value by simply hovering over the emoji. Like, I'm gonna go ahead and wrap things up there. If you wanna see more Svelte content or have more project ideas, make sure to let me know in the comments. And if you want access to more advanced content, consider becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one.
HTML
html
forms
forms
are
are
usually
usually
very
very
boring,
boring
but
but
there's
there's
no
no
reason
reason
that
that
they
they
can't
can't
be
be
one
one
of
of
the
the
most
most
creative
creative
aspects
aspects
of
of
your
your
UI.
ui
And
and
you
you
don't
don't
even
even
need
need
a
a
library
library
like
like
Material
material
Design
design
to
to
make
make
that
that
happen.
happen
In
in
today's
today's
video,
video
we'll
we'll
build
build
an
an
animated
animated
login
login
form
form
from
from
scratch
scratch
with
with
HTML
html
and
and
CSS.
css
Notice
notice
how
how
it
it
moves
moves
the
the
label
label
up
up
when
when
an
an
input
input
field
field
is
is
focused
focused
and
and
also
also
slides
slides
in
in
a
a
border
border
underneath.
underneath
But
but
when
when
it
it
comes
comes
to
to
the
the
password,
password
we'll
we'll
throw
throw
in
in
some
some
JavaScript
javascript
With
with
Svelte,
svelte
to
to
take
take
things
things
to
to
another
another
level.
level
We'll
we'll
write
write
a
a
simple
simple
algorithm
algorithm
to
to
analyze
analyze
the
the
password
password
strength,
strength
then
then
show
show
the
the
end
end
user
user
a
a
strength
strength
meter
meter
along
along
with
with
validation
validation
errors
errors
based
based
on
on
the
the
content
content
of
of
their
their
password.
password
In
in
order
order
to
to
make
make
all
all
this
this
happen
happen
from
from
scratch,
scratch
you'll
you'll
learn
learn
about
about
CSS
css
transforms
transforms
and
and
transition
transition
animations,
animations
pseudo
pseudo
elements
elements
like
like
After,
after
box
box
shadows
shadows
and
and
gradients,
gradients
and
and
even
even
a
a
little
little
bit
bit
of
of
regex.
regex
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
like
like
the
the
format
format
of
of
this
this
video,
video
make
make
sure
sure
to
to
let
let
me
me
know
know
what
what
you
you
want
want
to
to
see
see
next
next
in
in
the
the
comments.
comments
Let's
let's
start
start
by
by
taking
taking
a
a
closer
closer
look
look
at
at
what
what
we're
we're
building
building
today.
today
What
what
we
we
have
have
here
here
is
is
just
just
a
a
regular
regular
HTML
html
form
form
input
input
along
along
with
with
a
a
label.
label
When
when
the
the
user
user
focuses
focuses
in
in
on
on
a
a
form
form
input,
input
We
we
translate
translate
the
the
label
label
up
up
along
along
the
the
y
y
axis
axis
and
and
scale
scale
it
it
down
down
a
a
little
little
bit.
bit
This
this
behavior
behavior
was
was
made
made
famous
famous
by
by
material
material
design,
design
but
but
you
you
can
can
easily
easily
implement
implement
it
it
on
on
your
your
own
own
with
with
just
just
a
a
few
few
lines
lines
of
of
CSS.
css
When
when
the
the
input
input
is
is
focused,
focused
we
we
also
also
animate
animate
in
in
a
a
border
border
from
from
the
the
left
left
side,
side
but
but
it's
it's
not
not
handled
handled
with
with
a
a
border.
border
It
it
actually
actually
uses
uses
a
a
CSS
css
pseudo
pseudo
element,
element
which
which
we'll
we'll
talk
talk
about
about
later.
later
Now
now
our
our
password
password
field
field
is
is
really
really
over
over
the
the
top.
top
When
when
the
the
user
user
starts
starts
typing,
typing
it
it
animates
animates
this
this
password
password
meter
meter
based
based
on
on
the
the
strength
strength
of
of
the
the
password.
password
I'll
i'll
show
show
you
you
how
how
to
to
use
use
a
a
box
box
shadow
shadow
to
to
create
create
this
this
shutter
shutter
like
like
effect
effect
for
for
each
each
bar
bar
in
in
the
the
meter.
meter
In
in
addition,
addition
we'll
we'll
also
also
validate
validate
different
different
patterns
patterns
in
in
the
the
password
password
string
string
to
to
show
show
the
the
user
user
specific
specific
validation
validation
errors.
errors
And
and
finally,
finally
we'll
we'll
add
add
a
a
little
little
button
button
in
in
the
the
form
form
input
input
so
so
the
the
user
user
can
can
see
see
their
their
password
password
text.
text
This
this
tutorial
tutorial
is
is
designed
designed
for
for
you
you
to
to
follow
follow
along
along
step
step
by
by
step,
step
And
and
you
you
can
can
find
find
the
the
project
project
source
source
code
code
on
on
GitHub.
github
We'll
we'll
mostly
mostly
be
be
talking
talking
about
about
HTML
html
and
and
CSS,
css
but
but
we'll
we'll
use
use
Svelte
svelte
to
to
manage
manage
our
our
JavaScript
javascript
and
and
application
application
state.
state
And
and
if
if
you've
you've
never
never
used
used
Svelte
svelte
before,
before
don't
don't
worry.
worry
You're
you're
gonna
gonna
love
love
it.
it
It's
it's
super
super
intuitive
intuitive
and
and
easy
easy
to
to
learn.
learn
To
to
get
get
things
things
started,
started
we'll
we'll
head
head
over
over
to
to
svelte.dev.
svelte.dev
You'll
you'll
see
see
a
a
command
command
here
here
that
that
you
you
can
can
run
run
with
with
npx
npx
to
to
create
create
a
a
new
new
Svelte
svelte
project.
project
Go
go
ahead
ahead
and
and
run
run
these
these
commands
commands
from
from
the
the
terminal,
terminal
then
then
open
open
up
up
your
your
project
project
in
in
Versus
versus
Code,
code
and
and
we're
we're
ready
ready
to
to
go.
go
In
in
the
the
source
source
directory,
directory
you'll
you'll
see
see
a
a
file
file
called
called
app
app
dot
dot
svelte.
svelte
This
this
is
is
where
where
we'll
we'll
be
be
writing
writing
all
all
of
of
our
our
code.
code
For
for
now,
now
you
you
can
can
treat
treat
this
this
file
file
like
like
a
a
regular
regular
HTML
html
file.
file
We'll
we'll
set
set
up
up
a
a
script
script
tag.
tag
This
this
is
is
where
where
our
our
JavaScript
javascript
will
will
go.
go
Then
then
a
a
style
style
tag
tag
is
is
where
where
our
our
CSS
css
will
will
go.
go
Everything
everything
outside
outside
of
of
these
these
tags
tags
will
will
be
be
our
our
main
main
HTML
html
markup.
markup
Towards
towards
the
the
end
end
of
of
the
the
video,
video
you'll
you'll
learn
learn
how
how
Svelte
svelte
can
can
magically
magically
connect
connect
your
your
JavaScript
javascript
to
to
your
your
HTML.
html
Now
now
one
one
side
side
note
note
here
here
is
is
that
that
if
if
you
you
go
go
into
into
the
the
public
public
folder,
folder
you'll
you'll
also
also
see
see
a
a
global
global
dot
dot
CSS
css
file.
file
In
in
my
my
demo,
demo
I
i
modified
modified
the
the
body
body
styles
styles
to
to
have
have
a
a
black
black
background
background
with
with
white
white
text.
text
Now
now
back
back
in
in
our
our
main
main
app
app
component,
component
we'll
we'll
start
start
by
by
setting
setting
up
up
the
the
markup
markup
for
for
the
the
initial
initial
HTML
html
form.
form
We
we
have
have
a
a
main
main
element
element
with
with
a
a
form
form
element
element
nested
nested
inside,
inside
and
and
then
then
inside
inside
that,
that
we
we
have
have
a
a
div
div
with
with
a
a
class
class
of
of
field
field
that
that
is
is
basically
basically
a
a
container
container
for
for
the
the
input
input
and
and
label.
label
Inside
inside
of
of
this
this
div,
div
we'll
we'll
add
add
the
the
actual
actual
form
form
input,
input
and
and
we'll
we'll
make
make
sure
sure
to
to
give
give
it
it
a
a
type
type
of
of
email.
email
After
after
the
the
input,
input
we'll
we'll
add
add
the
the
label,
label
and
and
it's
it's
important
important
that
that
this
this
label
label
comes
comes
after
after
the
the
input.
input
And
and
I'll
i'll
tell
tell
you
you
why
why
that's
that's
important
important
when
when
we
we
get
get
to
to
the
the
relevant
relevant
CSS
css
code.
code
Then
then
we'll
we'll
do
do
the
the
same
same
exact
exact
thing
thing
for
for
our
our
password
password
field,
field
but
but
give
give
it
it
a
a
type
type
of
of
password.
password
If
if
you
you
open
open
up
up
the
the
app
app
on
on
local
local
host
host
5000,
5000
you
you
should
should
have
have
a
a
basic
basic
form
form
that
that
looks
looks
like
like
this.
this
Back
back
in
in
our
our
code,
code
we'll
we'll
start
start
by
by
targeting
targeting
the
the
form
form
element.
element
I'm
i'm
going
going
to
to
be
be
using
using
a
a
gray
gray
text
text
color
color
throughout
throughout
my
my
styles,
styles
so
so
I'm
i'm
going
going
to
to
set
set
that
that
up
up
as
as
a
a
CSS
css
variable
variable
here.
here
That'll
that'll
make
make
it
it
really
really
easy
easy
to
to
change
change
the
the
color
color
of
of
the
the
form
form
if
if
we
we
decide
decide
to
to
in
in
the
the
future.
future
And
and
then
then
we'll
we'll
set
set
the
the
max
max
width
width
of
of
the
the
form
form
to
to
500
500
pixels.
pixels
Then
then
we'll
we'll
define
define
our
our
field
field
style,
style
which
which
is
is
basically
basically
a
a
container
container
for
for
the
the
input
input
and
and
label.
label
We'll
we'll
give
give
it
it
a
a
width
width
of
of
100%,
100%
and
and
then
then
we'll
we'll
change
change
the
the
position
position
to
to
relative.
relative
By
by
default,
default
a
a
div
div
has
has
static
static
positioning.
positioning
The
the
difference
difference
here
here
is
is
very
very
subtle,
subtle
But
but
the
the
most
most
important
important
thing
thing
to
to
know
know
is
is
that
that
when
when
you
you
use
use
relative
relative
positioning,
positioning
it
it
means
means
you
you
can
can
use
use
properties
properties
like
like
top,
top
left,
left
bottom,
bottom
and
and
right
right
to
to
control
control
where
where
this
this
element
element
sits
sits
relative
relative
to
to
its
its
normal
normal
position.
position
From
from
there,
there
we'll
we'll
give
give
it
it
a
a
2
2
pixel
pixel
dash
dash
border
border
on
on
the
the
bottom
bottom
that
that
uses
uses
our
our
text
text
color
color
variable.
variable
Then
then
we'll
we'll
provide
provide
a
a
good
good
sized
sized
margin
margin
here
here
to
to
make
make
room
room
for
for
our
our
animations.
animations
Because
because
I'm
i'm
providing
providing
3
3
values
values
here,
here
the
the
margin
margin
will
will
work
work
like
like
this.
this
The
the
top
top
margin
margin
will
will
be
be
4
4
rem,
rem
the
the
left
left
and
and
right
right
margins
margins
will
will
be
be
auto,
auto
and
and
the
the
bottom
bottom
margin
margin
will
will
be
be
1
1
rem.
rem
One
one
rem
rem
is
is
equal
equal
to
to
the
the
root
root
font
font
size
size
of
of
the
the
HTML.
html
So
so
if
if
you
you
have
have
a
a
font
font
size
size
of
of
16
16
pixels,
pixels
1
1
rem
rem
is
is
16
16
pixels.
pixels
And
and
then
then
we'll
we'll
override
override
a
a
bunch
bunch
of
of
styles
styles
on
on
the
the
input,
input
like
like
the
the
outline,
outline
border,
border
overflow,
overflow
and
and
so
so
on.
on
The
the
input
input
will
will
basically
basically
just
just
sit
sit
inside
inside
the
the
container
container
while
while
its
its
parent
parent
field
field
class
class
will
will
handle
handle
all
all
of
of
the
the
fancy
fancy
animation
animation
stuff.
stuff
Now
now
because
because
our
our
input
input
has
has
a
a
type
type
of
of
email,
email
it
it
will
will
automatically
automatically
be
be
validated
validated
by
by
the
the
browser.
browser
We
we
can
can
actually
actually
target
target
the
the
pseudo
pseudo
selectors
selectors
of
of
valid
valid
and
and
invalid
invalid
to
to
give
give
the
the
input
input
text
text
a
a
different
different
color
color
based
based
on
on
whether
whether
or
or
not
not
it's
it's
a
a
valid
valid
email
email
address.
address
You
you
should
should
now
now
have
have
a
a
form
form
that
that
looks
looks
like
like
this.
this
And
and
as
as
you
you
can
can
see,
see
when
when
you
you
type
type
your
your
email
email
address
address
in,
in
it
it
goes
goes
from
from
red
red
to
to
green
green
when
when
it
it
becomes
becomes
a
a
valid
valid
email.
email
And
and
now
now
we're
we're
ready
ready
to
to
get
get
into
into
the
the
fun
fun
stuff.
stuff
Let's
let's
look
look
at
at
how
how
we
we
can
can
make
make
that
that
border
border
animation
animation
when
when
a
a
form
form
field
field
is
is
focused.
focused
We'll
we'll
do
do
that
that
by
by
targeting
targeting
the
the
after
after
pseudo
pseudo
element
element
on
on
the
the
field.
field
Many
many
HTML
html
elements
elements
like
like
a
a
div
div
have
have
pseudo
pseudo
elements
elements
that
that
you
you
can
can
target
target
and
and
style.
style
After
after
is
is
like
like
an
an
invisible
invisible
element
element
that
that
comes
comes
after
after
your
your
div.
div
It
it
never
never
appears
appears
in
in
your
your
HTML
html
markup,
markup
but
but
if
if
you
you
go
go
into
into
the
the
browser's
browser's
inspector,
inspector
you'll
you'll
see
see
it
it
listed
listed
there
there
when
when
you
you
have
have
a
a
style
style
targeting
targeting
it.
it
And
and
in
in
our
our
case,
case
we'll
we'll
use
use
it
it
to
to
display
display
a
a
border
border
underneath
underneath
the
the
field.
field
The
the
advantage
advantage
in
in
this
this
case
case
over
over
a
a
regular
regular
CSS
css
border
border
is
is
that
that
we
we
can
can
use
use
transforms
transforms
to
to
apply
apply
fancy
fancy
animations
animations
to
to
it.
it
We'll
we'll
give
give
it
it
a
a
position
position
of
of
relative
relative
And
and
then
then
a
a
height
height
of
of
4
4
pixels,
pixels
a
a
width
width
of
of
a
a
100%,
100%
and
and
a
a
purple
purple
background.
background
Now
now
by
by
default,
default
we
we
want
want
this
this
element
element
to
to
be
be
hidden.
hidden
We
we
can
can
hide
hide
it
it
with
with
a
a
transform
transform
by
by
setting
setting
the
the
scale
scale
along
along
the
the
x
x
axis
axis
to
to
0.
0
And
and
the
the
reason
reason
we
we
use
use
scale
scale
x
x
here
here
and
and
not
not
just
just
scale
scale
It's
it's
because
because
we
we
want
want
to
to
preserve
preserve
the
the
height
height
when
when
we
we
animate
animate
it
it
back
back
in.
in
Now
now
by
by
default,
default
the
the
transform
transform
will
will
happen
happen
right
right
in
in
the
the
middle
middle
of
of
its
its
position.
position
However,
however
we
we
want
want
it
it
to
to
animate
animate
in
in
from
from
left
left
to
to
right,
right
So
so
we
we
set
set
the
the
transform
transform
origin
origin
to
to
0%.
0%
However,
however
if
if
you
you
wanted
wanted
to
to
go
go
from
from
right
right
to
to
left,
left
you
you
could
could
set
set
the
the
transform
transform
origin
origin
to
to
100%.
100%
Now
now
to
to
animate
animate
it,
it
we
we
simply
simply
set
set
up
up
a
a
transition
transition
that
that
targets
targets
the
the
transform
transform
property.
property
We'll
we'll
set
set
it
it
for
for
500
500
milliseconds
milliseconds
and
and
give
give
it
it
an
an
easing
easing
timing
timing
function.
function
And
and
then
then
because
because
it's
it's
relatively
relatively
positioned,
positioned
we'll
we'll
set
set
its
its
top
top
property
property
to
to
2
2
pixels.
pixels
That'll
that'll
just
just
move
move
it
it
down
down
slightly
slightly
to
to
cover
cover
the
the
existing
existing
border.
border
Now
now
in
in
order
order
to
to
have
have
an
an
animation,
animation
we
we
need
need
some
some
sort
sort
of
of
state
state
change.
change
We
we
want
want
that
that
state
state
change
change
to
to
happen
happen
when
when
the
the
input
input
is
is
focused.
focused
However,
however
the
the
actual
actual
styles
styles
we're
we're
changing
changing
are
are
on
on
the
the
field
field
div.
div
CSS
css
has
has
a
a
very
very
useful
useful
pseudo
pseudo
selector
selector
called
called
focus
focus
within.
within
When
when
the
the
inner
inner
input
input
is
is
focused,
focused
we
we
can
can
change
change
styles
styles
on
on
the
the
outer
outer
field
field
div.
div
We
we
can
can
set
set
the
the
border
border
color
color
to
to
transparent,
transparent
and
and
then
then
we'll
we'll
target
target
the
the
after
after
pseudo
pseudo
element,
element
and
and
we'll
we'll
set
set
its
its
transform
transform
to
to
scale
scale
x
x
1.
1
And
and
that'll
that'll
make
make
it
it
appear
appear
to
to
slide
slide
in
in
from
from
left
left
to
to
right.
right
At
at
this
this
point,
point
you
you
have
have
a
a
cool
cool
looking
looking
animated
animated
border,
border
but
but
the
the
label
label
isn't
isn't
positioned
positioned
right
right
at
at
all.
all
So
so
how
how
do
do
we
we
create
create
that
that
material
material
design
design
label
label
animation?
animation
In
in
the
the
label
label
class,
class
we'll
we'll
first
first
set
set
a
a
z
z
index
index
of
of
negative
negative
one.
one
Remember,
remember
in
in
the
the
HTML,
html
the
the
label
label
comes
comes
after
after
the
the
input,
input
So,
so
technically,
technically
it
it
sits
sits
on
on
top
top
of
of
it.
it
But
but
setting
setting
a
a
z
z
index
index
of
of
negative
negative
one
one
will
will
make
make
the
the
label
label
as
as
if
if
it
it
sits
sits
behind
behind
the
the
actual
actual
form
form
input.
input
We'll
we'll
make
make
its
its
position
position
absolute,
absolute
which
which
means
means
it's
it's
relative
relative
normally
normally
to
to
the
the
entire
entire
document
document
or
or
the
the
next
next
relatively
relatively
positioned
positioned
element
element
further
further
up
up
in
in
the
the
tree,
tree
which,
which
in
in
our
our
case,
case
happens
happens
to
to
be
be
the
the
field
field
div,
div
which
which
contains
contains
the
the
label.
label
Next,
next
we'll
we'll
use
use
a
a
transform
transform
to
to
move
move
along
along
the
the
y
y
axis
axis
and
and
with
with
a
a
negative
negative
value
value
that
that
will
will
move
move
it
it
up
up
higher
higher
along
along
the
the
y
y
axis.
axis
We'll
we'll
set
set
a
a
transform
transform
origin
origin
of
of
0%,
0%
and
and
then
then
also
also
set
set
up
up
a
a
transition
transition
here
here
to
to
animate
animate
it.
it
Now
now
just
just
like
like
our
our
animated
animated
border,
border
we
we
can
can
target
target
the
the
label
label
by
by
using
using
field
field
focus
focus
within.
within
When
when
it's
it's
focused,
focused
we'll
we'll
go
go
ahead
ahead
and
and
transform
transform
it
it
with
with
a
a
scale
scale
of
of
0.08,
0.08
making
making
it
it
slightly
slightly
smaller,
smaller
and
and
then
then
we'll
we'll
translate
translate
it
it
further
further
up
up
the
the
y
y
axis.
axis
At
at
this
this
point,
point
your
your
animation
animation
should
should
work,
work
but
but
you'll
you'll
notice
notice
when
when
we
we
type
type
into
into
the
the
form,
form
the
the
label
label
comes
comes
back
back
down
down
into
into
the
the
form
form
field
field
covering
covering
up
up
the
the
user's
user's
text,
text
and
and
that's
that's
not
not
going
going
to
to
work.
work
This
this
is
is
why
why
it's
it's
important
important
that
that
the
the
label
label
comes
comes
after
after
the
the
input
input
because
because
it
it
allows
allows
us
us
to
to
target
target
the
the
input
input
when
when
its
its
placeholder
placeholder
is
is
not
not
shown,
shown
Or
or
in
in
other
other
words,
words
when
when
the
the
user
user
has
has
typed
typed
something
something
into
into
the
the
form.
form
And
and
we
we
can
can
use
use
the
the
plus
plus
sign
sign
to
to
target
target
the
the
next
next
sibling
sibling
that
that
has
has
a
a
class
class
of
of
label.
label
So
so
this
this
means
means
the
the
label
label
will
will
be
be
positioned
positioned
in
in
the
the
right
right
spot
spot
if
if
the
the
field
field
either
either
has
has
focus
focus
or
or
if
if
it
it
has
has
text
text
inside
inside
the
the
input.
input
And
and
now
now
we're
we're
ready
ready
to
to
start
start
building
building
out
out
our
our
password
password
validation
validation
meter.
meter
We'll
we'll
go
go
back
back
into
into
our
our
HTML
html
markup
markup
and
and
add
add
a
a
div
div
with
with
a
a
class
class
of
of
strength.
strength
Then
then
inside
inside
that
that
div,
div
we'll
we'll
have
have
4
4
spans,
spans
each
each
with
with
a
a
class
class
of
of
bar
bar
and
and
each
each
with
with
a
a
unique
unique
class
class
for
for
bars
bars
1,
1
2,
2
3,
3
and
and
4.
4
Then
then
directly
directly
below
below
that,
that
we'll
we'll
add
add
an
an
unordered
unordered
list
list
with
with
a
a
few
few
validation
validation
error
error
messages.
messages
Now
now
up
up
in
in
our
our
CSS,
css
we'll
we'll
define
define
the
the
strength
strength
class
class
as
as
a
a
flexible
flexible
row
row
that
that
has
has
a
a
height
height
of
of
exactly
exactly
20
20
pixels
pixels
and
and
a
a
width
width
of
of
a
a
100%.
100%
Now
now
each
each
of
of
the
the
bars
bars
inside
inside
this
this
flexible
flexible
row
row
will
will
have
have
a
a
margin
margin
right
right
of
of
5
5
pixels,
pixels
a
a
height
height
of
of
100%,
100%
and
and
a
a
width
width
of
of
25%.
25%
So
so
each
each
individual
individual
bar
bar
in
in
the
the
password
password
meter
meter
will
will
take
take
up
up
exactly
exactly
25%
25%
of
of
the
the
parent's
parent's
width.
width
Now
now
each
each
individual
individual
bar
bar
can
can
be
be
animated
animated
in
in
or
or
out
out
with
with
a
a
little
little
shutter
shutter
effect
effect
using
using
a
a
box
box
shadow.
shadow
So
so
we'll
we'll
set
set
that
that
up
up
as
as
a
a
transition
transition
now,
now
and
and
then
then
our
our
box
box
shadow
shadow
will
will
be
be
inset
inset
with
with
an
an
offset
offset
on
on
the
the
x
x
axis
axis
of
of
0
0
pixels
pixels
and
and
an
an
offset
offset
of
of
20
20
pixels
pixels
on
on
the
the
y
y
axis.
axis
The
the
result
result
of
of
this
this
code
code
is
is
an
an
inner
inner
shadow
shadow
that
that
covers
covers
up
up
the
the
entire
entire
element,
element
because
because
remember,
remember
the
the
parent
parent
element's
element's
height
height
is
is
exactly
exactly
20
20
pixels,
pixels
And
and
the
the
offset
offset
y
y
here
here
is
is
exactly
exactly
20
20
pixels
pixels
as
as
well.
well
When
when
we
we
want
want
to
to
show
show
the
the
colors
colors
inside
inside
one
one
of
of
these
these
bars,
bars
we
we
can
can
simply
simply
set
set
the
the
box
box
shadow
shadow
to
to
none.
none
Now
now
each
each
individual
individual
bar
bar
has
has
its
its
own
own
color
color
gradient.
gradient
So
so
for
for
bar
bar
1,
1
we'll
we'll
set
set
a
a
background
background
that's
that's
equal
equal
to
to
a
a
linear
linear
gradient
gradient
that
that
moves
moves
from
from
left
left
to
to
right.
right
On
on
the
the
left
left
side,
side
we'll
we'll
have
have
red,
red
and
and
then
then
it
it
will
will
gradually
gradually
transition
transition
to
to
orange
orange
red
red
on
on
the
the
right
right
side.
side
Then
then
we'll
we'll
do
do
the
the
same
same
thing
thing
for
for
all
all
the
the
other
other
bars
bars
after
after
that,
that
where
where
the
the
color
color
on
on
the
the
left
left
side
side
is
is
the
the
color
color
that
that
ended
ended
on
on
the
the
right
right
side
side
from
from
the
the
previous
previous
bar.
bar
Your
your
demo
demo
at
at
this
this
point
point
should
should
have
have
4
4
gray
gray
bars.
bars
But
but
if
if
you
you
go
go
back
back
into
into
your
your
source
source
code
code
and
and
comment
comment
out
out
the
the
box
box
shadow,
shadow
then
then
you
you
should
should
see
see
your
your
color
color
gradient.
gradient
Okay.
okay
So
so
at
at
this
this
point,
point
everything
everything
we've
we've
done
done
has
has
been
been
just
just
plain
plain
HTML
html
CSS.
css
But
but
now,
now
we're
we're
going
going
to
to
make
make
this
this
app
app
reactive
reactive
and
and
interactive
interactive
with
with
Svelte.
svelte
The
the
first
first
thing
thing
we'll
we'll
do
do
is
is
go
go
up
up
into
into
our
our
script
script
and
and
add
add
a
a
variable
variable
for
for
strength
strength
as
as
a
a
number
number
that
that
starts
starts
at
at
0
0
and
and
a
a
second
second
variable
variable
validations,
validations
which
which
starts
starts
as
as
an
an
empty
empty
array.
array
And
and
the
the
beauty
beauty
of
of
Svelte
svelte
It's
it's
that
that
this
this
is
is
all
all
you
you
have
have
to
to
do
do
to
to
create
create
reactive
reactive
state
state
in
in
your
your
application.
application
Anytime
anytime
the
the
strength
strength
or
or
validation's
validation's
values
values
change,
change
the
the
component
component
will
will
rerender
rerender
to
to
display
display
the
the
latest
latest
values.
values
In
in
our
our
case,
case
we
we
want
want
the
the
state
state
to
to
change
change
every
every
time
time
the
the
user
user
types
types
into
into
the
the
password
password
form
form
field,
field
and
and
we'll
we'll
do
do
that
that
by
by
running
running
a
a
function
function
that
that
validates
validates
their
their
password
password
after
after
each
each
input.
input
This
this
function
function
will
will
take
take
the
the
event
event
as
as
an
an
argument,
argument
and
and
then
then
we
we
can
can
get
get
the
the
actual
actual
string
string
value
value
of
of
the
the
password
password
by
by
calling
calling
event
event
target
target
value.
value
Now
now
to
to
validate
validate
the
the
password,
password
we
we
have
have
4
4
different
different
rules
rules
that
that
we
we
want
want
to
to
apply.
apply
And
and
we
we
can
can
define
define
those
those
rules
rules
as
as
an
an
array
array
where
where
each
each
value
value
in
in
that
that
array
array
is
is
a
a
boolean
boolean
value
value
That's
that's
true
true
or
or
false
false
whether
whether
or
or
not
not
the
the
user
user
has
has
passed
passed
that
that
rule
rule
with
with
their
their
input.
input
So
so
if
if
the
the
password
password
length
length
is
is
greater
greater
than
than
5,
5
then
then
we
we
know
know
that
that
the
the
validation
validation
rule
rule
at
at
index
index
0
0
has
has
been
been
passed.
passed
The
the
next
next
rule
rule
at
at
index
index
1
1
in
in
the
the
array
array
performs
performs
a
a
reg
reg
x
x
search.
search
Regular
regular
expressions
expressions
are
are
pretty
pretty
weird,
weird
but
but
we
we
have
have
some
some
pretty
pretty
simple
simple
use
use
cases
cases
here.
here
This
this
first
first
rule
rule
will
will
search
search
the
the
string
string
for
for
any
any
capital
capital
letters
letters
ranging
ranging
from
from
a
a
to
to
z.
z
If
if
it
it
doesn't
doesn't
find
find
any,
any
it
it
returns
returns
negative
negative
one.
one
So
so
we
we
know
know
we
we
have
have
a
a
capital
capital
letter
letter
in
in
the
the
string
string
if
if
it's
it's
greater
greater
than
than
negative
negative
one.
one
Our
our
next
next
validation
validation
will
will
search
search
through
through
the
the
digits
digits
of
of
0
0
to
to
9
9
to
to
see
see
if
if
they
they
have
have
a
a
number
number
in
in
their
their
password.
password
And
and
the
the
4th
4th
and
and
final
final
validation
validation
will
will
look
look
for
for
a
a
series
series
of
of
special
special
characters.
characters
Now
now
at
at
this
this
point,
point
we
we
have
have
an
an
array
array
of
of
4
4
boolean
boolean
values
values
that
that
will
will
be
be
updated
updated
every
every
time
time
the
the
user
user
types
types
into
into
the
the
form.
form
In
in
JavaScript,
javascript
we
we
can
can
calculate
calculate
the
the
total
total
strength
strength
of
of
the
the
password
password
by
by
adding
adding
up
up
these
these
4
4
boolean
boolean
values,
values
assigning
assigning
the
the
number
number
1
1
to
to
each
each
true
true
value.
value
An
an
easy
easy
way
way
to
to
do
do
that
that
is
is
with
with
array
array
reduce
reduce
by
by
simply
simply
adding
adding
the
the
accumulated
accumulated
value
value
to
to
the
the
current
current
value,
value
giving
giving
us
us
the
the
sum
sum
of
of
all
all
the
the
values
values
in
in
the
the
array.
array
That's
that's
actually
actually
all
all
the
the
JavaScript
javascript
code
code
we
we
need
need
at
at
this
this
point.
point
Our
our
next
next
step
step
is
is
to
to
bind
bind
it
it
to
to
the
the
actual
actual
HTML.
html
To
to
use
use
our
our
validate
validate
password
password
function,
function
we
we
need
need
to
to
go
go
down
down
to
to
our
our
password
password
input
input
And
and
listen
listen
to
to
the
the
input
input
event,
event
which
which
we
we
do
do
with
with
on
on
and
and
Svelte.
svelte
Every
every
time
time
the
the
user
user
types
types
into
into
the
the
form,
form
the
the
input
input
event
event
is
is
fired
fired
and
and
then
then
runs
runs
our
our
validate
validate
password
password
event
event
handler.
handler
That'll
that'll
update
update
the
the
state
state
of
of
the
the
application.
application
Now
now
we
we
need
need
to
to
put
put
that
that
state
state
to
to
use
use
by
by
binding
binding
it
it
to
to
our
our
HTML.
html
In
in
Svelte,
svelte
we
we
can
can
bind
bind
a
a
class
class
using
using
this
this
class
class
directive.
directive
What
what
this
this
does
does
is
is
it
it
only
only
applies
applies
the
the
bar
bar
show
show
class,
class
which
which
will
will
remove
remove
that
that
box
box
shadow
shadow
when
when
the
the
right
right
side
side
evaluates
evaluates
to
to
true.
true
So
so
we'll
we'll
show
show
the
the
first
first
bar
bar
when
when
the
the
strength
strength
is
is
greater
greater
than
than
0,
0
then
then
we'll
we'll
show
show
the
the
second
second
bar
bar
when
when
it's
it's
greater
greater
than
than
1,
1
greater
greater
than
than
2,
2
3,
3
and
and
so
so
on.
on
Now
now
below
below
that,
that
we
we
either
either
want
want
to
to
show
show
a
a
green
green
check
check
mark
mark
or
or
a
a
red
red
x
x
depending
depending
on
on
whether
whether
or
or
not
not
that
that
validation
validation
has
has
been
been
passed.
passed
We
we
can
can
look
look
at
at
each
each
validation
validation
by
by
its
its
index
index
And
and
then
then
use
use
a
a
ternary
ternary
operator
operator
to
to
display
display
a
a
check
check
mark
mark
when
when
true
true
or
or
an
an
x
x
when
when
false.
false
And
and
then
then
we
we
can
can
follow
follow
the
the
same
same
pattern
pattern
for
for
each
each
validation
validation
message.
message
At
at
this
this
point,
point
if
if
you
you
open
open
up
up
your
your
demo,
demo
you
you
should
should
be
be
able
able
to
to
type
type
into
into
the
the
password
password
field
field
and
and
see
see
it
it
reactively
reactively
update
update
the
the
state
state
and
and
the
the
UI.
ui
And
and
each
each
time
time
the
the
password
password
goes
goes
stronger,
stronger
it
it
should
should
show
show
the
the
password
password
bar
bar
with
with
a
a
shutter
shutter
like
like
animation.
animation
Now
now
we've
we've
already
already
done
done
a
a
lot
lot
at
at
this
this
point,
point
but
but
there
there
is
is
one
one
more
more
thing
thing
I
i
wanna
wanna
show
show
you,
you
And
and
that's
that's
implementing
implementing
a
a
way
way
for
for
the
the
user
user
to
to
preview
preview
their
their
password
password
before
before
submitting
submitting
it.
it
We'll
we'll
go
go
up
up
into
into
our
our
JavaScript
javascript
and
and
first
first
add
add
a
a
new
new
property
property
called
called
show
show
password.
password
Then
then
in
in
our
our
CSS,
css
I'll
i'll
create
create
a
a
new
new
class
class
here
here
called
called
toggle
toggle
password,
password
which
which
just
just
absolutely
absolutely
positions
positions
a
a
button
button
so
so
it
it
is
is
displayed
displayed
in
in
the
the
right
right
side
side
of
of
the
the
actual
actual
form
form
input
input
itself.
itself
From
from
there,
there
we'll
we'll
go
go
into
into
our
our
HTML,
html
and
and
right
right
below
below
the
the
label
label
for
for
the
the
password,
password
we'll
we'll
add
add
a
a
span
span
that
that
has
has
the
the
class
class
of
of
toggle
toggle
password.
password
There
there
are
are
a
a
few
few
different
different
ways
ways
we
we
could
could
implement
implement
this,
this
but
but
I
i
think
think
a
a
kind
kind
of
of
unique
unique
way
way
to
to
do
do
this
this
is
is
to
to
have
have
the
the
user
user
preview
preview
their
their
password
password
by
by
hovering
hovering
over
over
the
the
actual
actual
button
button
itself
itself
as
as
opposed
opposed
to
to
clicking
clicking
on
on
it.
it
We
we
can
can
do
do
that
that
by
by
listening
listening
to
to
the
the
mouse
mouse
enter
enter
event,
event
and
and
then
then
we'll
we'll
pass
pass
an
an
anonymous
anonymous
function
function
here
here
that
that
simply
simply
toggles
toggles
the
the
show
show
password
password
property
property
to
to
true.
true
And
and
then
then
on
on
mouse
mouse
leave,
leave
we'll
we'll
toggle
toggle
the
the
show
show
password
password
value
value
back
back
to
to
false.
false
Then
then
inside
inside
the
the
actual
actual
button
button
content,
content
we'll
we'll
use
use
a
a
ternary
ternary
operator
operator
here
here
to
to
show
show
a
a
different
different
emoji
emoji
based
based
on
on
the
the
State
state
of
of
show
show
password.
password
Then
then
the
the
final
final
magic
magic
to
to
convert
convert
this
this
from
from
a
a
password
password
field
field
to
to
a
a
text
text
field
field
is
is
to
to
go
go
up
up
here
here
to
to
the
the
input
input
type.
type
And
and
where
where
we
we
have
have
a
a
static
static
string
string
value
value
for
for
password,
password
we'll
we'll
use
use
a
a
dynamic
dynamic
ternary
ternary
that
that
changes
changes
it
it
from
from
password
password
to
to
text
text
based
based
on
on
the
the
state
state
of
of
the
the
application.
application
And
and
now
now
at
at
this
this
point,
point
you
you
should
should
be
be
able
able
to
to
preview
preview
the
the
password
password
value
value
by
by
simply
simply
hovering
hovering
over
over
the
the
emoji.
emoji
Like,
like
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
you
you
wanna
wanna
see
see
more
more
Svelte
svelte
content
content
or
or
have
have
more
more
project
project
ideas,
ideas
make
make
sure
sure
to
to
let
let
me
me
know
know
in
in
the
the
comments.
comments
And
and
if
if
you
you
want
want
access
access
to
to
more
more
advanced
advanced
content,
content
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
IO.
io
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker explains how to create a login form and password field using Svelte, including a tutorial on JavaScript and application state management. They also provide step-by-step instructions on how to manage Svelte's JavaScript and CSS, including the Svelte Svelte style tag. The speaker then guides on how to create a YouTube video with a password validation meter and use Svelte to validate passwords and create a new message. They also explain how to use Svelte in their application to change the color of a password field and preview a password. Viewers are encouraged to subscribe to their channel and use a pro member at Fire Leone IO.
Animated CSS Login Form w/ Password Validation Meter
HTML forms are usually very boring, but there's no reason that they can't be one of the most creative aspects of your UI. And you don't even need a library like Material Design to make that happen. In today's video, we'll build an animated login form from scratch with HTML and CSS. Notice how it moves the label up when an input field is focused and also slides in a border underneath. But when it comes to the password, we'll throw in some JavaScript With Svelte, to take things to another level. We'll write a simple algorithm to analyze the password strength, then show the end user a strength meter along with validation errors based on the content of their password. In order to make all this happen from scratch, you'll learn about CSS transforms and transition animations, pseudo elements like After, box shadows and gradients, and even a little bit of regex. If you're new here, like and subscribe. And if you like the format of this video, make sure to let me know what you want to see next in the comments. Let's start by taking a closer look at what we're building today. What we have here is just a regular HTML form input along with a label. When the user focuses in on a form input, We translate the label up along the y axis and scale it down a little bit. This behavior was made famous by material design, but you can easily implement it on your own with just a few lines of CSS. When the input is focused, we also animate in a border from the left side, but it's not handled with a border. It actually uses a CSS pseudo element, which we'll talk about later. Now our password field is really over the top. When the user starts typing, it animates this password meter based on the strength of the password. I'll show you how to use a box shadow to create this shutter like effect for each bar in the meter. In addition, we'll also validate different patterns in the password string to show the user specific validation errors. And finally, we'll add a little button in the form input so the user can see their password text. This tutorial is designed for you to follow along step by step, And you can find the project source code on GitHub. We'll mostly be talking about HTML and CSS, but we'll use Svelte to manage our JavaScript and application state. And if you've never used Svelte before, don't worry. You're gonna love it. It's super intuitive and easy to learn. To get things started, we'll head over to svelte.dev. You'll see a command here that you can run with npx to create a new Svelte project. Go ahead and run these commands from the terminal, then open up your project in Versus Code, and we're ready to go. In the source directory, you'll see a file called app dot svelte. This is where we'll be writing all of our code. For now, you can treat this file like a regular HTML file. We'll set up a script tag. This is where our JavaScript will go. Then a style tag is where our CSS will go. Everything outside of these tags will be our main HTML markup. Towards the end of the video, you'll learn how Svelte can magically connect your JavaScript to your HTML. Now one side note here is that if you go into the public folder, you'll also see a global dot CSS file. In my demo, I modified the body styles to have a black background with white text. Now back in our main app component, we'll start by setting up the markup for the initial HTML form. We have a main element with a form element nested inside, and then inside that, we have a div with a class of field that is basically a container for the input and label. Inside of this div, we'll add the actual form input, and we'll make sure to give it a type of email. After the input, we'll add the label, and it's important that this label comes after the input. And I'll tell you why that's important when we get to the relevant CSS code. Then we'll do the same exact thing for our password field, but give it a type of password. If you open up the app on local host 5000, you should have a basic form that looks like this. Back in our code, we'll start by targeting the form element. I'm going to be using a gray text color throughout my styles, so I'm going to set that up as a CSS variable here. That'll make it really easy to change the color of the form if we decide to in the future. And then we'll set the max width of the form to 500 pixels. Then we'll define our field style, which is basically a container for the input and label. We'll give it a width of 100%, and then we'll change the position to relative. By default, a div has static positioning. The difference here is very subtle, But the most important thing to know is that when you use relative positioning, it means you can use properties like top, left, bottom, and right to control where this element sits relative to its normal position. From there, we'll give it a 2 pixel dash border on the bottom that uses our text color variable. Then we'll provide a good sized margin here to make room for our animations. Because I'm providing 3 values here, the margin will work like this. The top margin will be 4 rem, the left and right margins will be auto, and the bottom margin will be 1 rem. One rem is equal to the root font size of the HTML. So if you have a font size of 16 pixels, 1 rem is 16 pixels. And then we'll override a bunch of styles on the input, like the outline, border, overflow, and so on. The input will basically just sit inside the container while its parent field class will handle all of the fancy animation stuff. Now because our input has a type of email, it will automatically be validated by the browser. We can actually target the pseudo selectors of valid and invalid to give the input text a different color based on whether or not it's a valid email address. You should now have a form that looks like this. And as you can see, when you type your email address in, it goes from red to green when it becomes a valid email. And now we're ready to get into the fun stuff. Let's look at how we can make that border animation when a form field is focused. We'll do that by targeting the after pseudo element on the field. Many HTML elements like a div have pseudo elements that you can target and style. After is like an invisible element that comes after your div. It never appears in your HTML markup, but if you go into the browser's inspector, you'll see it listed there when you have a style targeting it. And in our case, we'll use it to display a border underneath the field. The advantage in this case over a regular CSS border is that we can use transforms to apply fancy animations to it. We'll give it a position of relative And then a height of 4 pixels, a width of a 100%, and a purple background. Now by default, we want this element to be hidden. We can hide it with a transform by setting the scale along the x axis to 0. And the reason we use scale x here and not just scale It's because we want to preserve the height when we animate it back in. Now by default, the transform will happen right in the middle of its position. However, we want it to animate in from left to right, So we set the transform origin to 0%. However, if you wanted to go from right to left, you could set the transform origin to 100%. Now to animate it, we simply set up a transition that targets the transform property. We'll set it for 500 milliseconds and give it an easing timing function. And then because it's relatively positioned, we'll set its top property to 2 pixels. That'll just move it down slightly to cover the existing border. Now in order to have an animation, we need some sort of state change. We want that state change to happen when the input is focused. However, the actual styles we're changing are on the field div. CSS has a very useful pseudo selector called focus within. When the inner input is focused, we can change styles on the outer field div. We can set the border color to transparent, and then we'll target the after pseudo element, and we'll set its transform to scale x 1. And that'll make it appear to slide in from left to right. At this point, you have a cool looking animated border, but the label isn't positioned right at all. So how do we create that material design label animation? In the label class, we'll first set a z index of negative one. Remember, in the HTML, the label comes after the input, So, technically, it sits on top of it. But setting a z index of negative one will make the label as if it sits behind the actual form input. We'll make its position absolute, which means it's relative normally to the entire document or the next relatively positioned element further up in the tree, which, in our case, happens to be the field div, which contains the label. Next, we'll use a transform to move along the y axis and with a negative value that will move it up higher along the y axis. We'll set a transform origin of 0%, and then also set up a transition here to animate it. Now just like our animated border, we can target the label by using field focus within. When it's focused, we'll go ahead and transform it with a scale of 0.08, making it slightly smaller, and then we'll translate it further up the y axis. At this point, your animation should work, but you'll notice when we type into the form, the label comes back down into the form field covering up the user's text, and that's not going to work. This is why it's important that the label comes after the input because it allows us to target the input when its placeholder is not shown, Or in other words, when the user has typed something into the form. And we can use the plus sign to target the next sibling that has a class of label. So this means the label will be positioned in the right spot if the field either has focus or if it has text inside the input. And now we're ready to start building out our password validation meter. We'll go back into our HTML markup and add a div with a class of strength. Then inside that div, we'll have 4 spans, each with a class of bar and each with a unique class for bars 1, 2, 3, and 4. Then directly below that, we'll add an unordered list with a few validation error messages. Now up in our CSS, we'll define the strength class as a flexible row that has a height of exactly 20 pixels and a width of a 100%. Now each of the bars inside this flexible row will have a margin right of 5 pixels, a height of 100%, and a width of 25%. So each individual bar in the password meter will take up exactly 25% of the parent's width. Now each individual bar can be animated in or out with a little shutter effect using a box shadow. So we'll set that up as a transition now, and then our box shadow will be inset with an offset on the x axis of 0 pixels and an offset of 20 pixels on the y axis. The result of this code is an inner shadow that covers up the entire element, because remember, the parent element's height is exactly 20 pixels, And the offset y here is exactly 20 pixels as well. When we want to show the colors inside one of these bars, we can simply set the box shadow to none. Now each individual bar has its own color gradient. So for bar 1, we'll set a background that's equal to a linear gradient that moves from left to right. On the left side, we'll have red, and then it will gradually transition to orange red on the right side. Then we'll do the same thing for all the other bars after that, where the color on the left side is the color that ended on the right side from the previous bar. Your demo at this point should have 4 gray bars. But if you go back into your source code and comment out the box shadow, then you should see your color gradient. Okay. So at this point, everything we've done has been just plain HTML CSS. But now, we're going to make this app reactive and interactive with Svelte. The first thing we'll do is go up into our script and add a variable for strength as a number that starts at 0 and a second variable validations, which starts as an empty array. And the beauty of Svelte It's that this is all you have to do to create reactive state in your application. Anytime the strength or validation's values change, the component will rerender to display the latest values. In our case, we want the state to change every time the user types into the password form field, and we'll do that by running a function that validates their password after each input. This function will take the event as an argument, and then we can get the actual string value of the password by calling event target value. Now to validate the password, we have 4 different rules that we want to apply. And we can define those rules as an array where each value in that array is a boolean value That's true or false whether or not the user has passed that rule with their input. So if the password length is greater than 5, then we know that the validation rule at index 0 has been passed. The next rule at index 1 in the array performs a reg x search. Regular expressions are pretty weird, but we have some pretty simple use cases here. This first rule will search the string for any capital letters ranging from a to z. If it doesn't find any, it returns negative one. So we know we have a capital letter in the string if it's greater than negative one. Our next validation will search through the digits of 0 to 9 to see if they have a number in their password. And the 4th and final validation will look for a series of special characters. Now at this point, we have an array of 4 boolean values that will be updated every time the user types into the form. In JavaScript, we can calculate the total strength of the password by adding up these 4 boolean values, assigning the number 1 to each true value. An easy way to do that is with array reduce by simply adding the accumulated value to the current value, giving us the sum of all the values in the array. That's actually all the JavaScript code we need at this point. Our next step is to bind it to the actual HTML. To use our validate password function, we need to go down to our password input And listen to the input event, which we do with on and Svelte. Every time the user types into the form, the input event is fired and then runs our validate password event handler. That'll update the state of the application. Now we need to put that state to use by binding it to our HTML. In Svelte, we can bind a class using this class directive. What this does is it only applies the bar show class, which will remove that box shadow when the right side evaluates to true. So we'll show the first bar when the strength is greater than 0, then we'll show the second bar when it's greater than 1, greater than 2, 3, and so on. Now below that, we either want to show a green check mark or a red x depending on whether or not that validation has been passed. We can look at each validation by its index And then use a ternary operator to display a check mark when true or an x when false. And then we can follow the same pattern for each validation message. At this point, if you open up your demo, you should be able to type into the password field and see it reactively update the state and the UI. And each time the password goes stronger, it should show the password bar with a shutter like animation. Now we've already done a lot at this point, but there is one more thing I wanna show you, And that's implementing a way for the user to preview their password before submitting it. We'll go up into our JavaScript and first add a new property called show password. Then in our CSS, I'll create a new class here called toggle password, which just absolutely positions a button so it is displayed in the right side of the actual form input itself. From there, we'll go into our HTML, and right below the label for the password, we'll add a span that has the class of toggle password. There are a few different ways we could implement this, but I think a kind of unique way to do this is to have the user preview their password by hovering over the actual button itself as opposed to clicking on it. We can do that by listening to the mouse enter event, and then we'll pass an anonymous function here that simply toggles the show password property to true. And then on mouse leave, we'll toggle the show password value back to false. Then inside the actual button content, we'll use a ternary operator here to show a different emoji based on the State of show password. Then the final magic to convert this from a password field to a text field is to go up here to the input type. And where we have a static string value for password, we'll use a dynamic ternary that changes it from password to text based on the state of the application. And now at this point, you should be able to preview the password value by simply hovering over the emoji. Like, I'm gonna go ahead and wrap things up there. If you wanna see more Svelte content or have more project ideas, make sure to let me know in the comments. And if you want access to more advanced content, consider becoming a pro member at FireShip IO. Thanks for watching, and I will see you in the next one.
The speaker explains how to create a login form and password field using Svelte, including a tutorial on JavaScript and application state management. They also provide step-by-step instructions on how to manage Svelte's JavaScript and CSS, including the Svelte Svelte style tag. The speaker then guides on how to create a YouTube video with a password validation meter and use Svelte to validate passwords and create a new message. They also explain how to use Svelte in their application to change the color of a password field and preview a password. Viewers are encouraged to subscribe to their channel and use a pro member at Fire Leone IO.