@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: rgb(54, 243, 101);
}

.box {
  position: relative;
  width: 300px;
}

.box .inputBox {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.box .inputBox input {
  position: relative;
  width: 100%;
  outline: none;
  border: none;
  padding: 10px 5px;
}

/* icon mata */

.box .inputBox #toggleBtn {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box .inputBox #toggleBtn::before {
  content: "\f06e";
  font-family: fontAwesome;
}

/* hide eye */

.box .inputBox #toggleBtn.hide::before {
  content: "\f070";
}

.validation {
  background-color: rgb(40, 155, 40);
  padding: 10px;
  margin-top: 30px;
  border-radius: 8px;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
}

.validation ul {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.validation ul li {
  position: relative;
  list-style: none;
  color: #fff;
  font-size: 0.85em;
  transition: 0.5s;
}

.validation ul li.valid {
  color: rgba(255, 255, 255, 0.5);
}

.validation ul li::before {
  content: "\f192";
  width: 20px;
  height: 10px;
  font-family: fontAwesome;
  display: inline-flex;
}

.validation ul li.valid::before {
  content: "\f00c";
  color: blanchedalmond;
}

let pswrd = document.getElementById("pswrd");
let toggleBtn = document.getElementById("toggleBtn");

let lowerCase = document.getElementById("lower");
let upperCase = document.getElementById("upper");
let digit = document.getElementById("digit");
let specialChar = document.getElementById("special");
let minLength = document.getElementById("length");

function checkPassword(data) {
  // javascript regular expression pattern
  const lower = new RegExp("(?=.*[a-z])");
  const upper = new RegExp("(?=.*[A-Z])");
  const number = new RegExp("(?=.*[0-9])");
  const special = new RegExp("(?=.*[!@#$%^&*])");
  const length = new RegExp("(?=.{8,})");

  // lower case validation check
  if (lower.test(data)) {
    lowerCase.classList.add("valid");
  } else {
    lowerCase.classList.remove("valid");
  }

  // upper case validation check
  if (upper.test(data)) {
    upperCase.classList.add("valid");
  } else {
    upperCase.classList.remove("valid");
  }

  // number case validation check
  if (number.test(data)) {
    digit.classList.add("valid");
  } else {
    digit.classList.remove("valid");
  }

  // special character case validation check
  if (special.test(data)) {
    specialChar.classList.add("valid");
  } else {
    specialChar.classList.remove("valid");
  }

  // minimal length case validation check
  if (length.test(data)) {
    minLength.classList.add("valid");
  } else {
    minLength.classList.remove("valid");
  }
}

// show hide password
toggleBtn.onclick = function () {
  if (pswrd.type === "password") {
    pswrd.setAttribute("type", "text");
    toggleBtn.classList.add("hide");
  } else {
    pswrd.setAttribute("type", "password");
    toggleBtn.classList.remove("hide");
  }
};