Add input control

ngdangtu-vn · ngdangtu-vn · commit 48ceaba238ff · 2020-10-02T13:23:54.000+07:00
diff --git a/Patterns/hollowRhombus/index.html b/Patterns/hollowRhombus/index.html
@@ -18,27 +18,47 @@
             background-color: #ededed;
         }
 
-        pre {
+        #controller {
+            width: 100%
+        }
+
+        #console {
             font-family: 'Courier New', Courier, monospace;
             color: #ececec;
             background-color: #30475e;
             border: 1px solid #222831;
             border-radius: 2px;
-            padding: 17px 13px 10px
+            padding: 19px 17px 10px
         }
     </style>
     <script src='hollowRhombus.js'></script>
+    <script>
+        const draw = (input, output) => {
+            const shape = generateCanvas(
+                { width: input.value, height: input.value },
+                { hollow: ' ', solid: '*' }
+            )
+            output.innerHTML = shape
+        }
+    </script>
 </head>
 
 <body>
-    <pre id='main'></pre>
+    <main>
+        <form id='input'>
+            <input type='range' name='controller' id='controller' value='9' min='1' max='19' step='2'>
+        </form>
+        <pre id='console'></pre>
+    </main>
 </body>
 <script>
-    const shape = generateCanvas(
-        { width: 9, height: 9 },
-        { hollow: ' ', solid: '*' }
-    )
-    document.querySelector('#main').innerHTML = shape
+    const input = document.querySelector('#controller')
+    const output = document.querySelector('#console')
+    draw(input, output)
+    input.addEventListener(
+        'change',
+        e => draw(e.target, output)
+    ) 
 </script>
 
 </html>
