stylescape/ts/utilities/FontPreview.ts

Stylescape is a visual identity framework developed by Scape Agency.

export class FontPreview {
    private inputElement: HTMLInputElement;
    private previewElements: HTMLElement[];

    constructor(inputSelector: string, previewSelector: string) {
        const input = document.querySelector<HTMLInputElement>(inputSelector);
        if (!input)
            throw new Error(`Input element "${inputSelector}" not found`);
        this.inputElement = input;

        this.previewElements = Array.from(
            document.querySelectorAll<HTMLElement>(previewSelector),
        );

        this.initialize();
    }

    private initialize(): void {
        this.inputElement.addEventListener("input", () =>
            this.updatePreviewText(),
        );

        // Optional: initialize with existing input value
        this.updatePreviewText();
    }

    private updatePreviewText(): void {
        const value =
            this.inputElement.value ||
            "The quick brown fox jumps over the lazy dog.";
        this.previewElements.forEach((el) => {
            el.textContent = value;
        });
    }
}