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
        })
    }
}