Integrate inputs better in the pagemain

1 files changed, 21 insertions, 4 deletions

diff --git a/public/main.js b/public/main.js
index b79f2b6..80af905 100644
--- a/public/main.js
+++ b/public/main.js
@@ -13,6 +13,9 @@ window.onload = function() {
     const element = number.children[0]
     inputs.push({ element, value })
 
+    // Adjust width to content
+    adjustInputWidthToContent(element)
+
     element.addEventListener('input', function() {
 
       // Parse modified input value
@@ -29,6 +32,8 @@ window.onload = function() {
         inputs.forEach(function (input) {
           if (input.element !== currentInput.element) {
             input.element.value = formatNumber(factor, input.value)
+            adjustInputWidthToContent(element)
+            adjustInputWidthToContent(input.element)
           }
         })
       }
@@ -37,11 +42,13 @@ window.onload = function() {
 
   // Set up done marks for steps
 
-  document.querySelectorAll('ol > li').forEach(function (item) {
-    item.addEventListener('click', function() {
-      item.className = item.className ? '' : 'completed'
+  document.querySelectorAll('ol > li').forEach(item => {
+    item.addEventListener('click', event => {
+      if (event.target.tagName !== 'INPUT') {
+        item.className = item.className ? '' : 'completed'
+      }
     })
-  })
+})
 
 }
 
@@ -70,3 +77,13 @@ function precision(value) {
     return xs[1].length
   }
 }
+
+function adjustInputWidthToContent(element) {
+    if (element.value.length === 0) {
+        element.style['width'] = `1ch`
+        element.style['background-color'] = `red`
+    } else {
+        element.style['width'] = `${element.value.length}ch`
+        element.style['background-color'] = `transparent`
+    }
+}