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';
}
}
});
Category | HTML / JS / CSS |
Credits | Chris Ferdinandi |
Date | February 9th, 2025 |
Codepen | NA |