#meter {
  appearance: none;
}
#meter::-webkit-progress-bar {
  background: #f0f0f0;
  border-radius: 10px;
  /*            box-shadow: inset 3px 3px 10px #ccc;*/
}
#meter::-webkit-progress-value {
  border-radius: 10px;
  background: var(--c, red);
}
#meter[value]::-webkit-progress-value {
  transition: width 0.5s;
}

const password = document.querySelector("#password");
const strengthBar = document.querySelector("#meter");
var display = document.querySelector(".textbox");

password.addEventListener("keyup", function () {
  checkPassword(password.value);
});

function checkPassword(password) {
  let strength = 0;
  const regexes = [/[a-z]+/, /[A-Z]+/, /[0-9]+/, /[$@#&!]+/];

  regexes.forEach((regex, index) => {
    strength += password.match(regex) ? 1 : 0;
  });

  strengthBar.value = strength;

  switch (strength) {
    case 1:
      strengthBar.style.setProperty("--c", "red");
      break;
    case 2:
    case 3:
      strengthBar.style.setProperty("--c", "orange");
      break;
    case 4:
      strengthBar.style.setProperty("--c", "green");
      break;
  }

  if (password.length < 6) {
    display.textContent = "minimum number of characters is 6";
    strengthBar.style.setProperty("--c", "red");
  } else if (password.length > 15) {
    display.textContent = "maximum number of characters is 15";
    strengthBar.style.setProperty("--c", "red");
  } else {
    display.textContent = "";
  }
}