Create Benefactor Credit Card with airSlate SignNow

Create benefactor credit card

if you're looking for a short yet relatively complex project for your portfolio this credit card input is the perfect project the CSS and JavaScript that goes into it is a lot more complex than it may look especially to get that four part input to work properly and in this video I'm going to show you exactly how to create this [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and today I'm going to show you how to build this credit card input that you saw at the beginning of this video now I do want to mention the way I got the inspiration for this video is actually from this code pen I'll link it in the description for you as well but as you can see they have these really cool credit card inputs and I wanted to try to create this myself without actually using their code so all the code in this video is my own but I use this as inspiration as you can see our input for our credit card looks very similar to their input on this red one down here now the actual way this input is going to work is a little bit more confusing than me think because of this four part input right here for example if I just remove some values from here and I start typing right here with a bunch of ones once I fill this up it should now push everything to the right as you see it is doing so making that type of implementation work same thing with like backspace it should move across the different rows all of that different interaction is fairly complex and it's going to be covered in the second half of this video and the first half of this video is all about the styling of this credit card to give it the look that we want so to get started with with that we first need to look at our HTML so let's come in here just get some boilerplate HTML using edit if you're unfamiliar with Emmett I'll link it in the cards and description for you so you can figure out how to use Emma it just makes coding a lot quicker and what we want to do inside of here is to create a form for our credit card input so we're going to create a form and we're going to give it the class of credit card and this form right here is essentially just going to be the entire credit card we're just using a form because we have inputs inside of here so it makes sense that it is a form now inside of our credit card we're going to have two different sections we have this front section which contains most of the information and then a...