Animated Password Strength Guide

This is an Animated Password Strength Guide. It turns the mundane task of entering a password into an engaging, character-driven interaction. Its function is to provide real-time, checklist-based feedback on password complexity while visually representing the user’s progress through a stylized illustration that reacts to the input.

Specs

• Weight: ~15 KB (including legacy jQuery dependency).
• Performance: High. The validation logic runs on the keyup event, which is lightweight. CSS transitions handle the visual “valid” checklist states.
• Theming / Customization: The character uses a specific set of inline SVG paths (#pwSignup logic) and can be themed by modifying CSS variables or SVG stroke/fill colors.
• Responsiveness: Fixed container layout. The component is designed for centered card-based UI.
• Graceful Degradation: The password input remains functional even if JavaScript fails; however, the validation checklist and the character’s reactions will be disabled.

Anatomy

The system pairs a functional input field with a decorative validation checklist.

• HTML (The Skeleton): A form structure where the .pwGuide contains the checklist <ul> and an absolute-positioned character illustration. The #password input sits below.
• CSS (The Skin): Uses Special Elite typography to give a typewriter aesthetic. The checklist uses transform: scaleX(0) to animate green “valid” bars when criteria are met.
• JS (The Nervous System): Uses four distinct Regular Expressions to validate length, lowercase, uppercase, and numbers. An event listener triggers on keyup to re-evaluate the password string and toggle the .valid classes on the checklist items.

Logic

The core logic is “Pattern-Driven Validation”:

var pattern = {
  charLength: () => password.value.length >= 7,
  lowercase: () => /^(?=.*[a-z]).+$/.test(password.value),
  uppercase: () => /^(?=.*[A-Z]).+$/.test(password.value),
  number: () => /^(?=.*[0-9]).+$/.test(password.value)
};

The logic is modular. By defining a pattern object containing test functions, the code remains clean and scalable. Each keyup event runs these four tests. The patternTest function then maps the boolean result (true/false) to the CSS class .valid on the corresponding DOM node. If all four items possess the .valid class, the character’s overall state shifts to “valid.”

Feel

Playful and secure. The typewriter font choice reinforces the idea of data entry, while the green “valid” checkmarks provide instant dopamine hits as you satisfy each requirement. The character illustration — reminiscent of 2D animation — makes the security process feel less like a technical barrier and more like an integral part of the user’s journey.