aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rwxr-xr-xdev1
-rw-r--r--main.ts60
-rw-r--r--static/main.css10
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);
+}