Allow to check recipe steps

1 files changed, 37 insertions, 23 deletions

diff --git a/main.ts b/main.ts
index 9e1a3bb..fef633a 100644
--- a/main.ts
+++ b/main.ts
@@ -1,12 +1,25 @@
+/* Set up done marks for steps */
+
+nodeListToArray(document.querySelectorAll('.g-Recipe ol > li')).forEach(todo => {
+  todo.onclick = e => {
+    toggleClassName(todo, 'g-Recipe__Completed')
+    e.stopPropagation()
+  }
+})
+
+function toggleClassName(node: Element, className: string) {
+  if (node.className === className) {
+    node.className = ''
+  } else {
+    node.className = className
+  }
+}
+
+/* Set up inputs for the ingredients */
+
 const itemEntries =
   nodeListToArray(document.querySelectorAll('.g-Recipe ul > li'))
-    .map(function(itemNode) {
-      return {
-        tag: 'li',
-        node: itemNode
-      };
-    })
-
+    .map(itemNode => ({ tag: 'li', node: itemNode }))
 
 const h1 = document.querySelector<HTMLElement>('.g-Recipe h1')
 
@@ -20,16 +33,14 @@ if (h1 !== null) {
 
 const inputs = setInputs(itemEntries)
 
-inputs.map(function(input) {
-  input.node.oninput = function(e) {
+inputs.map(input => {
+  input.node.oninput = e => {
     if (e.target !==null) {
       const parsed: ParsedNumber | undefined = parseNumber((e.target as HTMLInputElement).value)
 
       if (parsed !== undefined && parsed.before === '' && parsed.after === '') {
         const factor = parsed.number / input.number
-        inputs.map(function(input2) {
-          input2.node.value = prettyPrintNumber(input2.number * factor)
-        })
+        inputs.map(input2 => input2.node.value = prettyPrintNumber(input2.number * factor))
       }
     }
   }
@@ -40,25 +51,30 @@ interface InputEntry {
   node: HTMLElement;
 }
 
-function setInputs(xs: Array<InputEntry>) {
-  const res = []
+interface InputResult {
+  number: number,
+  node: HTMLInputElement
+}
+
+function setInputs(xs: Array<InputEntry>): Array<InputResult> {
+  const res: Array<InputResult> = []
 
-  for (var i = 0; i < xs.length; i++) {
-    const parsed = parseNumber(xs[i].node.innerText)
+  xs.forEach(x => {
+    const parsed = parseNumber(x.node.innerText)
 
     if (parsed !== undefined) {
-      const numberNode = parsedNumberNode(xs[i].tag, parsed)
-      const parentNode = xs[i].node.parentNode
+      const numberNode = parsedNumberNode(x.tag, parsed)
+      const parentNode = x.node.parentNode
 
       if (parentNode) {
-        parentNode.replaceChild(numberNode.all, xs[i].node)
+        parentNode.replaceChild(numberNode.all, x.node)
         res.push({
           number: parsed.number,
           node: numberNode.number
         })
       }
     }
-  }
+  })
 
   return res
 }
@@ -141,9 +157,7 @@ function isDigit(c: string) {
 
 function nodeListToArray(nodeList: NodeListOf<HTMLElement>): Array<HTMLElement> {
   const xs: Array<HTMLElement> = [];
-  nodeList.forEach(function(node) {
-    xs.push(node)
-  })
+  nodeList.forEach(node => xs.push(node))
   return xs
 }