Use plain HTML and CSS

1 files changed, 55 insertions, 0 deletions

diff --git a/public/main.js b/public/main.js
new file mode 100644
index 0000000..68deeee
--- /dev/null
+++ b/public/main.js
@@ -0,0 +1,55 @@
+window.onload = function() {
+
+  // Update ingredients amounts
+
+  let inputs = []
+  document.querySelectorAll('.number').forEach(function (number) {
+
+    // Install input
+    const value = parseInt(number.innerHTML)
+    number.innerHTML = `<input value="${value}">`
+
+    // Push to inputs
+    const element = number.children[0]
+    inputs.push({ element, value })
+
+    element.addEventListener('input', function() {
+
+      // Parse modified input value
+      const n = parseFloat(element.value.replace(',', '.')) || 0
+
+      if (!isNaN(n)) {
+        // Find current factor
+        const currentInput = inputs.find(function (input) {
+          return input.element === element
+        })
+        const factor = n / currentInput.value
+
+        // Apply factor to other inputs
+        inputs.forEach(function (input) {
+          if (input.element !== currentInput.element) {
+            input.element.value = formatNumber(factor * input.value)
+          }
+        })
+      }
+    })
+  })
+
+  // Set up done marks for steps
+
+  document.querySelectorAll('ol > li').forEach(function (item) {
+    item.addEventListener('click', function() {
+      item.className = item.className ? '' : 'completed'
+    })
+  })
+
+}
+
+function formatNumber(n) {
+  const xs = n.toString().split('.')
+  if (xs.length == 2) {
+    return `${xs[0]}.${xs[1].slice(0, 1)}`
+  } else {
+    return n
+  }
+}