backbone-password-strength.js

const PasswordView = Backbone.View.extend({
  events: {
    'input input': 'updatePassword'
  },

  updatePassword(e) {
    const pwd = e.target.value;
    const reqs = [
      ['8+ characters', pwd.length >= 8],
      ['12+ characters', pwd.length >= 12],
      ['Lowercase letter', /[a-z]/.test(pwd)],
      ['Uppercase letter', /[A-Z]/.test(pwd)],
      ['Number', /\d/.test(pwd)],
      ['Special character', /[^a-zA-Z0-9]/.test(pwd)]
    ];

    this.$('.space-y-2').html(reqs.map(([label, met]) => `
      <div class="flex items-center gap-2">
        <div class="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold
          ${met ? 'bg-green-500 text-white' : 'bg-gray-200 text-gray-400'}">
          ${met ? '✓' : ''}
        </div>
        <span class="text-sm ${met ? 'text-green-600 font-medium' : 'text-gray-500'}">
          ${label}
        </span>
      </div>
    `).join(''));
  },

  render() {
    this.$el.html(`
      <div class="w-80 p-6 bg-white rounded-xl shadow-lg space-y-4">
        <input type="password" placeholder="Enter password"
          class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2">

        <div class="space-y-2">
          ${['8+ characters', '12+ characters', 'Lowercase letter', 'Uppercase letter', 'Number', 'Special character'].map(label => `
            <div class="flex items-center gap-2">
              <div class="w-5 h-5 rounded-full flex items-center justify-center text-xs font-bold bg-gray-200 text-gray-400"></div>
              <span class="text-sm text-gray-500">${label}</span>
            </div>
          `).join('')}
        </div>
      </div>
    `);
    return this;
  }
});

// Initialize Backbone view after DOM is ready
$(() => {
  new PasswordView({ el: '#backbone-root' }).render();
});

I appreciate