Show/Hide Password Toggle with JavaScript | With Source Code | CodeLSC

Learn how to create a show/hide password toggle using JavaScript and Font Awesome icons

Introduction:

Have you ever needed to create a password input field that allows the user to toggle the visibility of their password? With JavaScript and Font Awesome icons, it's easy to create a show/hide password toggle that makes your password input fields more user-friendly. In this tutorial, we'll walk through the steps of creating a show/hide password toggle that you can use in your own web projects.


Preview:


Step 1: HTML Markup

First, let's create the HTML markup for the password input field and the eye icon that will serve as our toggle button. Here's the code for the form:

    <center>

      <form style="width: 350px; margin: auto">

        <h2>CodeLSC</h2>

        <div class="input-icons">

          <i class="fa fa-user icon"> </i>

          <input class="input-field" type="text" placeholder="Username" />

        </div>

 

        <div class="input-icons">

          <i

            id="eye-icon"

            class="fa fa-eye icon"

            onclick="togglePasswordVisibility()"

          >

          </i>

          <input

            id="password-input"

            class="input-field"

            type="password"

            placeholder="Password"

          />

        </div>

      </form>

    </center>

This code creates a form with a username input field and a password input field with a Font Awesome eye icon. The eye icon will be used to toggle the visibility of the password.


Step 2: JavaScript Function

Next, we need to create a JavaScript function that will toggle the visibility of the password based on the state of the eye icon. Here's the code for the function:

<script>

      function togglePasswordVisibility() {

        var passwordInput = document.getElementById('password-input');

        var eyeIcon = document.getElementById('eye-icon');

 

        if (passwordInput.type === 'password') {

          passwordInput.type = 'text';

          eyeIcon.classList.remove('fa-eye');

          eyeIcon.classList.add('fa-eye-slash');

        } else {

          passwordInput.type = 'password';

          eyeIcon.classList.remove('fa-eye-slash');

          eyeIcon.classList.add('fa-eye');

        }

      }

    </script>

This code creates a function called togglePasswordVisibility that gets the password input field and the eye icon element by their IDs. It then checks the type of the password input field and toggles it between "password" and "text" based on the current state. Finally, it changes the eye icon to show either the open eye or the closed eye based on the current state.


Step 3: Event Binding

Now that we have our HTML markup and JavaScript function, we need to bind an event listener to the eye icon so that when it is clicked, it triggers our JavaScript function. Here's the code to do that:

<i id="eye-icon" class="fa fa-eye icon" onclick="togglePasswordVisibility()" ></i>

This code adds an onclick event to the eye icon element and calls our togglePasswordVisibility function when the icon is clicked.


Conclusion:

And there you have it! With just a few lines of HTML, CSS, and JavaScript, you can create a show/hide password toggle that makes your password input fields more user-friendly. Feel free to customize the code to fit

 

Follow us on social media for more coding tips and updates:

YouTube: https://www.youtube.com/@codelsc

Instagram: Instagram@codelsc_0122


#togglepasswordvisibility #html #passwordtogglejavascript #css #passwordshowhidebuttonjavascript #javascriptpasswordshowhide #csspasswordfield #passwordshowhidetogglebuttonjavascript #javascriptpasswordfield #htmlform #loginform #animatedloginformhtmlcss #loginformhtmlcssjavascript #passwordshowbuttonhtmlcssjavascript #javascriptpasswordshow #passwordshowusinghtmlcssjavascript #easytutorials #logindesigntutorial #htmlloginform #cssloginform #javascriptloginform #technology #education #programming #engineeringstudents #computerscience #webdesign #websitedesign #webdevelopment #websitedevelopment #csstutorials #htmltutorials

Comments

Post a Comment