allow the user to check off which steps they've done

_includes/method.html

@@ -4,9 +4,12 @@
 		{%- assign tag = "h4" -%}
 	{%- endif -%}
 	<{{tag}}>Method</{{tag}}>
-	<ol>
-		{% for item in page.method -%}
-		<li>{{ item }}</li>
+	{%- assign name = page.name | downcase | url_encode -%}
+	<ol class='method' data-cb-prefix='check-{{ name }}'>
+	{% assign i = 1 -%}
+		{%- for item in page.method -%}
+		<li><input id='check-{{ name }}-{{ i }}' class='method-checkbox' data-number='{{ i }}' type='checkbox'><label for='check-{{ name }}-{{ i }}'>{{ item }}</label></li>
+		{%- assign i = i | plus: 1 -%}
 		{% endfor %}
 	</ol>
 {%- endif -%}

assets/script.js

@@ -1,3 +1,33 @@
+window.onload = function () {
+	Array.from(dgcn('method-checkbox')).forEach(checkbox => {
+		// uncheck all the checkboxes every time the page is reloaded
+		checkbox.checked = false;
+		checkbox.onclick = function () {
+			let num = parseInt(this.dataset.number);
+			let prefix = this.parentElement.parentElement.dataset.cbPrefix;
+			let max = this.parentElement.parentElement.children.length;
+
+			if (this.checked) {
+				// check everything before this - if you've done step 6, you've done steps 1-5
+				for (i = num - 1; i > 0; i--) {
+					dgel(`${prefix}-${i}`).checked = true;
+				}
+			} else {
+				// uncheck everything after this - you can't have done step 8 if you haven't done step 4
+				console.log(num + 1);
+				for (i = num + 1; i <= max; i++) {
+					console.log(i);
+					dgel(`${prefix}-${i}`).checked = false;
+				}
+			}
+		}
+	})
+}
+
+function dgcn(cn) {
+	return document.getElementsByClassName(cn);
+}
+
 function dgel(id) {
 	return document.getElementById(id);
 }

assets/style.css

@@ -124,7 +124,6 @@ li {
 	flex: 1 0 400px;
 	box-shadow: 0 0 3px #0003;
 	transition: 0.2s all;
-
 }
 .recipe-listing:hover {
 	box-shadow: 0 0 15px #0003;
@@ -137,6 +136,11 @@ a.recipe-listing {
 	background: none;
 }
 
+.method li input[type=checkbox]:checked + label {
+	color: grey;
+	text-decoration: line-through;
+}
+
 .excerpt {
 	color: grey;
 	position: relative;