👨🏻‍💻 Разработка компонента - Sign Up с валидацией.

HTML

<html lang="en">
<head>
 <title>Signup 2</title>
 <link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="login-card">
 <img
  src="https://i.pinimg.com/originals/0a/5f/ea/0a5feae400fc816c4ca2aca8bd67a168.jpg"
 />
 <h2>Sign Up</h2>
 <h3>Enter your credentials</h3>
 <form class="login-form">
  <div class="username">
   <input
    autocomplete="off"
    spellcheck="false"
    class="control"
    type="email"
    placeholder="Email"
    value="joe@gmail.com"
   />
   <div id="spinner" class="spinner"></div>
  </div>
  <input
   spellcheck="false"
   class="control"
   id="password"
   type="password"
   placeholder="Password"
   onkeyup="handleChange()"
  />
  <div id="bars">
   <div></div>
  </div>
  <div class="strength" id="strength"></div>
  <button class="control" type="button">JOIN NOW</button>
 </form>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>

CSS

* {
 box-sizing: border-box;
}

html,
body,
.wrapper {
 height: 100%;
}

@keyframes rotate {
 100% {
  background-position: 0% 50%;
 }
}

body {
 display: grid;
 place-items: center;
 margin: 0;
 background-color: #000000;
 background-image: url("bbblurry.svg");
 background-repeat: no-repeat;
 background-size: 200vh;
 font-family: "Euclid Circular A";
 color: #868b94;
 animation: rotate 5s infinite alternate linear;
}

button {
 background: transparent;
 border: 0;
 cursor: pointer;
}

.control {
 border: 0;
 border-radius: 8px;
 outline: none;
 width: 100%;
 height: 56px;
 padding: 0 16px;
 background: rgba(255, 255, 255, 0.1);
 border-radius: 6px;
 color: #f9f9f9;
 margin: 8px 0;
 font-family: inherit;
 text-align: left;
 font-size: 16px;
 transition: 0.4s;
}

.login-card {
 width: 400px;
 padding: 100px 30px 32px;
 border-radius: 1.25rem;
 background: rgba(0, 0, 0, 0.7);
 backdrop-filter: blur(26px);
 text-align: center;
}

.login-card > h2 {
 font-size: 36px;
 font-weight: 600;
 margin: 0 0 6px;
 color: #f9f9f9;
}

.login-card img {
 width: 120px;
 border-radius: 50%;
 border: 1px solid rgba(255, 255, 255, 0.4);
 padding: 5px;
 margin-bottom: 20px;
}

.login-card > h3 {
 color: #837f90;
 margin: 0 0 40px;
 font-weight: 500;
 font-size: 1rem;
}

.login-form {
 width: 100%;
 margin: 0;
 display: grid;
}

.login-form input.control::placeholder {
 color: #868b94;
}

.login-form > button.control {
 cursor: pointer;
 width: 100%;
 height: 56px;
 padding: 0 16px;
 background: #f9f9f9;
 color: #000000;
 border: 0;
 font-family: inherit;
 font-size: 1rem;
 font-weight: 600;
 text-align: center;
 letter-spacing: 2px;
 transition: all 0.375s;
}

.username {
 position: relative;
}

@keyframes spin {
 100% {
  rotate: 1turn;
 }
}

.spinner {
 position: absolute;
 top: 50%;
 right: 16px;
 translate: 0 -50%;
 width: 24px;
 height: 24px;
 border-radius: 50%;
 border: 3px solid #ccc9e1;
 border-top-color: #8f44fd;
 opacity: 0;
 animation: spin 1s infinite linear;
}

.spinner.visible {
 opacity: 1;
}

.indicator {
 display: flex;
 align-items: center;
 justify-content: space-between;
}

#bars {
 margin: 8px 0;
 flex: 1 1 auto;
 display: flex;
 align-items: center;
 gap: 8px;
 height: 6px;
 border-radius: 3px;
 background: rgba(255, 255, 255, 0.1);
}

#bars div {
 height: 6px;
 border-radius: 3px;
 transition: 0.4s;
 width: 0%;
}

#bars.weak div {
 background: #bc2b38;
 width: 33.33%;
}

#bars.medium div {
 background: #d36f30;
 width: 66.66%;
}

#bars.strong div {
 background: #1eb965;
 width: 100%;
}

.strength {
 text-align: left;
 height: 30px;
 text-transform: capitalize;
}

Javascript

const bars = document.querySelector("#bars"),
 strengthDiv = document.querySelector("#strength"),
 passwordInput = document.querySelector("#password");

const strength = {
 1: "weak",
 2: "medium",
 3: "strong",
};

const getIndicator = (password, strengthValue) => {
 for (let index = 0; index < password.length; index++) {
  let char = password.charCodeAt(index);
  if (!strengthValue.upper && char >= 65 && char <= 90) {
   strengthValue.upper = true;
  } else if (!strengthValue.numbers && char >= 48 && char <= 57) {
   strengthValue.numbers = true;
  } else if (!strengthValue.lower && char >= 97 && char <= 122) {
   strengthValue.lower = true;
  }
 }

 let strengthIndicator = 0;

 for (let metric in strengthValue) {
  if (strengthValue[metric] === true) {
   strengthIndicator++;
  }
 }

 return strength[strengthIndicator] ?? "";
};

const getStrength = (password) => {
 let strengthValue = {
  upper: false,
  numbers: false,
  lower: false,
 };

 return getIndicator(password, strengthValue);
};

const handleChange = () => {
 let { value: password } = passwordInput;

 console.log(password);

 const strengthText = getStrength(password);

 bars.classList = "";

 if (strengthText) {
  strengthDiv.innerText = `${strengthText} Password`;
  bars.classList.add(strengthText);
 } else {
  strengthDiv.innerText = "";
 }
};