javascript 55 lines · 7 steps

Building an accessible star-rating widget

A vanilla-JS class renders interactive stars and keeps hover, selection, and ARIA state in sync through a single paint method.

Explained by highlit

Intermediate dom event-handling accessibility state-management ui-components

1class StarRating {
constructor(container, { max = 5, value = 0, onChange } = {}) {
  this.container = container;
  this.max = max;
  this.value = value;
  this.hovered = 0;
  this.onChange = onChange;
  this.render();
  this.bindEvents();
}
11 
render() {
  this.container.classList.add('star-rating');
  this.container.innerHTML = Array.from({ length: this.max }, (_, i) =>
    `<span class="star" data-index="${i + 1}" role="radio" tabindex="0" aria-label="${i + 1} star">\u2605</span>`
  ).join('');
  this.stars = [...this.container.querySelectorAll('.star')];
  this.paint();
}
20 
bindEvents() {
  this.stars.forEach((star) => {
    const index = Number(star.dataset.index);
    star.addEventListener('mouseenter', () => {
      this.hovered = index;
      this.paint();
    });
    star.addEventListener('click', () => this.select(index));
    star.addEventListener('keydown', (e) => {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        this.select(index);
      }
    });
  });
  this.container.addEventListener('mouseleave', () => {
    this.hovered = 0;
    this.paint();
  });
}
41 
select(index) {
  this.value = this.value === index ? index - 1 : index;
  this.paint();
  this.onChange?.(this.value);
}
47 
paint() {
  const active = this.hovered || this.value;
  this.stars.forEach((star, i) => {
    star.classList.toggle('filled', i < active);
    star.setAttribute('aria-checked', String(i + 1 === this.value));
  });
}
55}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Routing every visual update through one paint method keeps hover and selection state consistent without scattered DOM writes.
2Building interactive DOM from a data array lets index metadata drive both rendering and event logic.
3Adding role, tabindex, and aria-checked makes a custom widget usable by keyboard and screen readers.

Related explainers

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

const express = require('express');
const EventEmitter = require('events');
 
const router = express.Router();

Server-Sent Events with Express

server-sent-events streaming event-emitter

Advanced 8 steps

javascript

import { useState, useEffect, useCallback } from 'react';
 
export function useCountdown(initialSeconds) {
  const [secondsLeft, setSecondsLeft] = useState(initialSeconds);

Building a useCountdown hook in React

custom-hooks state-management side-effects

Intermediate 8 steps

typescript

import { Injectable, signal, computed } from '@angular/core';
 
export type ToastKind = 'success' | 'error' | 'info' | 'warning';

Building a signal-based toast service in Angular

signals state-management dependency-injection

Intermediate 8 steps

typescript

type LazyImageOptions = {
  rootMargin?: string;
  loadedClass?: string;
};

Lazy-loading images with IntersectionObserver

intersectionobserver lazy-loading performance

Intermediate 7 steps

javascript

import { useState, useRef } from "react";
 
export function TagInput({ initialTags = [], onChange }) {
  const [tags, setTags] = useState(initialTags);