How to Create a Password Visibility Toggle
A beginner's guide to creating visibility toggles
Introduction
A toggle is used for switching between options that have opposite states/values. It can be in the form of toggle buttons, and toggle switches, which can switch the on/off states and can be used to toggle an element's visibility. In our everyday lives, we use light bulbs and switches, which are good examples of devices that apply the toggling principle.
You would have seen different websites, that have a password visibility toggle. Virtually every website and app use this toggle feature during the sign-up and login process for security reasons. So, let’s just say it is a great weapon to have in your arsenal as a frontend developer. You will get that weapon today because you will learn how to create a password visibility toggle using steps that will be broken down thoroughly.
Prerequisite
A text editor
Basic knowledge of HTML and CSS
A little knowledge of JavaScript
Getting ready to create the password visibility toggle
You will need to do certain things before you can go any further with this coding challenge. You will have to visit Font Awesome’s website to add icons to your static website. If you are not familiar with Font Awesome, it is a website that has a large collection of icons, that can be used by developers and designers in their projects.
You can get a CDN link from Font Awesome to use icons from their websites by following the steps below:
Visit the website
Once you open a browser such as Google Chrome, just type “font awesome” into the search bar, and it will bring out some search results for Font Awesome. The first link in the search results will take you to the website. Once you do exactly that, you should see something like this:
Sign up on the website, and then, you can move on to the next step.
Get CDN link
Once you are on the website, just scroll down the page. You will come across a part of the webpage, where you can request a kit code for your projects:
Type in your email address, and they will send you a confirmation email. Once you have confirmed your account, they will send you a single line of code that looks similar to this code below:
<script src="kit.fontawesome.com/48651e2918.js” crossorigin="anonymous”></script>
Apply the CDN link
You will have to embed the <script> tag code in the <head> tag of your HTML file. This will allow you to add icons to your projects in your HTML’s <body> tag using the <i> tag. You can style the icons in any way you want.
Writing the HTML
You will have to first set up your HTML file in your chosen text editor in the manner shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1.0>
<script src="https://kit.fontawesome.com/1935d064dd.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
</body>
</html>
Once you have inserted the Font Awesome CDN link in your HTML file's <head> tag and linked a stylesheet to your HTML file, you can now start adding HTML tags to the <body> tag. You will have to create a <div> tag, which will serve as a wrapper for the <input/> tag, which will contain your fictional password, and a <i> tag, which contains the eye icon for visibility. You have to use the type attribute to set the <input/> tag to a password input element.
Let's take a look at the HTML code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1.0>
<script src="https://kit.fontawesome.com/1935d064dd.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="container">
<input type="password" placeholder="password" id="password"/>
<i class="fas fa-eye" id="eye-icon"></i>
</div>
</body>
</html>
Result:
Once you have created the HTML above, you will see that it doesn’t look like what you see on websites. The CSS will carry out that magic as it gets even more interesting.
Writing the CSS
You will have to first carry out some fundamental styling using the CSS universal selector(*) and also center everything in the DOM using the body element selector.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: grid;
place-items: center;
justify-content: center;
min-height: 100vh;
}
Result:
As you can see, after you carry out that styling, you will see that the elements have been displayed in the center, with the eye icon beside the <input/> tag.
The <input/> tag is then given a height and a padding value. For the eye icon to be inside the <input/> tag, you use the transform property to move it inside the <input/> tag and then use the font-size property to reduce its size.
input{
height: 30px;
padding: 0.3rem;
}
i{
transform: translate(-24px, 2px);
font-size: 14px;
}
Result:
You have successfully styled the <input/> tag, for inputting a fictional password using HTML and CSS. The final piece of the puzzle will be solved using JavaScript.
Toggling Visibility Using JavaScript
To get started, you will have to link the JavaScript file to the HTML, using the <script> tag and putting the script file in its src attribute. You should put this <script> tag before the closing tag of <body> tag so that once the page loads with HTML and CSS, JavaScript will load after.
<body>
<div class="container">
<input type="password" placeholder="password" id="password"/>
<i class="fas fa-eye" id="eye-icon"></i>
</div>
<script src="script.js"></script>
</body>
Once that is done, you have to create variables that will target the required elements in the DOM and store these elements.
Let's take a look at how to create these variables:
const eyeIcon= document.getElementById("eye-icon");
const myPassword= document.querySelector("#password");
You will then have to add an event listener to the variable referencing the <i> tag containing the eye icon in our DOM, which is the eyeIcon variable. You will use JavaScript to add a click event to it so that once you click it, it will carry out a function to toggle the visibility of the value in the <input/>.
eyeIcon.addEventListener("click", () => {
});
Inside the function, you will need to use an if/else statement to achieve your aim. Firstly, in the if block, you will have to check for the availability of the fa-eye class in the <i> tag using the classList property. If there is truly a fa-eye class, you can change the type attribute of the <input/> tag. You will have to change the type attribute of the <input/> tag from password to text, to display your hidden password. Inside the if block, you can also replace the eye-icon in the <i> tag, by using the classList property to replace the fa-eye class with the fa-eye-slash class, which gives you an eye-icon with a slash.
The code snippet below will make it all clearer:
eyeIcon.addEventListener("click", () => {
if(eyeIcon.classList.contains("fa-eye")) {
myPassword.setAttribute("type", "text");
eyeIcon.classList.replace("fa-eye", "fa-eye-slash");
}
});
Result:
If you stop there, you will see that the password can no longer be hidden and the eye icon doesn’t show up anymore. That’s why you will need an else block, which contains code that will run if the <i> tag no longer contains the fa-eye class. The else block ensures that you will be able to hide the password and also display the eye icon again after the initial click.
eyeIcon.addEventListener("click", () => {
if(eyeIcon.classList.contains("fa-eye")) {
myPassword.setAttribute("type", "text");
eyeIcon.classList.replace("fa-eye", "fa-eye-slash");
}else{
myPassword.setAttribute("type", "password");
eyeIcon.classList.replace("fa-eye-slash", "fa-eye");
};
});
Result:
That is all the JavaScript code needed for this project, and you have just created a password visibility toggle, so it is no longer a mystery to you.
Conclusion
The JavaScript code might be a bit challenging for a newbie to understand, but if it's studied well, one would be able to create a visibility toggle for all scenarios. So, keep practicing! The sky will be your limit.