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

Publié le: 22 juin 2017
sur la chaîne: 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.

Sur cette page du site, vous pouvez voir la vidéo en ligne [Tutorial 3] Sign up Form with progress bar - CSS and JS Tutorial durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Ashish Mehra 22 juin 2017, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 1,286 fois et il a aimé 9 téléspectateurs. Bon visionnage!

576