feat: set up font size

index.html

@@ -10,6 +10,8 @@
             <form class="settings" action="#">
                 <label for="title">Title:</label>
                 <textarea id="title" rows="8">Hello world</textarea>
+                <label for="font">Font size:</label>
+                <input id="font" type="number" value="80" />
             </form>
             <div class="preview">
                 <svg

src/main.ts

@@ -1,4 +1,5 @@
 import { BACKGROUND, STRIPE_COLORS, TEXT_COLOR } from "./constants";
+import { SettingsManager } from "./settings";
 import { SvgBuilder } from "./svg";
 
 import "./style.css";
@@ -9,17 +10,19 @@ if (!svg) {
     throw new Error("Cannot find SVG");
 }
 
-const inputTextArea = document.querySelector<HTMLTextAreaElement>("textarea");
+const form = document.querySelector<HTMLFormElement>("form");
 
-if (!inputTextArea) {
-    throw new Error("No text area");
+if (!form) {
+    throw new Error("Cannot find form");
 }
 
-inputTextArea.addEventListener("input", () => {
+const settings = new SettingsManager(form);
+
+settings.onTitleChange((data) => {
     cover.setTitle({
-        text: inputTextArea.value,
+        text: data.title,
         color: TEXT_COLOR,
-        fontSize: 80,
+        fontSize: data.fontSize,
     });
 });
 
@@ -28,4 +31,4 @@ const cover = new SvgBuilder(svg);
 cover
     .setBackground(BACKGROUND)
     .addStripes(STRIPE_COLORS)
-    .setTitle({ text: inputTextArea.value, color: TEXT_COLOR, fontSize: 80 });
+    .setTitle({ text: settings.title, color: TEXT_COLOR, fontSize: 80 });

src/settings.ts

@@ -0,0 +1,59 @@
+type SettingsData = {
+    title: string;
+    fontSize: number;
+};
+
+interface SettingsChangeHandler {
+    (data: SettingsData): void;
+}
+
+const DEFAULT_FONT_SIZE = 80;
+
+export class SettingsManager {
+    private readonly textarea: HTMLTextAreaElement;
+    private readonly fontSizeInput: HTMLInputElement;
+
+    constructor(private readonly form: HTMLFormElement) {
+        const inputTextArea =
+            this.form.querySelector<HTMLTextAreaElement>("textarea");
+
+        if (!inputTextArea) {
+            throw new Error("Cannot find text area");
+        }
+
+        this.textarea = inputTextArea;
+
+        const fontSizeInput =
+            this.form.querySelector<HTMLInputElement>("#font");
+
+        if (!fontSizeInput) {
+            throw new Error("Cannot find font-size input");
+        }
+
+        this.fontSizeInput = fontSizeInput;
+    }
+
+    onTitleChange(callback: SettingsChangeHandler) {
+        this.textarea.addEventListener("input", () => {
+            callback({
+                title: this.title,
+                fontSize: this.fontSize,
+            });
+        });
+
+        this.fontSizeInput.addEventListener("change", () => {
+            callback({
+                title: this.title,
+                fontSize: this.fontSize,
+            });
+        });
+    }
+
+    get title() {
+        return this.textarea.value;
+    }
+
+    get fontSize() {
+        return parseInt(this.fontSizeInput.value, 10) || DEFAULT_FONT_SIZE;
+    }
+}