by
Lessons:8Length:58 minutes
Credit js 3
  • Overview
  • Transcript

2.6 Final Touches

Everything’s working as it should, so let’s wrap things up by adding some final touches.

2.6 Final Touches

Hello. And welcome to the final lesson of this course. Now, let's wrap things up by adding a few final touches. And the first thing we'll do is add the ability to identify the credit card type. That's a nice feature to have right? So, the way we're gonna do that is by using regular expressions. And this works because each credit card has a certain number of digits and it has a certain structure. For example, if we take a look here, I can see that American Express starts with 34 and 37. It has 15 digits in total. A Master Card starts with 51, 52 all the way to 55. And can have between 16 and 19 digits. And Visa, starts with four and can have between 13 and 16 digits. So, we're gonna write a function that's gonna test the Credit Card number against some regular expressions. And it will return the Credit Card type. And that function looks like this it's called getCardType. It receives a ccNumber. And then we have the card patterns here and visa, mastercard, amex. You can find this more patterns if you wanna add more in some of the links that I I added in the lesson notes. But basically, we're creating an object here with the first value being visa or mastercard or amex and then followed by its regular expression. So what we're doing is we're parsing through these values and we're testing each card pattern against the ccNumber that we received here. If the ccNumber matches any of these, it will return that card pattern, otherwise, it will return false. So, how exactly can we use this? Well, first we're gonna use it in the finished typing function here because we're considering the number to be okay if it passes the valid credit card validation. But the number, also needs to pass our gift card type validation. So, we're gonna declare a new variable here called cardType and it's gonna be called to getCardType validationValue. And then, we're gonna add a new variable called cardClass. And the card class can be applied to the parent of the card input. And that can be cc generic if we don't have a specific credit card type. It can be cc Visa, cc Master Card or cc Emax for American Express. In here's how we're gonna do this. So, cardClass will be equal to if the card type is different and false then it means that the function has successfully identified the credit card type. Then we set the card class to cc- + cardType. So it's gonna be cc dash Amex, cc dash Visa and so on. Else, we're setting that function to cc generic. So, now, we go in here, and we're gonna say numberOK = valid_credit_card validationValue && getCardType validationValue. So this means numberOK will be true if this function returns true and if this function doesn't return false. So, after we're doing all this, we have to add that credit card class to the parent element. So, say number.parent.attr, class cardClass. So, let's test this out. Let's get a VISA card here. Let's inspect the element. Inspect this one here and we're looking at this field to cc number container, right? So if we add a Visa, or, was this a Visa? Yes it was, okay, so, cc-number-container doesn't receive the correct value. So let's see number.parent.attr class cardClass. Okay, so why isn't this working properly? Okay, let's do a refresh. Maybe I forgot to do a refresh. Yeah, here we go, so. It correctly got the cc visa. Now, if I remove some of these characters it switches back to a cc generic. Let's grab what a MasterCard let's grab this one place that in. So now it's cc master card. Now let's grab an AMEX or is it or is it American Express? There we go cc amex, so if there is an error of course, we have cc generic. Now, let's go ahead and add some styles for these. So we have cc generic, cc number, we're basically setting a background image. And we're using the images from the img folder. These are SVG's, currently. And then we have to go to our cc number here and we'll add a padding left of 3M to account for the icon. Background color to white. And the background position. So now, our card number field looks like this. Here it is, this is the generic icon but if we enter another value, it switches to that card. Now let's get one from VISA, it switches to VISA, and let's get one for MasterCard and it switches to MasterCard. And if we go back, it switches back to the generic credit card type icon. Now, let's move on and if you remember in the beginning I was saying that the way this works is that, once the card number is filled in and its valid, we move on to the next field. But let's add an interesting effect and let's hide the expiration date in CVV by default and it will show them as the form completion progresses. So, we'll go ahead and add this plain none to the containers for the expiration date in c v v. So, we start here and that in the JavaScript, instead of just focusing this, we'll do the following. We'll target the expiration date parent, we're gonna faded in fast, for example. And then once that's complete, we're gonna focus the field. Let's put it in a valid credit card number which I know was this one. See? So, it faded in and then the field got focused. And once we enter a valid date in there we should go to the next field. So here, we'll do something similar. Instead of focusing the cvv, we're gonna do cvv.parent fadeIn fast and we'll use the callback function here. And we're gonna focus it. Okay let's [SOUND] refresh. And there it is. And finally, just some tiny tiny details. Let's add a box shadow to the entire form container and some transitions for the different color shifts. So we'll start with the box shadow. Very simple here, 40 pixels blur and black 30% opacity. So it looks like this and then the transitions will be added to the h2 span here. Transition all .3 seconds ease in out. And we'll also add these to the cc input and the submit payment button. Let's have a look. Let's do a false credit card number. Okay, let's do a real one. Now, so see the not only the text is faded but also the background the image is faded which is very very nice. And submit. And that's it, basically, that is our finished credit card form that we have built with JavaScript. Thank you for watching so far. Please join me in the next lesson for the conclusion.

Back to the top