<!-- --------------- Created By InCoder --------------- -->
<!DOCTYPE html>
<html lang="en">

<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">
  <title>Password Show and Hide - InCoder</title>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
  <div class="input-field">
    <input type="password" placeholder="Enter Your Password" />
    <i class="fas fa-eye icon"></i>
  </div>

  
</body>

</html>
/* --------------- Created By InCoder --------------- */

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #7b1ac6;
}

.input-field {
  display: flex;
  position: relative;
  align-items: center;
}

.input-field input {
  border: 0px;
  width: 15rem;
  height: 2rem;
  outline: none;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #fff;
  padding: 0px 30px 0px 6px;
}

.input-field .icon {
  right: 10px;
  cursor: pointer;
  color: #7b1ac6;
  position: absolute;
}

// --------------- Created By InCoder ---------------
let input = document.querySelector(".input-field input");
let icon = document.querySelector(".icon");
icon.addEventListener("click", function () {
  if (input.type == "password") {
    input.type = "text";
    icon.classList.add("fa-eye-slash");
  } else {
    input.type = "password";
    icon.classList.remove("fa-eye-slash");
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.