<header>
  <h2 class="title">Input Events для валідації пароля</h2>
  <p class="description">Відстежує введення для динамічної оцінки надійності паролю.</p>
</header>
<main>
  <div class="result">
    <label for="passwordInput">Введіть пароль:</label>
    <input type="password" id="passwordInput" placeholder="Ваш пароль">
    <p id="strengthMessage">Надійність паролю: <span id="strengthLevel">Невідомо</span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#strengthMessage {
  font-weight: bold;
  margin-top: 10px;
}

#strengthLevel.weak {
  color: #ff4d4d;
}

#strengthLevel.medium {
  color: #ffcc00;
}

#strengthLevel.strong {
  color: #4caf50;
}

const passwordInput = document.querySelector('#passwordInput');
const strengthLevel = document.querySelector('#strengthLevel');

passwordInput.addEventListener('input', function(event) {
  const password = event.target.value;
  let strength;

  if (password.length > 8 && /[A-Z]/.test(password) && /\d/.test(password)) {
    strength = 'strong';
  } else if (password.length > 4) {
    strength = 'medium';
  } else {
    strength = 'weak';
  }

  switch (strength) {
    case 'strong':
      strengthLevel.textContent = 'Сильний';
      strengthLevel.className = 'strong';
      break;
    case 'medium':
      strengthLevel.textContent = 'Середній';
      strengthLevel.className = 'medium';
      break;
    case 'weak':
      strengthLevel.textContent = 'Слабкий';
      strengthLevel.className = 'weak';
      break;
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.