Password Strength Indicator using jQuery - GeeksforGeeks

02 Dec, 2021
With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a password strength indicator using jQuery and Bootstrap for register pages.
Functionality to implement:A progress bar to represent the strength of the password whenever users add the input to the password input form. The length of the progress bar represents the strength of the password. We are going to implement this on the front-end only.
A valid password has following criteria for evaluation: (to determine % of length contribution)
Atleast an uppercase letter (10%), lowercase letter (10%), number (10%), special symbol(10%)
The word length criteria:6 words : 20%8 words : 40%[10, infinity) words : 60%
6 words : 20%
8 words : 40%
[10, infinity) words : 60%
Prerequisites:Basic knowledge of HTML, CSS, JavaScript, jQuery, and Bootstrap. Also, the user should be aware of how the grid system in Bootstrap works.
Procedure:
Initialize the layout:First of all, let us initialize the layout of our register page using bootstrap. For the progress bar, we will use progress class for building progress bars from the bootstrap (irrespective of the variant/version of bootstrap used).<!-- Register page for password strength indicator --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </script></head><style>    .container-fluid {        background-color: #ffffff;        border-radius: 8px;        border: 1px solid lightgrey;        padding: 16px;        /* Box shadow for the register container */        -webkit-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        -moz-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);    }          .input-group {        width: 80%;        height: auto;        padding: 4px;    }          .progress {        height: 4px;    }          .progress-bar {        background-color: green;    }</style>  <body>    <br>    <br>    <div class="container">        <div class="row">            <div class="col-sm-3">   </div>            <div class="col-sm-6">                <div class="container-fluid">                    <center>                        <h2 class="text-success">                          Enter Password:                      </h2>                        <br>                        <br>                        <div class="form-group">                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-user">                                  </i>                              </span>                                <input id="email"                                        type="text"                                        class="form-control"                                       name="email"                                       placeholder="User-Email">                            </div>                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-lock">                                  </i>                              </span>                                <input id="password"                                        type="password"                                        class="form-control"                                        name="password"                                        placeholder="Enter Password">                            </div>                        </div>                        <div class="input-group">                            <div class="progress">                                <div class="progress-bar"                                      role="progressbar"                                      aria-valuenow="0"                                     aria-valuemin="0"                                      aria-valuemax="100"                                     style="width:0%">                                </div>                            </div>                        </div>                        <br>                        <br>                        <div class="input-group">                            <button class="btn btn-success btn-block">                              Register Now!                          </button>                        </div>                    </center>                    <br>                </div>            </div>            <div class="col-sm-3">   </div>        </div>    </div></body>  </html>Output:Updating progress bar:Now, we need to make sure that whenever the password input field is updated, the progress bar is updated according to the specified requirements mentioned above.Steps to be followed:In the password field, check whenever key is pressed using keyup() function.Extract the input added in the password field.Update percentage variable and progress-bar color as per the password length.Check for char-set constraints.Update the width of the progress-bar.Final Solution:<!-- Update progress-bar whenever input field is updated.--><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </script></head><style>    .container-fluid {        background-color: #ffffff;        border-radius: 8px;        border: 1px solid lightgrey;        padding: 16px;        -webkit-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        -moz-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);    }          .input-group {        width: 80%;        height: auto;        padding: 4px;    }          .progress {        height: 4px;    }          .progress-bar {        background-color: green;    }</style>  <body>    <br>    <br>    <div class="container">        <div class="row">            <div class="col-sm-3">   </div>            <div class="col-sm-6">                <div class="container-fluid">                    <center>                        <h2 class="text-success">                          Enter Password:                      </h2>                        <br>                        <br>                        <div class="form-group">                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-user">                                  </i>                              </span>                                <input id="email"                                        type="text"                                        class="form-control"                                        name="email"                                        placeholder="User-Email">                            </div>                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-lock">                                  </i>                              </span>                                <input id="password"                                        type="password"                                        class="form-control"                                        name="password"                                        placeholder="Enter Password">                            </div>                        </div>                        <div class="input-group">                            <div class="progress">                                <div class="progress-bar"                                      role="progressbar"                                      aria-valuenow="0"                                      aria-valuemin="0"                                      aria-valuemax="100"                                      style="width:0%">                                </div>                            </div>                        </div>                        <br>                        <br>                        <div class="input-group">                            <button class="btn btn-success btn-block">                              Register Now!                          </button>                        </div>                    </center>                    <br>                </div>            </div>            <div class="col-sm-3">   </div>        </div>    </div>    <script>        var percentage = 0;          function check(n, m) {            if (n < 6) {                percentage = 0;                $(".progress-bar").css("background", "#dd4b39");            } else if (n < 8) {                percentage = 20;                $(".progress-bar").css("background", "#9c27b0");            } else if (n < 10) {                percentage = 40;                $(".progress-bar").css("background", "#ff9800");            } else {                percentage = 60;                $(".progress-bar").css("background", "#4caf50");            }              // Check for the character-set constraints            // and update percentage variable as needed.                        //Lowercase Words only            if ((m.match(/[a-z]/) != null))             {                percentage += 10;            }                        //Uppercase Words only            if ((m.match(/[A-Z]/) != null))             {                percentage += 10;            }                        //Digits only            if ((m.match(/0|1|2|3|4|5|6|7|8|9/) != null))             {                percentage += 10;            }                        //Special characters            if ((m.match(/\W/) != null) && (m.match(/\D/) != null))            {                percentage += 10;            }              // Update the width of the progress bar            $(".progress-bar").css("width", percentage + "%");        }          // Update progress bar as per the input        $(document).ready(function() {            // Whenever the key is pressed, apply condition checks.             $("#password").keyup(function() {                var m = $(this).val();                var n = m.length;                  // Function for checking                check(n, m);            });        });    </script></body>  </html>Output:
Initialize the layout:First of all, let us initialize the layout of our register page using bootstrap. For the progress bar, we will use progress class for building progress bars from the bootstrap (irrespective of the variant/version of bootstrap used).<!-- Register page for password strength indicator --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </script></head><style>    .container-fluid {        background-color: #ffffff;        border-radius: 8px;        border: 1px solid lightgrey;        padding: 16px;        /* Box shadow for the register container */        -webkit-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        -moz-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);    }          .input-group {        width: 80%;        height: auto;        padding: 4px;    }          .progress {        height: 4px;    }          .progress-bar {        background-color: green;    }</style>  <body>    <br>    <br>    <div class="container">        <div class="row">            <div class="col-sm-3">   </div>            <div class="col-sm-6">                <div class="container-fluid">                    <center>                        <h2 class="text-success">                          Enter Password:                      </h2>                        <br>                        <br>                        <div class="form-group">                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-user">                                  </i>                              </span>                                <input id="email"                                        type="text"                                        class="form-control"                                       name="email"                                       placeholder="User-Email">                            </div>                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-lock">                                  </i>                              </span>                                <input id="password"                                        type="password"                                        class="form-control"                                        name="password"                                        placeholder="Enter Password">                            </div>                        </div>                        <div class="input-group">                            <div class="progress">                                <div class="progress-bar"                                      role="progressbar"                                      aria-valuenow="0"                                     aria-valuemin="0"                                      aria-valuemax="100"                                     style="width:0%">                                </div>                            </div>                        </div>                        <br>                        <br>                        <div class="input-group">                            <button class="btn btn-success btn-block">                              Register Now!                          </button>                        </div>                    </center>                    <br>                </div>            </div>            <div class="col-sm-3">   </div>        </div>    </div></body>  </html>Output:
<!-- Register page for password strength indicator --><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </script></head><style>    .container-fluid {        background-color: #ffffff;        border-radius: 8px;        border: 1px solid lightgrey;        padding: 16px;        /* Box shadow for the register container */        -webkit-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        -moz-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);    }          .input-group {        width: 80%;        height: auto;        padding: 4px;    }          .progress {        height: 4px;    }          .progress-bar {        background-color: green;    }</style>  <body>    <br>    <br>    <div class="container">        <div class="row">            <div class="col-sm-3">   </div>            <div class="col-sm-6">                <div class="container-fluid">                    <center>                        <h2 class="text-success">                          Enter Password:                      </h2>                        <br>                        <br>                        <div class="form-group">                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-user">                                  </i>                              </span>                                <input id="email"                                        type="text"                                        class="form-control"                                       name="email"                                       placeholder="User-Email">                            </div>                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-lock">                                  </i>                              </span>                                <input id="password"                                        type="password"                                        class="form-control"                                        name="password"                                        placeholder="Enter Password">                            </div>                        </div>                        <div class="input-group">                            <div class="progress">                                <div class="progress-bar"                                      role="progressbar"                                      aria-valuenow="0"                                     aria-valuemin="0"                                      aria-valuemax="100"                                     style="width:0%">                                </div>                            </div>                        </div>                        <br>                        <br>                        <div class="input-group">                            <button class="btn btn-success btn-block">                              Register Now!                          </button>                        </div>                    </center>                    <br>                </div>            </div>            <div class="col-sm-3">   </div>        </div>    </div></body>  </html>
Output:
Updating progress bar:Now, we need to make sure that whenever the password input field is updated, the progress bar is updated according to the specified requirements mentioned above.Steps to be followed:In the password field, check whenever key is pressed using keyup() function.Extract the input added in the password field.Update percentage variable and progress-bar color as per the password length.Check for char-set constraints.Update the width of the progress-bar.Final Solution:<!-- Update progress-bar whenever input field is updated.--><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </script></head><style>    .container-fluid {        background-color: #ffffff;        border-radius: 8px;        border: 1px solid lightgrey;        padding: 16px;        -webkit-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        -moz-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);    }          .input-group {        width: 80%;        height: auto;        padding: 4px;    }          .progress {        height: 4px;    }          .progress-bar {        background-color: green;    }</style>  <body>    <br>    <br>    <div class="container">        <div class="row">            <div class="col-sm-3">   </div>            <div class="col-sm-6">                <div class="container-fluid">                    <center>                        <h2 class="text-success">                          Enter Password:                      </h2>                        <br>                        <br>                        <div class="form-group">                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-user">                                  </i>                              </span>                                <input id="email"                                        type="text"                                        class="form-control"                                        name="email"                                        placeholder="User-Email">                            </div>                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-lock">                                  </i>                              </span>                                <input id="password"                                        type="password"                                        class="form-control"                                        name="password"                                        placeholder="Enter Password">                            </div>                        </div>                        <div class="input-group">                            <div class="progress">                                <div class="progress-bar"                                      role="progressbar"                                      aria-valuenow="0"                                      aria-valuemin="0"                                      aria-valuemax="100"                                      style="width:0%">                                </div>                            </div>                        </div>                        <br>                        <br>                        <div class="input-group">                            <button class="btn btn-success btn-block">                              Register Now!                          </button>                        </div>                    </center>                    <br>                </div>            </div>            <div class="col-sm-3">   </div>        </div>    </div>    <script>        var percentage = 0;          function check(n, m) {            if (n < 6) {                percentage = 0;                $(".progress-bar").css("background", "#dd4b39");            } else if (n < 8) {                percentage = 20;                $(".progress-bar").css("background", "#9c27b0");            } else if (n < 10) {                percentage = 40;                $(".progress-bar").css("background", "#ff9800");            } else {                percentage = 60;                $(".progress-bar").css("background", "#4caf50");            }              // Check for the character-set constraints            // and update percentage variable as needed.                        //Lowercase Words only            if ((m.match(/[a-z]/) != null))             {                percentage += 10;            }                        //Uppercase Words only            if ((m.match(/[A-Z]/) != null))             {                percentage += 10;            }                        //Digits only            if ((m.match(/0|1|2|3|4|5|6|7|8|9/) != null))             {                percentage += 10;            }                        //Special characters            if ((m.match(/\W/) != null) && (m.match(/\D/) != null))            {                percentage += 10;            }              // Update the width of the progress bar            $(".progress-bar").css("width", percentage + "%");        }          // Update progress bar as per the input        $(document).ready(function() {            // Whenever the key is pressed, apply condition checks.             $("#password").keyup(function() {                var m = $(this).val();                var n = m.length;                  // Function for checking                check(n, m);            });        });    </script></body>  </html>Output:
In the password field, check whenever key is pressed using keyup() function.
Extract the input added in the password field.
Update percentage variable and progress-bar color as per the password length.
Check for char-set constraints.
Update the width of the progress-bar.Final Solution:<!-- Update progress-bar whenever input field is updated.--><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </script></head><style>    .container-fluid {        background-color: #ffffff;        border-radius: 8px;        border: 1px solid lightgrey;        padding: 16px;        -webkit-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        -moz-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);    }          .input-group {        width: 80%;        height: auto;        padding: 4px;    }          .progress {        height: 4px;    }          .progress-bar {        background-color: green;    }</style>  <body>    <br>    <br>    <div class="container">        <div class="row">            <div class="col-sm-3">   </div>            <div class="col-sm-6">                <div class="container-fluid">                    <center>                        <h2 class="text-success">                          Enter Password:                      </h2>                        <br>                        <br>                        <div class="form-group">                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-user">                                  </i>                              </span>                                <input id="email"                                        type="text"                                        class="form-control"                                        name="email"                                        placeholder="User-Email">                            </div>                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-lock">                                  </i>                              </span>                                <input id="password"                                        type="password"                                        class="form-control"                                        name="password"                                        placeholder="Enter Password">                            </div>                        </div>                        <div class="input-group">                            <div class="progress">                                <div class="progress-bar"                                      role="progressbar"                                      aria-valuenow="0"                                      aria-valuemin="0"                                      aria-valuemax="100"                                      style="width:0%">                                </div>                            </div>                        </div>                        <br>                        <br>                        <div class="input-group">                            <button class="btn btn-success btn-block">                              Register Now!                          </button>                        </div>                    </center>                    <br>                </div>            </div>            <div class="col-sm-3">   </div>        </div>    </div>    <script>        var percentage = 0;          function check(n, m) {            if (n < 6) {                percentage = 0;                $(".progress-bar").css("background", "#dd4b39");            } else if (n < 8) {                percentage = 20;                $(".progress-bar").css("background", "#9c27b0");            } else if (n < 10) {                percentage = 40;                $(".progress-bar").css("background", "#ff9800");            } else {                percentage = 60;                $(".progress-bar").css("background", "#4caf50");            }              // Check for the character-set constraints            // and update percentage variable as needed.                        //Lowercase Words only            if ((m.match(/[a-z]/) != null))             {                percentage += 10;            }                        //Uppercase Words only            if ((m.match(/[A-Z]/) != null))             {                percentage += 10;            }                        //Digits only            if ((m.match(/0|1|2|3|4|5|6|7|8|9/) != null))             {                percentage += 10;            }                        //Special characters            if ((m.match(/\W/) != null) && (m.match(/\D/) != null))            {                percentage += 10;            }              // Update the width of the progress bar            $(".progress-bar").css("width", percentage + "%");        }          // Update progress bar as per the input        $(document).ready(function() {            // Whenever the key is pressed, apply condition checks.             $("#password").keyup(function() {                var m = $(this).val();                var n = m.length;                  // Function for checking                check(n, m);            });        });    </script></body>  </html>Output:
Final Solution:
<!-- Update progress-bar whenever input field is updated.--><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8" />    <!-- Required CDN's -->    <link rel="stylesheet"          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">  </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">  </script></head><style>    .container-fluid {        background-color: #ffffff;        border-radius: 8px;        border: 1px solid lightgrey;        padding: 16px;        -webkit-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        -moz-box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);        box-shadow: 0px 0px 12px 2px rgba(0, 0, 0, 0.75);    }          .input-group {        width: 80%;        height: auto;        padding: 4px;    }          .progress {        height: 4px;    }          .progress-bar {        background-color: green;    }</style>  <body>    <br>    <br>    <div class="container">        <div class="row">            <div class="col-sm-3">   </div>            <div class="col-sm-6">                <div class="container-fluid">                    <center>                        <h2 class="text-success">                          Enter Password:                      </h2>                        <br>                        <br>                        <div class="form-group">                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-user">                                  </i>                              </span>                                <input id="email"                                        type="text"                                        class="form-control"                                        name="email"                                        placeholder="User-Email">                            </div>                            <div class="input-group">                                <span class="input-group-addon">                                  <i class="glyphicon glyphicon-lock">                                  </i>                              </span>                                <input id="password"                                        type="password"                                        class="form-control"                                        name="password"                                        placeholder="Enter Password">                            </div>                        </div>                        <div class="input-group">                            <div class="progress">                                <div class="progress-bar"                                      role="progressbar"                                      aria-valuenow="0"                                      aria-valuemin="0"                                      aria-valuemax="100"                                      style="width:0%">                                </div>                            </div>                        </div>                        <br>                        <br>                        <div class="input-group">                            <button class="btn btn-success btn-block">                              Register Now!                          </button>                        </div>                    </center>                    <br>                </div>            </div>            <div class="col-sm-3">   </div>        </div>    </div>    <script>        var percentage = 0;          function check(n, m) {            if (n < 6) {                percentage = 0;                $(".progress-bar").css("background", "#dd4b39");            } else if (n < 8) {                percentage = 20;                $(".progress-bar").css("background", "#9c27b0");            } else if (n < 10) {                percentage = 40;                $(".progress-bar").css("background", "#ff9800");            } else {                percentage = 60;                $(".progress-bar").css("background", "#4caf50");            }              // Check for the character-set constraints            // and update percentage variable as needed.                        //Lowercase Words only            if ((m.match(/[a-z]/) != null))             {                percentage += 10;            }                        //Uppercase Words only            if ((m.match(/[A-Z]/) != null))             {                percentage += 10;            }                        //Digits only            if ((m.match(/0|1|2|3|4|5|6|7|8|9/) != null))             {                percentage += 10;            }                        //Special characters            if ((m.match(/\W/) != null) && (m.match(/\D/) != null))            {                percentage += 10;            }              // Update the width of the progress bar            $(".progress-bar").css("width", percentage + "%");        }          // Update progress bar as per the input        $(document).ready(function() {            // Whenever the key is pressed, apply condition checks.             $("#password").keyup(function() {                var m = $(this).val();                var n = m.length;                  // Function for checking                check(n, m);            });        });    </script></body>  </html>
Output:
abhishek0719kadiyan
Bootstrap-Misc
jQuery-Misc
Technical Scripter 2019
Bootstrap
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
JQuery | Set the value of an input text field
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?
How to Dynamically Add/Remove Table Rows using jQuery ?