JavaScript – Password Visibility

Started Chris Ferdinandi‘s JavaScript Essentials course yesterday and just finished up my first little project on there. I think I’ll try and follow my JS journey on here to maybe help facilitate my understanding of things.

So, the purpose of this exercise was to use JS to show a password when the box is checked or make it masked if the box is unchecked.

In order to achieve this, the first thing you have to do is create variables to use in the script. These variables need to tie to the HTML elements in the document/page you’re trying to update/change/manipulate.

So, (I know – I use the word “so” way too much) to create the variables, YOU decide what to call them. In this case, we’re going to call one of them “toggle” and the other one “password.” Each of these variables needs to tie to the elements in the HTML for when the checkbox is open and checked.

// This first one ties the variable "toggle" to the HTML element with the ID (#) of "show-password"
let toggle = document.querySelector('#show-password');

// The second one ties the variable "password" to the HTML element with the ID (#) of "password"
let password = document.querySelector('#password');

With the necessary variables set up, now you have to write some script to make it recognize when the user checks the box to show the password. This is done by adding what is called an “event listener.” So, we add an event listener to listen for the “click” whenever someone checks the box.

toggle.addEventListener('click', function () {
});

What this does is tell the (what? the DOM? the page? whatever…) this tells it to pay attention and when the box is checked to show the password – that triggers the event listener which then executes the function you’ve just told it to execute. That function will tell the website whether or not to show the password. The function script is as follows:

if (toggle.checked) {
   password.type = 'text';
}  else {
   password.type = 'password';
}

If the toggle variable you’ve just created is checked, the type of the password variable will be text. If not, the password type will be password (which masks the actual letters). (.checked and .type are properties basically built into JavaScript which return certain actions or information – I know exactly two of these. The ones I just used. LOL) So, when you put the script all together, it looks like this:

let toggle = document.querySelector("#show-password");
let password = document.querySelector("#password");

toggle.addEventListener("click", function () {

  if (toggle.checked) {
  	password.type = "text";
  } else {
    	password.type = "password";
  }
});

It’s good practice when coding to insert comments which help other potential coders understand what you did and why. With comments, the above script would look something like this:

// create variables
let toggle = document.querySelector("#show-password");
let password = document.querySelector("#password");

// add event listener to listen for CLICK of checkbox
toggle.addEventListener("click", function () {
	//if toggle is checked, type will be "text"
	//if unchecked, type will be password
	if (toggle.checked) {
		password.type = "text";
	} else {
		password.type = "password";
	}
});

Now, if given another JS project (similar to this one) to do, I MAY be able to come up with all of those things (all what? three of them? lol) on my own. But it’s not likely.

I’ve known for a little while now that I’m missing something “big picture” when it comes to JavaScript, but I have been clueless as to what it is. Not even enough to ask for help! People always tell you, if you don’t understand something, ask questions. Well, sure… that’s the right way to go! However, you often have to be in possession of enough information to even know what or how to ask! This is one of those cases for me. But things like this particular exercise… help. It was simple enough to be within my realm of understanding and quick enough to show instant results based on the script written. THIS time, I couldn’t come up with what to do on my own. But THIS time, I understood HOW it was done!

Hopefully, that means that NEXT time, I’ll have a better chance of actually coming up with what to do on my own.

Hope! Glorious hope!

(Thanks to Chris Fernandi for this course, so far. I hope it continues to be helpful like I think it will.)