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

Publicado em: 22 Junho 2017
no canal de: 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.

Nesta página do site você pode assistir ao vídeo on-line [Tutorial 3] Sign up Form with progress bar - CSS and JS Tutorial duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Ashish Mehra 22 Junho 2017, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 1,286 vezes e gostou 9 espectadores. Boa visualização!

195