<form>
  <label for="password">Password</label>
  <input type="password" id="password" placeholder="Enter your Password">
  <label id="passwordText">show password</label>
  <input type="checkbox" id="togglePassword"><br>
  <button type="button">Submit</button>
</form>

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
  text-align: center;
  margin-top: 100px;
}

input[type=password], input[type=text] {
  border: 1px #b6e7f9 solid;
  padding: 5px 10px;
}

input[type=checkbox] {
  vertical-align: middle;
}

button {
  padding: 10px 20px;
  margin-top: 20px;
  color: #fff;
  background-color: #65b0ed;
  border: none;
  display: inline-block;
  cursor: pointer;
}

const togglePassword = document.getElementById('togglePassword');

const showOrHidePassword = () => {
  const password = document.getElementById('password');
  if (password.type === 'password') {
    password.type = 'text';
  } else {
    password.type = 'password';
  }
};

togglePassword.addEventListener('change', showOrHidePassword);