diff --git a/sass/_lists.scss b/sass/_lists.scss
index 198a1fe..22ccd88 100644
--- a/sass/_lists.scss
+++ b/sass/_lists.scss
@@ -18,5 +18,7 @@ ol {
 			font-size:2em;
 			color:$primary;
 		}
+
+		&.completed { opacity: .4; }
 	}
 }
diff --git a/templates/index.html b/templates/index.html
index 2c57971..142b7db 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -65,5 +65,6 @@
 	</main>
 	{% endblock content %}
 
+	{% block script %}{% endblock script %}
 </body>
 </html>
diff --git a/templates/page.html b/templates/page.html
index 680b16e..d76c2b1 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -47,3 +47,12 @@
 
 </main>
 {% endblock content %}
+
+{% block script %}
+<script>
+	let list_items = document.querySelectorAll('ol li');
+	for(let i=0; i<list_items.length; i++){
+		list_items[i].addEventListener('click', function(){ this.classList.toggle("completed"); }, false);
+	}
+</script>
+{% endblock script %}