[Tutorial 3] Sign up Form with progress bar - CSS and JS Tutorial

Veröffentlicht am: 22 Juni 2017
auf dem Kanal: Ashish Mehra

1,286

[Tutorial 3] Sign up Form with progress bar - CSS and JS Tutorial

What we're going to create in this lecture of sign up form with progress bar ?

In this tutorial we're going to do these things : -

1. Set data attribute width for div with class item.This data-width attribute help us in setting a width of progress bar when the particular div having a class of active.

2. Open the script tags in the bottom of body element and will store all element including class progress which is our actual progress bar and actions button in a variable.

3. Than we will create a logic functions for our button which will perform a function to show and hide a button on certain condition.

4. In the end we will add event listener on our both button which will execute a function associate with it when user click on a particular button. And Inside of a function we will store next or previous element in a variable according to our button.After that we will remove the active class from current active div and we will set active div equal to our element which we store earlier inside of function by giving it class of active and than we will use attributes method to access the data-width attribute of current active div and set it equal to the width of progress bar and than progress bar will increase or decrease as per the actions define in event listener.

Auf dieser Seite können Sie das Online-Video [Tutorial 3] Sign up Form with progress bar - CSS and JS Tutorial mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Ashish Mehra 22 Juni 2017 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 1,286 Mal angesehen und es wurde von 9 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

195