Show or Hide password using JavaScript
Hello Guys! Welcome to Coding Torque. In this blog, I'm going to explain to you how to make a Show or Hide Password input field using JavaScript. You can use this project in your login page of your website. This will be a step-by-step guide including HTML and CSS. Let's get started 🚀.
Let's cover the HTML part
HTML is a markup language. We use HTML to make the skeleton of a website.
Now let's import the font awesome CDN in our HTML head tag. fontawesome is a library that is used for icons in a website.
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />In the below HTML code, we have a `<div>` with a class name 'card' which holds our sliders and output box. Inside sliders, we have label tags and input tags with type 'range'. `<input>` tag also has min and max limits. In the output box, we have an output which is the RGBA value, and a copy button to copy the RGBA value.
<div class="wrapper">
<input type="password" id="password">
<button id="eyeBtn" onclick="changeType()"><i> class="fas fa-eye-slash"></i></button>
</div>Here is the Final HTML Code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font-awesome icons css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<title>Show or Hide Password using Javascript - @codescientist x @codingtorque</title>
</head>
<body>
<div class="wrapper">
<input type="password" id="password">
<button id="eyeBtn" onclick="changeType()"><i> class="fas fa-eye-slash"></i></button>
</div>
</body>
</html>Output Till Now
Let's understand CSS Part
In the below CSS code,
- We declare a * selectors to set the font Poppins that we have imported in our head tag.
- Next we have the wrapper class which uses flex property to align elements in a div.
@import url("https://fonts.googleapis.com/css2?family=Poppins");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10rem 30rem;
width: 250px;
height: 40px;
border: 2px solid;
border-radius: 20px;
overflow: hidden;
}
.wrapper input {
height: 100%;
width: 85%;
border: none;
padding: 5px 10px;
outline: none;
}
.wrapper button {
height: 100%;
width: 15%;
border: none;
cursor: pointer;
}Output Till Now
Finally a JavaScript Part
In the below javascript code, we have changeType() function to toggle the input type.
In changeType() function, we have declared passwordInput and eyeBtn variables which contain password and button elements. Next, we have created a conditional statement that checks the type of input field and switches the types respectively.
function changeType() {
const passwordInput = document.getElementById("password");
const eyeBtn = document.getElementById("eyeBtn");
if (passwordInput.getAttribute("type") === "password") {
passwordInput.setAttribute("type", "text");
eyeBtn.innerHTML = `<i> class="fas fa-eye"></i>`
}
else {
passwordInput.setAttribute("type", "password");
eyeBtn.innerHTML = `<i> class="fas fa-eye-slash"></i>`
}
}