<div id="form">
    <div id="regsec">
        <h2 class="needafter" id="h2form">Create Account</h2>
        <form>
            <div class="formpart"><label for="user">Username :</label>
                <div class="papainp"><input id="user" placeholder="Enter Username" type="text" required="required" /><span class="truesig">✅</span></div>
                <p id="usermsg">At Least 3 Characters</p>
            </div>
            <div class="formpart"><label for="email">Email :</label>
                <div class="papainp"><input id="email" placeholder="Enter Email" type="email" required="required" /><span class="truesig">✅</span></div>
                <p id="emailmsg">Please Enter a Vaild Email</p>
            </div>
            <div class="formpart"><label for="password">Password :</label>
                <div class="papainp"><input id="password" placeholder="Enter Password" type="password" required="required" /><span class="truesig">✅</span></div>
                <p id="passwordmsg">At Least 8 Characters, 1 Uppercase, 1 Special Character, 1 Number</p>
            </div>
            <div class="formpart"><label for="reppassword">Repeat Password :</label>
                <div class="papainp"><input id="reppassword" placeholder="Repeat Password" type="password" required="required" /><span class="truesig">✅</span></div>
                <p id="repmsg">Not The Same Password</p>
            </div><button class="submitbtn" disabled="disabled" type="button">Register    </button></form>
    </div>
</div>

#form
  #regsec
    h2#h2form.needafter Create Account
    form
      .formpart
        label(for='user') Username :
        .papainp
          input#user(placeholder='Enter Username', type='text', required='required')
          span.truesig ✅
        p#usermsg At Least 3 Characters
      .formpart
        label(for='email') Email :
        .papainp
          input#email(placeholder='Enter Email', type='email', required='required')
          span.truesig ✅
        p#emailmsg Please Enter a Vaild Email
      .formpart
        label(for='password') Password :
        .papainp
          input#password(placeholder='Enter Password', type='password', required='required')
          span.truesig ✅
        p#passwordmsg At Least 8 Characters, 1 Uppercase, 1 Special Character, 1 Number
      .formpart
        label(for='reppassword') Repeat Password :
        .papainp
          input#reppassword(placeholder='Repeat Password', type='password', required='required')
          span.truesig ✅
        p#repmsg Not The Same Password
      button.submitbtn(disabled='disabled', type='button') Register    

#form{
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.formpart{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 1.2rem;
}
label{
  font-weight: 500;
}
input{
padding: 0.8rem 0rem 0.8rem 0.5rem ;
width: 50vw;
font-size: 1rem;
font-weight: 500;
font-family: sans-serif;
border: unset;
border: #000 0.5px solid;
}
input::placeholder{
  font-size: 1rem;
}
.formpart *{
margin: 3px 0;
}
.formpart p{
  color: red;
  display: none;
}
input:focus::placeholder {
  color: transparent;
}
.submitbtn{
  all: unset;
  padding: 1rem 5rem;
  border-radius: 10px;
  margin: 10px 20px;
  background-color: rgb(17, 11, 11);
  color: rgb(255, 255, 255);
  font-weight: 600;
  cursor: pointer;
  opacity: 0.8;
  transition: 0.3s;
  font-size: 1.2rem;
  line-height: 1rem;
}
.submitbtn:hover{
opacity: 1;
}
form{
  display: flex;
  flex-direction: column;
  align-items: center;
}
form * {
  border-radius: 5px;
}
.needafter{
position: relative;
font-size: 2rem;
}
.needafter::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  margin-left: auto;
  margin-right: auto;
  height: 3px;
  width: 50px;
  background-color: rgb(68, 27, 27);
}
.dark .needafter::after{
  background-color: rgb(240, 192, 192);
  height: 2px;
}
.dark input{
  color: white;
  background-color: rgba(141, 47, 47, 0.219);
  border: none;
}
.dark input::placeholder{
  color: white;
  opacity: 0.6;
}
.dark input:focus{
  outline: rgb(0, 0, 0) 0.8px solid;
}
.error{
  outline: unset;
  border: 2px solid red !important;

}
.success{
  outline: unset;
  border: 2px solid #04AA6D !important;
}
.papainp{
  position: relative;
}
.papainp span{
  position: absolute;
  right: 10px;
  top: 14px;
  opacity: 0;
  transition: all 0.3s;
}
.submitbtn:disabled{
  cursor: not-allowed;
  opacity: 0.6;
}
#form p{
  color: red !important;
}
#form{
  display: inline-block;
}

const truesig = document.querySelectorAll(".truesig");
const regEmail =
  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const regPassword =
  /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/;

const firsterror = (id, msg) => {
  id.classList.add("error");
  msg.style.display = "block";
};
const success = (id, msg, i) => {
  id.classList.remove("error");
  msg.style.display = "none";
  id.classList.add("success");
  truesig[i].style.opacity = "1";
};
const fail = (id, msg, i) => {
  id.classList.add("error");
  id.classList.remove("success");
  msg.style.display = "block";
  truesig[i].style.opacity = "0";
};
const check = () => {
  const btn = document.querySelector(".submitbtn");
  const input = document.querySelectorAll("input");
  if (
    input[0].className == "success" &&
    input[1].className == "success" &&
    input[2].className == "success" &&
    input[3].className == "success"
  ) {
    btn.removeAttribute("disabled");
  }else{
    btn.setAttribute("disabled","");
  }
};
user.addEventListener("keyup", () => {
  firsterror(user, usermsg);
  if (user.value.length > 2) {
    success(user, usermsg, 0);
  }
  if (user.value.length < 3) {
    fail(user, usermsg, 0);
  }
  check();

});

email.addEventListener("keyup", () => {
  firsterror(email, emailmsg);
  if (regEmail.test(email.value)) {
    success(email, emailmsg, 1);
  } else {
    fail(email, emailmsg, 1);
  }
  check();

});
password.addEventListener("keyup", () => {
  firsterror(password, passwordmsg);
  if (regPassword.test(password.value)) {
    success(password, passwordmsg, 2);
  } else {
    fail(password, passwordmsg, 2);
  }
  check();

});
reppassword.addEventListener("keyup", () => {
  firsterror(reppassword, repmsg);
  if (password.value == "") {
    fail(reppassword, repmsg, 3);
  } else if (reppassword.value == password.value) {
    success(reppassword, repmsg, 3);
  } else {
    fail(reppassword, repmsg, 3);
  }
  check();
});
const regsec = document.getElementById("regsec");
const createbtn = document.getElementById("createbtn");
createbtn.addEventListener("click",() => {
  regsec.style.display = "flex"
  form.style.transform = "scale(1)"
})
h2form.addEventListener("click",() => {
  regsec.style.display = "none"
  form.style.transform = "scale(0)"
})