#dom-events code explainers

javascript

const zxcvbn = require('zxcvbn');
 
const STRENGTH_LABELS = ['Very weak', 'Weak', 'Fair', 'Strong', 'Very strong'];
const STRENGTH_COLORS = ['#d64545', '#e0803c', '#d9c94c', '#5aa84f', '#2f8f3a'];

Building a live password strength meter

debounce closures dom-events

Intermediate 8 steps

javascript

function hexToRgb(hex) {
  const normalized = hex.replace(/^#/, '');
  const full = normalized.length === 3
    ? normalized.split('').map((c) => c + c).join('')

Building a two-way color picker in JS

bitwise dom-events data-conversion

Intermediate 9 steps

javascript

function formatPhoneNumber(value) {
  const digits = value.replace(/\D/g, '').slice(0, 10);
  const parts = [];

Building a live phone number input mask

input-masking regex dom-events

Intermediate 7 steps

javascript

const form = document.querySelector('#signup-form');
const password = form.querySelector('#password');
const confirm = form.querySelector('#confirm-password');
const submit = form.querySelector('button[type="submit"]');

Live password-match validation in the DOM

form-validation dom-events accessibility

Intermediate 6 steps

javascript

function createAutocomplete(input, resultsList, { minChars = 2, delay = 300 } = {}) {
  let timer = null;
  let controller = null;

Building a debounced autocomplete widget

debouncing abortcontroller closures

Intermediate 9 steps