Coding Challenge SOLUTION #2 - Live Input Feedback

Key Takeaways

all right then gang so this is the solution to the previous challenge where we get some live feedback when we enter into an input so when the email becomes valid then we get a green tick and we get the green border but when it's not valid that styling goes away so this is kind of the end point and i gave you the start approach which was just something like this to begin with an import and the tick which is always there and black to begin with and when we type in an email address that is valid nothing changes so we don't get any of that live feedback so now i'm going to show you how i did it all right then so i've got open the starter project that i told you about in the last video where i set out this challenge and remember you can get that from the github repository the link to that is going to be down below and inside the index.html file we don't actually need to do anything everything that we need is already here so we have the form inside the body which has a div inside that the class of field for this form field and inside that we have a label which says enter your email then an input for that label of type text name email and id email that's what we're typing into and then down here we have a span for the tick and we're using material icons for that that's already loaded up up here and this is the name of the icon done and when material icon sees that kind of keyword that name it shows the tick svg icon instead so we have all we need here and by the way this has an id of email which we will be using probably later in the javascript we might not we'll see to get a handle on this input right here but the first thing i want to do is just style a couple of these things inside the css so let me open that up and scroll right down here so to begin with i want to style this little tick so it's green all right so let me first of all show you this it has a class of tick right here this span now this is nothing to do with material icons this class i just added this so we could grab a hold of it from the css and use it as a selector so let me see that dot tick and then inside here give this a color and i'm going to paste it in it's hash07cc81 and it's this green color all right so if we save it now looks a bit nicer all right so next up we want to style the border of this as well now later on we're only going to style the border of this green if the email inside it becomes valid so at this point right here it would become green but i want to style it green regardless of that validation first of all just to see how it looks so let me come down here and i'm going to say form input and i'm putting form in front of it to make it more specific because the default styles up here you can see we have form input as well so if i just use input right here then it's not going to override this border color so form inputs and the border hyphen color is going to be that same color that green so let me save that and we can see it's that green color now if i press into this notice the outline the black above it now that's going to be the case when we're typing in so we don't really see that green border underneath just a little bit around the edges so also as well as this we need to add on another property which is the outline color and that's the color of whatever the outline is right here when it's in focus when we put the curse into it so let me say outline color as well and we're going to give that the same green color so that now when we're focusing on this it's green now like i say this is only going to be the case later on for the tick and for the input when this value is a valid email right so what we're going to do is ultimately in the javascript apply a class of valid to maybe this right here so it can be styled differently or in fact we could probably apply a class of valid to this thing right here because then it could capture anything inside it so what i'm going to do is come over here and say okay well yeah we'll style the tick always this color right but to begin with we'll say the opacity is going to be zero all right so to begin with it won't show and then what i'm going to do is come down here and say okay well when we have a valid class above the tick so when this right here has a class of valid which we're going to apply later on with javascript when the email is valid then i want to show it again so in this case i could say the opacity is one again and it would show so to begin with it doesn't show but as soon as this has a class of valid like this then it does show right here okay so that's what i'm going to do for the tick first of all and then also if we come over here i only want to style this input these colors if we have that class of valid right here as well because otherwise i just want it to be gray or black so again what i'm going to do is put the valid class selector in front of this so now only when this has a class of valid will the input be styled green around the corners or around the edges okay so let me now come over here i think that's all we need to do for now to be honest now let's start work on the javascript so remember the job that we have to do in this file is to first of all detect when a user types into this and as they type each letter every time basically they press a key or we get a key up event after they press a key then we want to evaluate what's currently inside the input and we want to say look does the value currently inside that import match what an email should look like all right and to do that we're going to be using a regular expression so the first thing i want to do is get a handle on the input right here so that i can attach an event listener to it and that event is going to be a key up event so every time they press a key and the key comes back up then we can fire a function to kind of match what they type into the import the value of the import at that point to a regular expression for an email and if they match then we would maybe apply a class of valid to this field and then we get those extra styles right here okay so let's give this a whirl first of all i want to grab a handle on this input so at the top i'm going to say const email oops we need a space email import is equal to documents dot query selector like so and inside here we want to use the id email because that was the id we gave this so let's do that hash email all right so now we can attach an event listener to that so i can come down here and say email input which was the name of our constant and then we want to add an event listener like so and we want it to be a key up event and whenever that happens we fire a function whereby we also get the event object in case we need it so let's open this up and for now all i'm going to do is console log a message so we can test this so console.log e dot target so that's the target element which should be the input and we're going to output the current value so whatever the value is at that moment in time inside this input all right so let me save this and we'll try it out and by the way it's already hooked up down here so we don't need to do anything inside the html to hook this file up so let me open the dev tools and then the console and let's try typing in here so each time i type a letter notice we get the full value output right over here okay so it's all working so all we need to do now is to create a regular expression for an email address to match against whatever they type in here and if it matches then we'll apply a class of valid to that div in the html alright so let's try creating this regular expression so first of all let's give this a name this constant i'm going to call it email regex like so i'm going to set it equal to something and i'm just going to paste this in and then walk you through this regular expression now i don't want this to be a big lesson about regular expressions because that would take forever so if you want to learn about regex then i've got a whole tutorial series all about it and the link to that playlist is down below i'm also going to link to a specific video in that playlist which describes in much more detail how i constructed this regular expression for an email and this is kind of like a basic regular expression for an email right so first of all what would a typical email look like well the one we're doing looks something like this hello or doesn't matter what it is mario at net ninja dots well we could say code at uk or something like that so basically we have different parts of this email address that we need to kind of match against whatever the user types in here we have the first part which is their name i suppose then we have the ad symbol then we have whatever the domain is and then we have kind of this extension at the end which could be com.dev.cod.uk and there could be one dot in here or two dots as we have right now dot co dot uk so we need to match against each of these different parts all right and that's what we do up here so each of these parentheses is a different part in this email so as always we start with a forward slash end with a forward slash and to begin the regular expression to say it must be at the start we use a carrot this is radix basics and then this is the first part right here inside these parentheses so this name part and we say right here we could have a range of characters okay and it could be any uppercase that's what a to z means here and any lowercase right so that could be any uppercase or lowercase letter but also it could be any numbers and to say we want to match against the number we can do backslash d and that will match any number zero to nine but also we could have full stops or periods inside this first bit as well so it could be mario.luigi at netninja.com this would be a valid email address as well so we need to match against any possible dot as well and that is a backslash and then dot and also hyphens we could have hyphens inside that first part as well so we need to match against those and this plus at the end means this range of characters can be however long it needs to be so it doesn't matter if it's three characters it doesn't matter if it's like 50 characters it really doesn't matter okay so after that first part we have this at symbol so we're matching against that that needs to be there after that first part and then this part down here this domain bit is represented by this set of parentheses right here so again we have any uppercase or lowercase letter any digit not to nine oops and then finally we can have a hyphen as well so that can be in here as well and then after this bit right here we need a dot so we have to say backslash dot that's how we match against a dot in a regular expression so that must be there and then we have this part right here which could be co.com.dev and so that's this stuff right here and we say it could be any uppercase or lowercase letter between two and six characters long alright so it can be two characters long it could be six characters long okay or it could be anything in between so it would match dot dev for example all right then and then after that we have this last bit which is kind of optional now we make it optional because after this set of parentheses right here we add this question mark and this means make this last bit right here optional if we add a question mark after it and again this could be any uppercase or lowercase letter between two and six characters long all right so it would match this right here or something a little bit longer as well okay and then this just means match this at the end of the string so if there was more stuff at the end then it wouldn't match because this part right here is not at the end of the string it's kind of the opposite to the carrot right all right so this is to match basically a pretty basic email address it might not be a perfect match but for this tutorial it's good enough so we have the email regex now and now all we need to do inside this function down here is take this value that we have the current value inside the input and try and match it against this regular expression to see if it's a valid email address so the way we're going to do this is by doing an if check so we can say if and then we take our email regex right here this thing and then on that we can use a method called test and we can test a value against that regular expression so that value is going to be this thing right here the value currently inside the input so we can paste that inside here now that is going to return true this thing right here if there is a match so if we have a value inside the input which looks like a an email address and it matches this it passes this regular expression test then this will be true and if that's the case what we want to do is we want to take this parent div right here so the parent of the input and we want to apply a class of valid to that div so we can say email input which is the input field and then we want the parent element of that the div so we say parent elements right here and that gets us that parent element div and then to add a class we can say class list and then use a method called add and whatever class we want to add which is going to be valid so this gets us a list of all the classes currently on that dom element and then this method can be used on this property to add a new class which is going to be valid now then we need an else case right here because if we try to do this if we try to do this test and it fails then we want to remove the class now you might be thinking well why do we need to remove it because if we already have a class of valid it means it's valid why do we need to remove it well if i was to enter in an email so sean at netninja.dev for example now at this moment it would be valid and we'd have that class but if i start to delete again then i want to then remove that class okay and we're still firing this function every time we delete an item inside this input right here because that is still a key up event so we need to do this else clause right here to remove the element or rather to remove the class if this doesn't pass so i'm going to copy this and paste it down here and instead of add this time we just need the remove method and we remove the valid class all right so that's pretty much it for the javascript i think let me now go over here and let's start to type something in so mario at net ninja oops yep dot co dot uk and you can see we get this tick right here because we're showing that now because we have that valid class and if i go to elements over here and take a look at this we can see this valid class right here now now if i start to delete this then that valid class goes away and we no longer see the tick and remember that's because in the css we say that the original opacity of the tick is zero but when we have that valley class above it give it an opacity of one so it comes into the dom essentially well it doesn't come in it just kind of goes from being invisible to visible again all right so that's pretty good so let's add that in again net ninja.dev okay now at the minute this doesn't seem to be working we don't seem to get that input border color when we have that class of valid so let me just take a look at why that might be and it's actually because of the order of this selector right here because if we take a look at the html you can see that the form is this div's parents and what we're seeing is we want to look for something with a class of valid which is the parent of the form because it comes first over here so instead we need to say form dot valid input and that should work now so let's come back over here and we can see now we get that green outline awesome but if we take some of this away then it goes back to being gray again so this is working right we have all of this validation this live feedback working the only thing i want to do is instead of popping in this tick right here i want to animate it in so it's a little more subtle so to do that we can just add on a transition property to the tick so i could say transition and we want to target all properties and i'm going to say ease in and it's going to be 0.2 seconds and that means that whenever some kind of property changes on this tick like when we add this valid class to the parent element this opacity changes it means we don't just kind of go to that change straight away it doesn't flick like a light switch instead we kind of transition to it over 0.2 seconds and this is just an easing function to make it seem a little bit more natural so right here we could say opacity as well because that's all we're transitioning but all is going to target all properties if there were others changing as well so if we take a look at this over here now if i delete a few of these it's going to fade out a little bit you see that and then when i get the email correct it's going to fade in so it looks a little nice a little more subtle i also want to make it so that it animates or transitions up a little bit as well so what i could do is give it an initial position that was a little lower down so i could say transform to begin with and translate in the y direction which is up and down and i want it to go down by 20 pixels to begin with so that would be the initial position 20 pixels down here now obviously initially we can't see on the page because the opacity is zero but it's going to be in that original position down at the bottom now what i could do is also add this property down here and change that this time to be zero pixels and so now because we said all it's going to transition this property as well the transform so it's going to go from 20 pixels down to the original position again so let me now refresh and i'm going to say mario at net ninja dots and then watch this it will come up from the bottom see like that and that looks a little nicer awesome and that my friends is pretty much it so i really hope you enjoyed this challenge if you did please do not forget to share subscribe and like that really means a lot and i'm gonna see you in the very next one [Music] you