hide and show password using javascript

by SnehalKadwe

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css">
<div class="shadow m-5 p-10">
  <div class="flex relative">
   <input type="password" name="password" id="password" class=" border rounded border-indigo-600 p-1 w-full" />
  <i class="far fa-eye my-2 -ml-7 absolute right-4 text-gray-500 block" id="showPassword" onclick="show()"></i>
  <i onclick="hide()" class="invisible far fa-eye-slash text-gray-500 my-2 -ml-7 absolute right-4" id="hidePassword"></i>
  </div>
  <button class="bg-indigo-800 shadow text-white my-2 p-2 rounded">
    Submit
  </button>
</div>

JavaScript

function show() {
	document.getElementById('password').type = 'text';
  document.getElementById('hidePassword').style.visibility = 'visible';
  document.getElementById('showPassword').style.visibility = 'hidden';
}

function hide () {
document.getElementById('password').type = 'password';
 document.getElementById('hidePassword').style.visibility = 'hidden';
  document.getElementById('showPassword').style.visibility = 'visible';
}