Display Password

Today, I learned how to create a show password application. This utility is seen in every form on the web. I learnt how to use the for...of loop to loop through the array object and mainpulate the items individually.


                    //Get the elements
                    let passwords = document.querySelectorAll('[type="password"]');
                    let checkbox = document.getElementById('showPasswords');
    
                    /* 
                    * add an event listener to the variable 
                    * use a for...of loop to loop through the items
                    * check for event on each items 
                    */
    
                    checkbox.addEventListener('click', () => {
                        for (let password of passwords) {
                          if (checkbox.checked) {
                            password.type = 'text';
                          } else {
                            password.type = 'password';
                          }
                        }
                      });
                

File Info

Category HTML / JS / CSS
Credits Chris Ferdinandi
Date February 9th, 2025
Codepen NA