Coding Challenge #2 - Live Input Feedback

Key Takeaways

all right then gang so welcome to your next coding challenge this one is also going to be a ux focused one which needs a little bit of html css and javascript knowledge so again if you don't know much about any of those things maybe try watching my courses on all three of those topics first of all the links to those are going to be down below the video anyway the challenge this time around is to offer some live feedback to a user as they enter an email into this input so whenever we detect that the value of the input is a valid email address we animate the green tick and also color the input border green too then when the value becomes invalid again we animate out the green tick and the border goes gray again so in this challenge there's three key things that you really need to focus on the first one is being able to detect whether the value inside the import is a valid email address whenever a user presses a key inside it and for that you're going to need to use a regular expression now i'm going to leave a link to a tutorial on my youtube channel all about how to make a regular expression for an email address so feel free to reference that to help you out the second thing you need to figure out is how to color the border of the input field when we have a valid email then change it back to gray when it's not valid again and the third thing you need to solve is how to animate in this tick icon next to the import when we have a valid email address and then animate it back out when it's not valid anymore so i think this challenge is going to combine a few different problems that you have to think about which is nice and by the way i don't want you to rely on the standard browser form validation by using the email type input and the required attribute for this problem because i want you to be able to think about how to solve it using your own logic and then offer your own live feedback to the user like this green tick right here now i'm going to start you off with a starter project which looks something like this it's just a form field on the page with no extra validation or anything like that and when we enter an email address into this we don't get any kind of live feedback to say that it's valid so your job is to take it from this point to the final product which is this that i just showed you so the starter project is on this repo on github coding challenges again the link is going to be down below and in order to get it you need to select from the branch drop down challenge to start and then you can download this project by clicking on the code button and then downloading a zip folder so once you've downloaded that folder you want to extract all so we can access the project folder and that should just take a second and then this is the folder right here we want to open up inside vs code so let's do that as well and here we go this is the starter project so let me just quickly walk you through this it's dead simple so first of all we have an index.html file and inside there we have a head and we have a link to this thing right here which is a google fonts and it's for material icons now the reason we're loading that in is so that we can use material icons down here to get the tick icon so if we want to use one of these icons then all we have to do is give something a class of material icons like so and then whatever the icon name is each icon has its own class and you can look that up by just googling google material icons all right so we load that in first of all then we have our own style sheet which we'll take a look at in a second and then a title now down here in the body dead simple we just have a form then we have a div with a class of field for the form field the field has a label right here that says enter your email then the input is a type of text and then a name of email and an id of email so remember i said don't use type email for this challenge because that's going to enable some browser validation when you submit a form now what i want you to do is practice your live validation so as a user is typing into the input field then we can kind of validate the email now you can use email and do that if you want to as well i just wanted to kind of make it clear that all of this validation logic is going to be your own all right so then after that we have this tick icon right here as well and then at the bottom we have this script linking to index.js so this is where all of your logic is going to live now inside index.css we just have some base styles right here so the body we give a background of a very light gray text align center font size 1.4 amps just to make things a bit bigger and a font family of vadana then the form itself we give a background of white a margin of 200 pixels top and bottom also left and right and then a padding of 20 pixels all the way around border radius of 10 pixels just to soften up the form box display is inline block and then after that we say form and the field inside that so this div right here we say displays flex so that each of these things sits next to each other all right left to right and then align items center all right then so after that we have the form input and we give that a margin of zero top and bottom 16 pixels left and right and that's just going to spread it out from this on the left and this on the right and then the border is two pixels solid and a gray color border radius four pixels just to soften the corners and then a padding of four pixels so that's all the base styles your solution styles can go down here now what i'd like to do is preview this in a browser and remember to do this i'm using the package live server which you can search for up here by typing live server like so and it's going to hopefully show up it's this package you need to install when you do that you can right click over here and we can open this up in a live server it's going to open in the browser for you and this is the starter project right so as you can see there's no validation in place and we'll just type in any old email address we always get the tick it's not going green so i want you to get from this to the end point which i showed you before and remember that looks something like this so to begin with the tip doesn't show but as i start to type in an email mario net ninja dot dev when it becomes valid we get that tick animating in this goes green and then when i start to delete and it's no longer a valid email address the tick goes away and the border goes great again so this is your end goal right here this is what you're aiming for so give this a good go and i'm going to post my solution tomorrow