JSFiddle - React, Tailwind, and code Playground

by DannielDev

HTML

<http>
  <head>
    <title>Ver contraseña</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col s12 m12 l6">
          <label for="password">Ingrese su contraseña</label>
          <input type="password" id="password">
        </div>
        <div class="col s12">
          <button id="viewPassword">Mostrar contraseña</button>
        </div>
      </div>
    </div>
  </body>
</http>

CSS

#viewPassword{
  cursor:pointer;
  border: none;
  height: 39px;
  background-color: #004d7a;
  color: #FFF;
  width: 150px;
  margin-top: 16px
}

#password {
  height: 25px;
    width: 250px;
}

JavaScript

let password = document.getElementById('password');
let viewPassword = document.getElementById('viewPassword');
let click = false;

viewPassword.addEventListener('click', (e)=>{
  if(!click){
    password.type = 'text'
    click = true
  }else if(click){
    password.type = 'password'
    click = false
  }
});