feat: add apply size btn

Author: alexeyKorelin

src/components/sizeUpdater.ts

@@ -0,0 +1,27 @@
+interface SizeUpdaterProps {
+    onChange: (size: number) => void
+}
+export const sizeUpdater = ({ onChange }: SizeUpdaterProps) => {
+    let size = 100
+    
+    const sizeUpdater = document.createElement('div')
+    const sizeInput = document.createElement('input')
+    sizeInput.type = 'number'
+    sizeInput.value = size.toString()
+
+    sizeInput.addEventListener('change', () => {
+        size = parseInt(sizeInput.value)
+    })
+
+    sizeUpdater.appendChild(sizeInput)
+
+    const sizeApplyButton = document.createElement('button')
+    sizeApplyButton.textContent = 'Apply size'
+    sizeUpdater.appendChild(sizeApplyButton)
+
+    sizeApplyButton.addEventListener('click', () => {
+        onChange(size)
+    })
+
+    return sizeUpdater
+}

src/main.ts

@@ -1,12 +1,10 @@
-import { test } from './test'
+import { sizeUpdater } from './components/sizeUpdater'
 
 const container = document.getElementById('app')
 
 if (container) {
-    const sizeInput = document.createElement('input')
-    sizeInput.type = 'number'
-    sizeInput.value = '100'
-    container.appendChild(sizeInput)
+    const sizeUpdaterElement = sizeUpdater({ onChange: console.log })
+    container.appendChild(sizeUpdaterElement)
 
     const canvas = document.createElement('canvas')
     canvas.width = 500