Allow to check recipe steps

3 files changed, 47 insertions, 24 deletions

diff --git a/dev b/dev
index b7eddfe..c8742c5 100755
--- a/dev
+++ b/dev
@@ -17,7 +17,6 @@ elif [ "$CMD" = "watch-ts" ]; then
     --watch \
     --pretty \
     --sourceMap \
-    --removeComments \
     --strict \
     --noUnusedLocals \
     --noUnusedParameters \
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
 }
 
diff --git a/static/main.css b/static/main.css
index 5aa2008..e19d1ac 100644
--- a/static/main.css
+++ b/static/main.css
@@ -2,6 +2,7 @@
   --color-title: rgb(113, 68, 30);
   --color-link: rgb(13, 13, 81);
   --color-number: rgb(230, 230, 230);
+  --color-completed: #58b058;
   --base-font-size: 18px;
 }
 
@@ -61,6 +62,7 @@ body {
 
 .g-Page__Recipes {
   list-style-type: none;
+  padding-left: 1rem;
 }
 
 .g-Page__Recipe {
@@ -134,3 +136,11 @@ h2 {
   width: 1.5rem;
   text-align: center;
 }
+
+.g-Recipe ol > li:hover {
+  cursor: pointer;
+}
+
+.g-Recipe ol > li.g-Recipe__Completed::before {
+  background-color: var(--color-completed);
+}