Vanilla JS Project: Multi Step form in HTML, CSS & OOP Javascript

good morning everyone how is it going today welcome to this episode well my in my channel Alejandro and where we talk about programming computer science and data science and today's episode we're going to be building this multi-step form as you can see it works and it has multiple Pages multiple steps and you can toggle um between them and it also has a progress bar okay for this project we will be working with vanilla JavaScript and we're going to be using the object oriented programming Paradigm um and we're also going to be working with vanilla JavaScript which means that we will not be working with any any Frameworks such as angular or react.js Etc right so we're not going to go very deep into the software design because we're basically just going to build one class for this one but hopefully it'll be very clear and it will show you how to use classes in JavaScript and how to organize your clothes your clothes your code a little bit more neatly all right um all right so we will be first we will be starting with the structure of the HTML Etc then we're going to actually style it so that it looks like this and then in the end we're going to get into the JavaScript okay so without further Ado let's get right into it [Music] thank you there we go so we're going to be working with Coach handbooks because it's very useful for front-end projects as you can see I'm going to be starting with a template that has SAS already configured which means that I'm going to be able to use SAS inside my styles.scss file right here this file as you can see is imported in my app.js and it is loaded inside my HTML right here right before the closing of the body tag there you go and we can start actually coding right here we can say for example we can start adding just an H1 and say hello world like that and if we say you can see that it is um shown right here we can also test that this part right here the the CSS is working so we can add a background color background color red just to test and it seems to be working correctly there you go I'm not going to be using this anyways um and yeah.js as well since it's imported I mean included in the end of the of my file it should work correctly if I console log something right here let's say hello world 2. all right and right here you can see that it does show Hello World okay so there you go that's how it works um that's how the template's organized so now we can actually get right into it okay so first of all as you can see it's already configured to have a very basic CSS um standardization but right here what we're gonna do is we're going to start with the structure okay since this is only going to be the the form we're not going to add anything more than a form wrapper inside the body and we're going to do it with a class and the class is going to be called form wrapper like that there you go and inside it we're going to add the actual div of the form which is going to V which is going to be multiced um we're going to add it an ID I mean if you don't know how I'm building this um um code with classes and I IDs just with this kind of code multi step form and then just add a DOT this is emit okay and this this pretty much is a faster way to building to creating to generate divs with classes and IDs Etc so the class for this one's going to be form and then there you have it all right so right here let's figure out the structure for this one um we're gonna start with a form header form header like this um and then underneath we're going to add a form body like that okay let's start with the header okay as you see right here we have our header with the title and we have a progress bar which we're going to build a little bit later in the tutorial but first of all let's just add a very quick H1 saying multi so step form there you go now for the body the body is going to be divided into several pages with which we're going to toggle an active class to show them or not to show them depending on its if it's the active class that we want to show or not so first of all inside the body I'm just going to create a form page okay so form page like that there you go and inside that form page what I'm going to do I am going to add just three three pretty basic input inputs okay so input it's going to be type text of course and I'm just going to add a very quick placeholder I'm going to call it name like that there you go and then I create three more of this there you go then for this one I'm going to add a last name last name placeholder and for this one I'm just going to add email like that there you go then underneath we're going to add our buttons and I'm going to add a div to wrap them all together I'm going to say form buttons like this up not like that buttons like this there you go and inside that one I'm just going to create first I'm going to create let's say a couple of buttons I mean I know this is the first page but I'm just going to show you how it would look with two buttons okay so I'm gonna add one button right here I'm just gonna add a class of vtn form as you can see we're not actually dealing with um uh pre-made CSS Frameworks we're going to be just styling it ourselves which I mean hopefully it will be educational um we're gonna call this button button form and button previous we're going to say previous for previous page and then we're going to do the same but this one previous this one's going to be next and this one's going to read next right there so we have our we have the basic structure for our form as we can see um I mean later in the tutorial we're going to add more form pages so like for example this one right here we will have another one right here there's going to be another form page and they're going to have some data attributes to actually um be able to tell between them and to show the active one but we're going to deal with that in a moment okay so for the moment this is looking correctly now we're gonna go to styles.ca Dot dot SAS and first of all let's just style a little bit the background because we want it to be something Bluey um so let's do that first um body of everything um we're the same which font family are we using we're gonna we're gonna leave that one family that looks pretty good and we're gonna say that the the height of the body is going to be a hundred pH which means the entire screen we're going to say we're going to say that the background color the background color is going to be a color that I have right here there you go this color I like it is kind of pretty pretty nice blue um what else we're gonna we're gonna Center everything so it's gonna say display Flex justify content Center and the lying item Center as well there you go so everything is centered and we also want everything to be white I mean the color right the color of the text there you go so that's body um now we're gonna have to actually start dealing with the form class right here with this element right here and what we're gonna do with that one let's say we're gonna say that it's going to be at least 300 pixels wide okay so let's say the minimum width will be 300 pixels like this um we're gonna give it we don't want to get to give it an actual border because that would I mean we want it to be a little bit more stylish so instead of a border we're going to give it a box Shadow how about that box Shadow and this box Shadow is going to be in the center it's going to have 10 pixels here and 0 pixels there and it's going to be white like that one there you go um let's add some padding to it let's say two Rems there you go it's starting to look a little bit better and now how about we add some rays on board the radius to it so border radius there you go and we say to REM as well and that's starting to look a little bit better there you go all right now inside the form well maybe let's try to style a little bit the header all right so we're gonna say since we're in SAS we can say Ampersand would be which basically takes anything that's up here so this form underscore underscore header basically basically means the same thing as this right here okay so header like this and then right here we say that we want to add some margin between these two so let's say margin bottom and we're going to add a margin of 2 Rems like this there you go and then for the actual text of it not that way for the actual text of it we're going to say that the font size up not like that the font size is going to be 1.3 REM and we're going to center it okay so text the line Center like that there you go starting to look pretty good so that's the header for now now after the header um let's try and edit a little bit of the body okay remember the Ampersand means takes the value of the previous class so this right here will be form underscore underscore and here we're going to Target the body like this and then Ampersand again on the score form or page is it um what is it we have the f um we have the form right here and we have the form body yeah I was doing the I was doing yeah form body and inside the body we have form page okay so we're going to add instead of form right here we're going to add page like that there you go now we have the page um let's say that we want to add some some [Music] um all right let's add some Flex Direction Flex Direction let's say it's going to be column like this the problem is that I don't think it's display Flex yet so let's just add display Flex like this there you go now it's starting to look a little bit better there you go um all right so right now we already have sort of one of uh sort of our our page right here um but let's how about we continue styling the input elements right um for the input elements what we're going to do is for the input like this input not like that like this for the input we're going to do margin bottom and we're going to say it's going to be 0.5 IMS like that looks pretty Spacey and it looks a lot it looks too too close to the text so I'm going to give it a padding okay it's usually a good idea to give it I mean when you're dealing with buttons or input elements to use instead of REM as units to use EMS because Em's uses the actual size of the element not of the root of your HTML so here I'm going to say 0.5 em and 1 em for for the sides okay so this one's uh of course this one is vertical and this one is horizontal and just to make it clear EMS means that this size is relative to the root to the value of of the element and since I mean the padding is to make the contents look good it makes sense to use CMS but in general you should use Rems in most in most cases so that's for the padding let's just have some radius as well order radius we're going to say um 0.5 EMS like that there you go and now let's get rid of that border let's say border none like that and just as with the just as with this border right here instead of adding a border we're just going to add a box Shadow so box not sizing but Shadow like that and the book Shadow is going to be 0 0 again 10 pixels zero and let's see how it looks it with white you know let's use a little bit darker one yeah there you go um so that's starting to look pretty good um I suggest we start with the buttons right now hmm the buttons are also inside the page so I'm going to add it um not here but here if I'm mistaken like this buttons like this is this how I named it buttons let's say form buttons and it's inside page um but we wanted to take form from form okay so yeah I'm gonna put it here so this way the Ampersand means form okay so there you have it so the buttons are going to have display Flex display Flex like this we're just going to add some justify content instead of Center we're going to say stretch up stretch like that and so that they take the entire space and we're going to set a gap for 0.5 REM all right this doesn't work yet because we haven't actually styled the buttons to take the entire space so we're going to do that right now okay the button.btn dot form like this which is the class that we gave it right here BTN Dash form like that we're going to style it like this we're going to say it's going to have a display block there you go the padding is going to be 0.5 just as with the input we're going to be using EMS and like this there you go starting to look a little bit more Spacey the border of course we want no border at all the color we want the color of the text to be white like this um The Border radius we also want it to be a little bit um around it as we had before let's set it to 0.5 VMS as well remember dealing with buttons so we use EMS for the background color I'm going to use a darker shade of blue so let's say background color like this and you know what I'm going to add them up here as variables like holders okay so this one's going to be my primary color where I'm gonna be in this right here is SAS variables I know JavaScript has a JavaScript I mean CSS has native variables but I'm just going to be using this um just to be consistent with SAS but yeah usually it's I mean if you the closer you are to to CSS the better and I'm going to add the darker color right here so my Docker color is going to be right here this one's going to be secondary color like that there you go and now this one right here is primary color and this one right here is going to be the secondary color like that let's see how that looks looking pretty good all right so let's continue with the button right now we we already have the buttons but for some reason they're not taking the entire space so what I'm going to do I'm going to add a width of not like that a width of 100 and there you go now they're actually taking the entire available space and since they're inside a flexbox and the justify content is set to stretch they just take all the space available in that line and they defy and they have a zero five REM gap between them if I remove this the Gap is removed okay so there you have it um let's just add a little bit of space over here between these two so let's say uh margin top it's going to be 0.5 Rems like that and then and then let's I mean the cursor is not changing either so let's add a cursor pointer two okay cursor cursor uh pointer like this there you go so now we have a pointer but when I click on it it doesn't do anything yet so we have to deal with that right now um the ampersand's also useful for this one because I mean as I told you before this in SAS this one takes the value for all of the parent element so this right here is going to be a hover for the button form class and the full in Hover what we're going to do is we're just going to add an opacity of 0.8 so right now when I hover over it you can see that it changes a little bit in color still when I click it nothing happens I do want to add some some sort of effect when I click on it so I'm going to say active right here active like this and I'm going to add some filter to it instead of adding a third color which is going to be another shade of blue I'm just going to add some contrast to it that way I keep my color palette to the minimum and I'm just add some contrast of 150 150 percent oops like this um found that mistaken this should work and now if I click on it it also has a third shade of blue which is pretty consistent with our palette with our color palette and it's looking pretty good already okay so there you go um what else can we do right now um let's add some of the other pages right here so just to be sure I'm doing things correctly let me check out this pay in this side um all right I forgot one thing in here and it's the the fact that actually our form page is going to be inside a form element like this okay um like that so form action we're not going to add an action because we're going to be using JavaScript with it but let's just add a form to it okay and the form is going to have the value of um you know what it's not actually a new formula right here it's just this one right here that's not supposed to be a diff this one right here is supposed to be a form like this there you go so now it's all inside a form and now if I click a button of course it reloads because buttons inside forms when you click them automatically submit um so yeah let's just we will get rid of that in a moment when we add some JavaScript to it okay but for the moment what I want to do is to add more form pages to it okay so let's do that now here right here you can see that we have one form page right here I'm just going to copy it and we're gonna copy it three times like this there you go now we have three pages all right and what we want to do with these three pages is actually make them a little bit different so the first one instead of having two buttons we're just going to have one which is going to be the next button the second page obviously makes sense that it has that it has the two buttons previous and next but the last one doesn't make sense to have a next button so it's going to have a submit button I'm going to remove the button next class because I'm going to be using that in JavaScript later to Target all the next buttons and right here I'm actually going to add a type of submit like this that way when I click on this one you will I mean it's you will know that when you click it you actually want to submit the form okay um so there you go um so we have next previous next previous science submit there you go um but so far all of the pages are showing at the same time and we probably don't want that right so what do we do what we're going to do is we're going to go back here to our Styles and we're going to go to our form page right here and as you see we had added a page display Flex right here but instead of this what we're going to do is we're going to add the display none so that by default no pages are shown okay and we're going to add an active class to the first page right here which is form page the first page right here is going to have an active class and also right here we're going to add we're going to say that whenever the page has an active class to it we're going to say that it's display is going to be Flex just as before and just to make it clear that the active is supposed to override everything else we're actually going to use the important attribute important um this is the actual right way to use important um not by just trying to correct what you miscoded before when you have one class that has one particular act one particular characteristic one particular attribute that you have to do that it has to do it's good to have the important tag over here okay so there you go now we have the first the first page that's showing because that's the only page that has the active class and everything seems to be working correctly right now so that looks pretty pretty good okay I guess we can now actually go into JavaScript oh oh no you know what I actually I'll almost forgot the progress bar that we had right here all right so let's do the progress bar um to do that we're going to add it to our header right here and underneath the title what we're gonna do is pretty much we're just going to add a new div that's going to have the class of progress bar okay so it's going to be like this progress bar like that and inside the progress bar we're going to add three diffs or spans or whatever you like we're going to be editing them in a moment anyways I'm just going to add divs and the divs are going to have the class of page step like that there you go and inside it and you're going to have the number of the page which is one for this one and then for this one's going to be two and then for this one's going to be three like that okay now let's just style them so that they look like this one's right here look okay and to do that we're going to go back to our Styles up here and we're going to go we're going to create an entire new and entire new element an entire new class right here I mean I really like using SAS because it allows you to actually create your elements that are self-contained right so right here you can see that all of the contents inside the form class right here they're targeting the class I mean it's just one single CSS component and then you have the buttons that work to get in that work independently as well and what we're going to do is we're going to add the progress bar right here as well okay so let's say progress bar like that and inside the progress bar we're gonna say that we're gonna have a display Flex first of all we're going to have a Justified content of space between space between like this let's see how that looks there you go so you can see that they're starting to be spaced um between of course and now let's just add let's say let's just style the actual steps okay um there you go let's let's add the actual steps so right here I'm just going to add page step like this and let's just say that they're going to have a display um block oops I mean divs already by default have a display block but in case you were working with I don't know spans or any other HTML element it's I mean I just putting in there so you know that it's important that this element has a display block we're going to say that the width it's going to have like this the width it's going to be two Rems and the height it's going to be two Rems as well there you go you know what we're going to name it EMS so that it's relative to the actual number that it's contained um and the Border radius border not top or the radius um it's going to be 50 because we want them to be circles okay then we have the margin top up Margin top to actually separate them from the title that is going to be 1.5 REM so let's just see how that looks there you have it we already have a little bit more space between the title and the actual elements and let's just start adding um I mean since we're not working with borders like because we we don't like them for this project we're working with box Shadows instead so let's add a box Shadow right here and a box Shadow for this one is going to be again zero zero it's going to be a small one five pixels and we're going to say that it's going to be white like that there you go now the problem is that the the actual contents of this div are not centered and we want to Center this in the middle of this part right here so we're pretty simply just going to say um display Flex oops display Flex display Flex well display Flex uh justify content Center and align item Center like that so now we have our number centered at the center and it's working pretty good looking all right all right um and just one more thing well remember that here right here the actual um Step that is being shown is colored in white what we're going to do right here is we're going to do that so if the class has another class of active like this we're going to say that the background color is going to be white like that okay I mean you can also add an important element right here just to be sure that it always overrides everything else and right here let's start with by default the page one being active Okay so let's say now this one's active and it already is illuminated in white the problem is that now we don't see the actual text so we're going to just going to change the color and we're going to use the variable that we have just created which is going to be primary color like that there you go so now it's working correctly um last but not least for this design what we're going to do is we're going to add the line that we have separating right here the two elements I mean between all of these elements and we're going to say that every one of these elements is going to have an after pseudoelement that's going to have a content of nothing just to be able to actually show it it's going to have a display block to actually be able to manipulate it its height and its width it's going to have a width of a hundred percent it's going to have a height of a hundred percent as well but the question right here is it's having it's going to have a hundred percent of what exactly okay so it's going to have a hundred percent of its relic of its container element and its container element is going to be um it's going to be the page step right here because we're actually going to be saying that it's going to have a position absolute like this absolute like that okay um and this one we're going to give it a position of relative so that it's absolute relative to this one okay oh so there you go so now we're actually we can actually start working with the background color um just to actually see it a little bit better where it is right now color now let's say it's going to be red so there is there you have it um I actually got it wrong it's not supposed to be red it's not supposed to be a hundred percent the height now let's say it's going to be one pixel because we want it to be one line like that okay and of course the background color we don't want it to be red we want it to be probably white like that let's see how that looks um all right so we have this line right here and we have this line right here and that's looking pretty pretty good so far um the problem right now is that we want it to not be over the actual um page step right here we want it to be shifted to the right so what we're going to do is we're going to translate and transform it and translate it on the x-axis 150 percent to the right like that so there you have it now we have it here and here now let's just touch some pretty quick opacity of 0.3 until then make it a little bit more slick there you go but we have this one right here that is hanging out and we don't really want an extra one we just we're just interested in having this two right here so how did we target these two without targeting the third one uh to do one is pretty easy actually we just add a notch right here and we're going to say that we want to take everything instead apart from I mean what that's what this knot does it takes everything except whatever you say inside the knot right here and we're going to say that we don't want the last child there you go so now you are targeting everything instead apart from the last child and you're adding a after pseudoelement to it and this is how you what you see right here so now it's looking it's working correctly we can save this and you can see that if we click it it reloads because we haven't added any JavaScript that is going to prevent the default behavior of this button okay so let's create the default behavior of this button right now um and to do that what I'm going to do is I'm just going to go to my JavaScript right here and I'm actually as I told you before I'm going to be working with classes object oriented programming in JavaScript and we will we're not going to be working with like very sophisticated um software design but the idea is that you kind of have to have a grasp of how object-oriented programming Works in JavaScript and how to organize this of course there are easier ways to organize I mean not to organize but to build a multi-step form which is a few lines of JavaScript but the idea is that you are going to learn how to use oop and also you're going to learn how to make this sustainable and maintainable in the long term because if you just add a few a few lines that just hide and hide and show the next the next page I mean it's probably going to be all right for just one single form but if later you want to add more steps to it or you want to actually add an entire user interface around some multi-step form simulator or something like that you're going to be much more comfortable working with them with a self-contained class that has everything in it and you can just add some functions to it okay so let's get right into the design the class is going to be we're just going to create a class called multi-step form like this and we're just going to call it right after like this new multi-step form like this okay there you go so you might remember if you have taken software design or um of oo object object oriented programming courses the idea behind this is that everything is I mean self-contained so we're going to or since we're I mean and it also has to have one single function okay um was yeah I want single objective so we're just going to be dealing with the front and the UI part if you actually wanted to add some other part you would be able to add you would have to add another class to it okay but so far this is all um so the idea right here is we're going to add a Constructor first of all Constructor like this and right here we're just going to activate I mean get all the elements and enable the pages there you go that's pretty much what the Constructor is going to do and also I mean the rest of the software design is going to be pretty simple the we're going to have some properties um some of the properties are going to be of course the form this form and we're going to I mean we're supposed to I mean it's going to have yeah the property of the actual form that it is it's going to have a property that contains the pages so here we have three pages that are two of them are hidden so they're going to be stored in this part in this property right here uh we're going to also have next buttons like this and we're going to have all the previous buttons like this okay so this is going to be an array or a node list and this one as well and this one's going to be an array or node list as well and this is going to be an HTML element okay and then in the end we're just going to call the method that enables the pagination there you go and we're going to be building several methods for this one to work um remember that when you use this it basically means that you're accessing a property or a method of your class okay so right here what we're going to do is we're going to create a new methods called initialize buttons that is going to be there's going to be the one that actually initializes the pagination okay um initialize we're just going to add some comments to it any Shelley's pagination like this we're also going to have a method that's called get current page like this there you go and this instance is going to return active page these are going to be the methods that we're going to be using inside this one right here okay now we're going to have another one that's called get Max page which is going to return the maximum return maximum number of pages in this multi-step form and last but not least we're going to add a method that's going to update the progress bar okay update progress bar like this progress bar like that and this method right here what it's going to do is basically going to um just going to check in which page we are currently and it's going to illuminate or just colorize the background of it okay so update progress bar like this and colorize um active step in progress bar there you go um I almost forgot we're going to be using a couple more helpers which are just going to be hide page which is going to it's pretty much just going to oh hide the page and I mean basically it's just going to remove the active class okay I'm just going to have show page which is going to show the active class nope like this show active class there you go so now that we have our architecture I mean very simple architecture we can actually start working with it for the Constructor we're actually going to be passing in um a on a parameter an argument which is going to be the form ID okay form ID so that it knows where to initialize the form and we're going to set this one equal to document dot get element by ID and right here we're just going to pass oops form ID okay like that and right here this one right here now takes one argument and we're going to pass the the ID of the form and the ID of the form is if I'm not mistaken I haven't actually created it have I um or have yeah here it is all right multi-step form there you go so this is the one that we're going to be using there you go multi-step form this is the ID get the element by ID and now our form property is defined and now from it we can actually start taking the pages in it okay so instead of calling this um get no query selector all from the document now I can actually take it from the form and it pretty much just kind of um con it serves as a container so that I don't accidentally Target any other element so this way I know that I'm only targeting the pages that are inside this form element that that I um created I mean that I targeted by its ID okay so right here I'm going to say that I want all of the pages that have a class of form page like this there you go so now I have my array or node list of pages and then we are going to have do the same thing about the next button and about the previous buttons okay so this form dot query selector all and the class for the buttons is actually but um oh no it's button wait what am I defining next buttons so it's bottom next like this there you go and it's actually supposed to be pretty much exactly the same thing but button previews for previous buttons button brief like that there you go now we have all of our properties defined already and last but not least we're supposed to initialize the buttons that we have right here okay so there you go uh initialize the buttons let's start with that one okay and this is basically the main element main part of our of our I mean this is where the actual pagination is what is happening so um yeah let's let's get to do that one and this one's going to take two arguments actually we're gonna take um the next buttons and we're going to take the previous buttons okay like that and right here we're going to have to pass them in because when here's where we're calling it and here's where we're defining it and to call it we're going to call we're going to call it from the next buttons right here and second argument is the previous buttons you know what I'm actually going to change the order for this one I'm going to pass the previous buttons first and that's next I'm going to pass the next buttons so first we pass the previous buttons like this and then we pass the next buttons like that there you go so right here what we're going to do is for each of the next buttons right here for each like that for each of the next buttons right here what we're going to do is we're going to add event listener that will go that will will basically just change the page to the next page okay to change to next page there you go and we're going to do pretty much the same thing with the previous buttons like this previous buttons like this and for each one of this we're going to add an event listener to change to previous page like that okay and basically pretty important as well we're going to have to remember that up till now if we click on the button it actually reloads the page because it's a button inside a form element and we don't want it to actually submit the the page the form what we wanted to do is to do what we want what we tell it to do in our JavaScript so first of all the first thing that you have to do if you're dealing with something like this is you're going to have to pass in [Music] um um we're going to have well first of all of course the event listeners the button dot add event listener if I'm not mistaken um button for each button that add event listener like this and the event listener it's going to we're going to listen to clicks and the event is going to take actually the event parameter and right here we're just going to first of all let's just test that it's working okay so we're going to do prevent um prevent default if I'm not mistaken prevent default so that it doesn't trigger the submit action and then let's just for testing we're going to console.log clicked on next there you go so let's see how that looks already so I'm going to open up my console I'm going to click on next and I say that it's actually not working so why is it not working um so we have a next buttons right here and um let's cancel log to see if my next buttons are actually being targeted console log this buttons let's see are they being targeted up like this are they being targeted um they're actually not being targeted for some reason so multi-step form multi-step form all right so this line is never running for some reason um cons oh because I named this wrong it's not supposed to be Constructor which is going to be Constructor like that so now if I reload this let's see how that works mm-hmm gonna go console and let's click on next and click the next so this right here is working my event listener for my next button is working and pretty much what we're going to be doing right now is we're going to get um I mean we're going to actually do all the the logic for when we click on it okay so we already prevented the default so as you can see when I click on it it doesn't reload so that's pretty convenient and right now I'm just going to write comment here the steps that I'm going to be doing for each of these buttons um so the first step is basically just one second so the first step is prevent defaults of course default and then when you click also you want to get the current page and then you want to go to pick to current Page Plus One of course and you pretty much want to do the same thing for the previous button right here so let's just add let's just add all the event listeners right here there you go so I'll just pretty much copied um what's up here so button activate listener click and it's going to listen to a click it's going to prevent the default for the next for the previous buttons too um and instead of going to current Page Plus one it's going to go to current page -1 like that there you go so let's now just add get um let's just get the current page so we can just come to add a new variable that's going to store that one current page will be equal to whatever is returned by our function get current page like that there you go so now what we have to do is we actually have to Define this function and let's see how we can get the current page all right so to get the current page let's see what we can do um get the current page right so um to get the current page we're actually going to be adding some extra elements to our to our HTML template okay so first of all for each page that we have right here let me see index.html there you go for each page that you have right here here you have the pages where the pages um each page there you have it you're going to have a data um now you know what it's going to be on the at the level of the multi-step form right here we're going to have a data attribute that's going to be current page like that and the default value is going to be one like this there you go so now this one is one and there you go so now we can actually pretty much just return that value there so get current page is going to be um first of all we're just going to get that value so const current page is going to be equal to this form because we're going to be targeting the form element that we just defined in the Constructor of course and that form element is as I showed you before the one with the ID multi-step form so we can just access this attribute right here so we want data current page so let's see how that looks this form dot data set to actually access the data attributes and we're going to say current page and this one as you can see it has been shifted to camel case even though it was written like this in HTML that's because JavaScript does not support um dashes in in the variable names okay so there you go now that we have created that one what we're going to do is basically we're just going to turn it into into an actual number because right so far it's actually a string so I mean let me just show you how that looks like so far current page like this sorry return the current page so we'll return this one right here so now this one right here should have the current page actually stored so let's console log that one current page let's see now I'm just going to erase this right here and I'm going to just add some more here the current page is like this and let's just click here the current page is one of course because the current page is one there you go so now we have that function working correctly but the problem is that this one as you can see it's a string okay so let me show you that and we're going to be doing some calculation with it we're going to be doing more than less than Etc to actually find the actual page that we want because we're I mean we're working with numbers so we want it to be a number and how we do that so let's see the current the type of the variable is so let's just take the check the type of this one right so let's say type of yeah I believe that's the command I'm not sure or is that python I don't remember all right let's see if I click next oh yeah it is actually type of and I can see that the type of current page is string and I don't want it to be a string I want it to be a number so how do I do that so instead of instead of actually returning the current page as assays like that we're going to convert this current page oops current page is going to be equal to current page of course but we're going to parse it in order for it to become an actual an actual number okay so we're going to parse uh sorry parse end like that pass end and now this one right here as you can see the type of far type of the current page this one right here is supposed to be a number now so if I click on next oops um oh yeah because I I said it as a constant so uh you know what I'm just going to return it here instead of actually trying to rename re-define a constant there you go so I'm going to return it as like that there you go um so let's see what happens now I'm going to explain what's happening with the yellow line over there in a moment so if I click here I can see that it's actually a number but the problem is that I mean as you can see I have a yellow line right here and that's an error and the error is basically telling me that power send what it's doing is it's converting a string into an integer but the problem is that I actually need to give it the base of that integer so I mean it can be a hexadecimal number or a binary number Etc so I mean I I have to kind of tell it that I'm going to be working with a base 10 um number so that it doesn't kind of get confused if my number starts with a zero it might interpret it as not in base 10 but it base 6 or something like that I'm not sure how it works but yeah I mean if you're parsing it into guys and you want them to be regular integers like base 10 from 1 to 10 and then 11 you're going to have to add a 10 right here so let's see how that looks now if I click um one moment I get number again but I don't have this error anymore so that's working correctly all right so now we have the current page which is down right there and now pretty much the next step right here is to now once that we have the current page what we want to do is we want to go to the next page so let's use this new um method that we're going to create that's going to be called pause I'm sorry it's going to be gold go to page and it's going to be the current Page Plus One basically there you go and I've already mentioned it or didn't time I actually didn't mention it did I um get my space yeah sorry I forgot that one so actually we needed a method that's going to be go to page like this I'm just going to take obviously the page that you want to go to there you go all right so what we want to do right now is pretty much enable this function go to page I'm going to change the name of this attribute right here I'm going to name it Target page like that so that we don't get [Music] um we don't get it wrong a little bit later uh when dealing with other pages okay so first of all we were gonna want to make sure that the page that we're asking for exists okay because since we're asking for go to page in this other method right here go to page what if for some reason we at some point would have one button that goes to page 10 but we only have three pages so we need to be able to filter that um I mean just some sort of error handling um so if oops so test that page exists there you go so if my all right first of all we have to actually set the maximum page so um constant maximum page will be equal to get Max page like this from this and the actual maximum page we're gonna have to actually Define it because in fact there we have it so we have to actually have this function working in order to use that one so basically all we're going to do right here is go const Max page will be equal oh this is not supposed to be uppercase there you is going to be equal to the form element and the data set from this one and it's going to be Max page like this because remember that we declared that one over here or didn't we now I actually think that we didn't um yeah I know I think that we didn't actually do that so we should do it now data we need to add a data attribute and we're going to name it Max page like this and since we're dealing with three pages we're gonna uh at here the number three um I mean if you were using some other language or some templating language I don't know maybe suppose you're using PHP for this one right you would probably pass in the the variable that you received from the server right here saying the total number of pages so that you will be able to actually enable your your form pagination so there you have it here you have your maximum page and then that's pretty much it I think and then you have to return it just gonna do the same thing as we did with return current page we're gonna return the max page like this and we're gonna turn it into an integer parsing parse into using parse end and using base 10. so there you go so now Max page is supposed to be working right here and we're going to that page so what we're going to want to do right now is let's handle if the page exists Okay so first of all um if my target page is let's say if it's bigger than this if it's bigger than Max page wait um did we actually set the max page all right we should probably set it up here so that way it's easier this Max page equal um this get Max page there you go so that way we don't have to actually bother doing this right here there you go so if this Max page is bigger than this Max page like this um or if my target page is less than one I mean if it goes to zero for some reason or something what we're going to want to do with that is we're going to console an error saying I'm sorry but the page was not found page not found I mean form page not found so that we don't confuse that I'm going to remove the brackets here just to make it a little bit more clean all right uh since I only have one line I can I can remove the brackets I will not be able to do that if I had more than one line because I mean you're supposed to be to do to be able to do this in one single line like this right so if I just put it in a second line it doesn't change anything there you go so now let's actually enable the go to the page go to page like this and to enable that one what we are going to do is we're going to actually first hide every single page and then we're just going to show the page that we actually need to show okay so let me just show it right here so we're going to have to Loop through all of our pages so this Pages which is our property that we defined in our Constructor and we're going to run a very quick 4-H method right here and we're going to say that for each of these Pages what we're going to want to do is first of all we're going to hide it oh sorry we're going to hide it hide page and then if the page is the target page what we're going to want to do is we're going to show the page all right and then what we're going to want to do also inside of this this part is we're going to have to update the data set all right uh update data set because remember that we're getting the I mean the data set Uh current page is pretty much acting as a as a state what what state would be in react for example okay so we will update the data set which would basically means that we're updating the the current page of of our form so that when we run again the get current page we're going to get the actual current page okay so let me show you how that works so first of all we're going to hide this page and this is going to be done pretty much just by using this um High page then we're gonna oops then we're going to say hide this page like that okay um actually you know what I'm going to do I'm going to replace this one right here just to make it clear that this one right here is actually a number okay so I'm going to say page number like that and because this one is an HTML element and this one is supposed to be a number of course this would be way easier if we were using typescript but since we're not using typescript for this tutorial I'm just going to be over explicit with my variable names so this is supposed to be a number remember that we're returning a percent and this one right here is actually a node list of elements that's because it comes from my disk pages right here that I've declared up here it's the list of all elements that have the form page class and so I can actually from this one I can hide it using this method right here and this method is very very simple what I'm going to do is just say this class list oh sorry this actually takes an attribute so it takes page and for this page we're gonna access its class list and let's say that if it contains if it contains the class active we are going to remove that class okay so page dot class list dot remove oops remove active like that there you go so let me just expand this a little bit so page class list contains active so everything that is before these two ampersands is going to be it's going to be the condition so if the cloud and the page contains the class active which means that if it's the page that's actually being shown we're going to remove that class so we're going to hide it and let's just once we're on it let's just code the method for show page as well um so it's going to be actually pretty much the same thing but it's going to be pretty much um the opposite so we're going to take this right here so this also takes a an attribute page um so we're going to access the classlet and here if it doesn't contain class active instead of removing it we're going to add it there you go so now we have the hide and show page and now we can actually use it inside our go to page method right here okay so now we're using it a height page for each page we're actually hiding the page and then if the page is the actual page number what we're going to do is we're going to say that we're going to show it so first let's get the page name the page number of the current page so let's say current constant current page number like that and we're basically just going to do the same thing as we did in get page but just for this particular page we're going to do pass integer and let's just get the date from the let's just get it from the data set of this page and let's parse it on a base of 10 okay now here's a particular problem that we're encountering I'm actually trying to access the data set um for the page element which is this element right here so every single one of this form page um I'm I'm trying to figure out which page they are okay but so far in my HTML um template I don't actually have a anything that tells me which page it is I could try to calculate it but I think it's just easier to just add the data set right here so I'm going to say data page and this one's going to be page number one okay I'm going to do pretty much the same thing for the second one and the same thing for the third one and this one's going to be page number two and this one's going to be page number three there you go so now every single page has a data set um attribute with the page attribute and then and the I mean the value of that page so let's get back here and we're going to say page data set page and that's pretty much just going to return the page um of that current page That We're looping through um so if that current page number is equal to the to the page number that we're targeting we're going to show it okay so let's say if the current page number equals the target page um sorry the page number like this um what we're going to do right here is just as before Ampersand Ampersand and that's this dot show page okay I mean as always remember that we're using this because show page is a method from our class that we're currently in so that's why we are able to use this to access this this uh this method right here so there you go so now that should show the page um let's see what that does so far okay so um so far we're dealing with go to page and where I have actually yeah all right so let's see what that does now if I click on next right here it doesn't do much oh yeah it does all right no it does actually good yeah actually it does but I don't see it because all of my pages look the same so I'm going to change this a little bit okay right here we have the first page that has name last mail and email let's have the second page have an address LSI address two let's just remove this third input and for the last one let's say password let's just say password and password two or whatever I don't remember what I named it here um address address complement and comments other info more info Etc yeah I mean the idea is just put whatever in here that other info there you go I mean this should do it so now if I click on next you should see that it's like it's actually changing the page but if I click again it's going to do it it's not going to do anything because remember that when I click what is actually happening is that I am when I click when it's actually happening is that I am preventing the default and I'm getting the current page and then I'm going to the current Page Plus one but the current page is always one because that has not been changed let me show you that so when I click on let me show you that right here um start working it doesn't seem to be working for some reason um yeah there you go um one second I don't know what's going on why is it not loading yeah all right whatever so if I inspect this element right here as you can see right here the current page is one right here which is the data set element that we've that we created that we defined um on this side right here there you go um you know what let me put that on the bottom like this [Music] um no this is not a react component um there you go so here you have it so we have the data current page data set that we have defined right here um that we have defined right here there you go and we actually want to update it every time we click because when we click right now what's going on here there you go because when we click right now it's actually changing the page but this right here is uh all right there's I don't know why it doesn't like being expected uh it doesn't change this okay so let's just change that I'm just going to take away the inspector because it's not helping at all um so there you go um what we're going to do is pretty much just update the update the current page data set every time we click on it and we're going to do that here in go to page so update data set uh pretty much all that we're going to do is go to this form um take our form then take the data set and then take the current page like this and let's just set it to the Target page sorry no the page number that we're running with right now all right so there you have it page number page number so now every time that we click on this one and the data set from here [Music] this data set right here right here it's going to be updated okay so let's see and that way it's going to be able to actually run through all the pages so if I click next then I click next again it's working um because we're going to the next page the previous button is not working yet because we haven't done anything with it as you can see right here so our go to page method is working so far so we can just reuse it up here in in the previous buttons so we're just going to do pretty much the same thing right here we're going to get the current page for the event listener when we click on the previous buttons and then we're going to go to that page -1 instead of plus one okay so there you go this Bud right here is supposed to be working correctly so far I think all the pagination is pretty much done if I'm not mistaken Let's test it um so I'm going to go click next next previous previous yeah it's working correctly I'm gonna do something pretty quick now I'm just going to show you something I'm gonna add some sort of Animation to when you show up and a page like right here remember in our in our demo this thing all right awesome uh all right my demo stopped working for some reason um all right but we will want to actually have an animation when we click on next right here so let's let's go with that right now um to do that what we're going to want to do is we're going to want to go to Styles right here and inside page right here let's just add an animation element right here and we're going to say that the animation is going to say it's going to be titled show up like that show up it's going to take um how long how long it's going to take 0.5 seconds and let's say it's going to be is is n like this hmm there we go so show up um now let's let's name it more appropriately let's say fade in like that and now we actually have to create our animation so it's pretty much we're pretty much what we're going to do is we're just going to add it on JavaScript on CSS we're going to add keyframes right here frames and the keyframes animation is going to be as we named it before fade in and we're going to say that the zero percent is going to be the opacity at zero and the hundred percent is going to be the opacity at one so that should do it and since it's 0.5 it should be working correctly so let's say next next previous previous it's working pretty good so far so there you go that's already a work in now while the submit button is still submitting but yeah I mean the idea is that you can do anything you want with the submit button um so there you go uh last but not least we need to do something with the progress bar because so far I mean the progress bar is there but it's doing it's not doing anything so let's just track out changes with the progress bar okay so just to just like to make sure everyone's on the same page we have created our initialize button function right here that pretty much what it does is it Loops through all of our next buttons and our previous buttons and it adds events listener to them event listeners to them that make them go to the page to the desired page and then pretty much we have some helpers that just get the current page uh get the maximum page of the of the of the form um go to this page and we have a high page Helper and a short page Helper and then pretty much right now we're just going to update the progress bar whenever we click on one of those so to do that what we're going to do the process is just get the progress bar steps first of all and then we're going to get the current page there you go and then for each one of those um sorry and then for each right here 4-H step what we're going to do is we're going to on color and color all of them and then sorry and then color until current step like that right so let's do that so let's get the progress bar steps first so const all steps we're going to name it in this this variable and it's going to take the form element like this form and let's just query select them all and if I'm not mistaken the class that I gave to every single of one of this page steps was page step like that um let me just check that that's true um page step yeah there you go all right so that seems to be all right and now for now we're supposed to find the current page as well get Uh current page there you go this get current page like that that's the idea of having this methods that you can reuse you can all just reuse them in other methods and it's pretty convenient now for each one of those what we're going to do is we are going to uncover them and we're going to color until the current step okay so let's get to do that so we're going to Loop through all steps let's call this one steps not all step all steps like that and let's say that for each one of this forage um Step let's call it step what we're going to do is pretty much we're going to say that the class list if it contains active it's going to remove active and vice versa if the step class list contains active like that what we're going to do there you go what we're going to do is pretty much just remove the active because remember that we want to uncolder all of them all of them like this and step that class list dot remove active like that there you go so now we haven't colored all of them and now what we're going to want to do is pretty much um color them all if they are um I mean if they're active Okay so right now we're supposed to get the the step page for that one um if I'm not mistaken um yeah I mean we're supposed to get the step for this one actually so we have the steps Let's see we have the steps right here and we actually suppose yeah we need to have some data set right here let's say data step um Step number let's say um let's just call it number number like that and this one's going to be equal to one hmm and we're going to do the same thing for the second one there you go like this oops nope like that this one's going to have a I'm just adding these data sets to be able to actually access it access this through JavaScript so that it's easier there you go so now this right here what we're going to do is we're going to get this the page the number of the current step okay so let's get that one step number like this and we're going to set it to um the current step we're going to access the data set and we're going to access the property that we have just created which is the number like this okay um there you go and we're going all since this returns a string what we're going to do is we're going to parse it again plus end again base of 10 like this there you go and now finally if the step page sorry the step number that we have just created is less or equal to current page to current page what we're going to do is we're going to colorize all of the oh I mean we're going to colorize all of the bubbles these bubbles right here if their step number is equal or or less than the current page okay so there you go um that way if we're in page two it's going to colorize number two and number one for example or if we're in page number three it's going to colorize all of them okay so let's do that right now so step dot class list remember that in order to colorize it we're just adding the active class and we're going to add active like this okay so there you go I mean this function is supposed to be working I mean whenever we call it it's supposed to verify which page we're in um and then on color all of the steps and then color all up until the page that we're in so what we're gonna have to do right now is pretty much just call it at the end of our go to page method so let's do that so after we go to a certain page we're going to update the progress bar to illustrate that page change so let's do that let's just hope update Pro Chris bar like this and right here we're going to say this um update we're going to just going to call this method that we created in a moment ago just save it and let's see if this is working hopefully it's going to work um let's say all right so let's click on next and all right there's a problem going on uh let's see what what the problem is um previous all right so yeah this thing is not not working correctly let's see what's going on um update progress bar update progress bar would have it here let me just check right here head um I'll step this form quiz electoral we're gonna page step like that constant current page you're supposed to get the current page there you go and then for all steps and each of this if it contains the class active there you go and we're going to remove the class active so that's okay and then the const um Step number right here let's just create the step number and we're just parsing the data set number which is if I'm not mistake in this one right here how we save this I think we have all right so this is one two three there you go um what else um if step number oh I I said plus all right yeah I meant less or equal to current page there you go so this is what was messing it all um there you go so if the step number is less or equal to the current page it's going to be illuminated um so let's just refresh hit next next previews previous so now it's working correctly all right so hmm all right that's how you that's how you would over design a form um I mean in case you actually think that this was over design I actually totally agree with you um the thing is that this is not supposed to be like a practical example of what you would do in every single case when you had to do a multi-step form okay this is supposed to be kind of an exercise to show how to work with classes and how to work with internal methods and how to work with with um properties of your class and how to organize your code in classes so that it's containerized but in any case in some cases actually this kind of this software design is actually very useful all right maybe not just for a very small form that you're just going to build once and then you're going to forget about it but if you're actually building something that's big for example let's say that you're doing a page that um has a multi-step formal form and what you want to do is you have to calculate I mean do some calculations depending on what the user step inputs on each of the form Pages let's say I don't know a tax um a tax calculator all right so if they if they use their inputs their their income in the first page and then they they I don't know just just to input their net worth in the second one Etc I don't I mean they're just input different things and then in the end you're going to calculate things I mean this kind of design is actually very useful because it if it's a more sophisticated kind of form you're just going to allow you to actually get it maintained in the long term and to actually be able to be um re-work done by other developers in the future so I hope you found this useful I hope you liked it and and yeah I mean I'll put up a link to this form and the description and if you like this please do drop a like And subscribe so I mean that's free for you and it helps a lot um so yeah hope you liked it and see you next time [Music] [Music]

Channel: Alejandro AO - Software & Ai

Views: 1,123

Keywords: multi step form, multi step form javascript, javascript, multi step form with progress bar, html css javascript, oop javascript, javascript classes for beginners, javascript classes, object oriented programming, object oriented design, multi step form with step progress bar in html css & javascript

Id: AA0Rd9MDEik

Length: 86min 41sec (5201 seconds)

Published: Mon Jan 23 2023