Try Title Field with airSlate SignNow

Try title field

[Music] if you don't want to worry about application tracking systems and ensure that you get an interview be sure to check out the paper moon link in the description and use the promo code stacker to get 20 off of their resume template kit welcome to another micro interactions video today we're going to build an input that has a character limit and will display the number of characters that are left now i got inspiration for this from the programming expert he has great stuff on instagram and youtube links are in the description now i am going to put my own spin on it and that's what you should always do when you find something that you want to build copy it and get an understanding of it but then change something make it your own put your own spin on it that's how you learn of course when you get inspiration from someone you should always give credit where do now if this video helps you out help me out by liking and subscribing let's get into it all right so i've got three files here in html css and javascript file and then i have this running on live server in my browser so let's start out with the html we'll just add a boilerplate here and we'll name this input character count limit all right and then in the body we're going to start out with a label and this will have a class of field and then we'll have an input with the class of field input and it's going to be a type of text and then let's add a placeholder the placeholder will be title and we'll also add a max length and we'll set that to 20. all right then after that within the label still we're going to have a span and that is going to be for our field counter there we go we'll also add our link to our style sheet so that is a link there we go and then just before the body let's add our javascript so that will be a script and we call that main.js okay so that should be all of the html okay so now we just have an unstyled input here so now let's work on the css first thing that i'm going to do here is just paste in some google fonts we're going to use open sans and then in the html and body we're going to add a height of 100 and then just in the body we're gonna set the margin to zero background is going to be almost black and then we're going to set it to display as flex we'll align the items to center and justify the content to center and that is just for demonstration purposes so that we can center everything within the web page then we'll set our font family to open sans with a fallback of sans serif all right and then after that let's style our field okay so then the field we're going to set the position on this to relative and that's so that we can absolutely position all the content within it then after that we'll look at the field counter we're going to position this absolute and then set the right to zero top to fifty percent and then transform translate y we're going to set that to negative 50 so that's going to horizontally position the counter all the way to the right and then vertically position it right in the middle and we'll see that once we finish our styles here so let's set a width we're going to set that to 1.6 rem and then a height of 1.6 rim and then we're going to display this as flex align items center and justify content center that's going to place the number that we're going to put into the counter in the center of that square so now let's set the font size we'll set that to 0.8 round slightly smaller than normal we're going to set a color on the font to an off-white and then we'll set the background to an rgba value with 0.2 opacity and then a border radius we'll set that to 0.2 rim give it a slight border let's move on to styling the field input so we'll say field input we're going to get rid of the default border and outline so we'll say border is going to be none and then outline is going to be none we're going to set the font family to inherit because by default inputs don't inherit their font family from the body we're going to set the font size to 1.4 round slightly larger than normal padding we're going to set to 0.8 rim on the top 2 ram on the right and that's going to give it some space for that counter and then 0.8 rim on the bottom and 0 on the left all right after the padding we're going to set a minimum width of 16 rim and this is just for demonstration purposes give it some size there and then background we're going to set to none get rid of the default background color is going to be the off-white that we used earlier and we're going to give it a border on the bottom now we initially at the top here we said border none now we're going to override that by adding a border just to the bottom so border bottom is going to be 0.15 rem solid and then an rgba value it's going to be the same value but we're going to change the opacity to 0.4 all right let's save that all right so now we can see basically what we have here so let's move on to our placeholder so the field input placeholder and we're just going to set the color on this to our rgba value of the 0.4 opacity and now let's put a little bit of animation into this so when i click on this i want the bottom border to change colors and animate in so what we're going to do is we're going to target the field and a pseudo element of after we'll have to set our content to blank we're going to position this absolute we're going to set it left at 0 right at 0. bottom at zero and we're going to set a height of 0.15 rim the same size as our border bottom we're going to give it a background of an orange color so let's save that so now we have this orange border on the bottom but i want this to animate in so initially we're going to set a transform translate x so this horizontally we're going to move it negative 100 percent now you can see that it's off of the page on the left over here we're also going to set a transition so that we have a smooth animation we're going to set the transition on the transform of 0.3 seconds and we're going to give it an ease out okay so now we want to make this transition happen so the way that we do that is here we're going to target our field and then on hover we're going to target the after pseudo element we also want field on focus the after pseudo element and one more our field focus within and then our after pseudo element so on three different things if we hover if we focus or if we have focus within which is the input that is within it then this animation is going to occur all right so the animation is very simple it's just going to be a transform and then translate x and set it back to zero where it should be all right let's save that so now as we hover we'll see that it comes in and if we focus it stays there and if we tab away we'll see that it goes back now of course we don't want this to be visible like it is right now so the way that we'll do that is we go up to our field and we're going to add an overflow hidden save that and now you can't see it once we hover or focus then it's there and when we click away it goes away all right so now let's work on the javascript that adds our numbers into our counter the first thing that we'll do is get our elements that we need so we need our input so that's going to equal document.queryselector and then we need to get our input and the field input and then the other thing that we need is our counter so that is going to equal document.queryselector and that is our span and our field counter okay so now we need to get the maximum length so if we go back to our html we set this maximum length to 20. we can get this property in javascript so that is on our input so we're going to say const max length is going to equal our input and then get attribute we're going to get the max length attribute then we're going to add that to our counter so we'll say counter dot inner text is going to equal max length let's save that and so now we have 20. so we're always going to start with the max length at 20. now once we start typing we want this to update so in order to do that we need to add an event listener so we'll say input dot add event listener and we need to listen for an input event so we'll get our event and then we'll have an arrow function so now we can do something with this so first we need to get our value link so that's going to equal our event dot target dot value dot length so as we type in here it's going to basically get our value what we've typed and it's going to count how many characters that's the dot length so now that we know how many characters we've typed we need to figure out how many characters are left so that is going to be we'll create a const of characters left length all right so that is going to equal our max length minus our value length so now we need to do a little bit of a test we need to make sure that we have an actual number here so we're going to say if characters left is less than 0 then just return so don't do anything and if that is not true then we're going to say counter dot inner text is going to equal the characters that are left so now if we start typing in here [Music] of course i need to spell things correctly length how about that let's save that and try this again now if we start typing there we go and so it's telling us how many characters are left so that's going to be it for this video if this video helped you out help me out by liking and subscribing for more videos like this [Music] you