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

Pubblicato il: 22 giugno 2017
sul canale di: 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.

In questa pagina del sito puoi guardare il video online [Tutorial 3] Sign up Form with progress bar - CSS and JS Tutorial della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Ashish Mehra 22 giugno 2017, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 1,286 volte e gli è piaciuto 9 spettatori. Buona visione!

195