Merge pull request #3 from parasyte/css4-has

Use CSS4 `:has()` selector

Author: parasyte

index.css

@@ -140,6 +140,11 @@ footer > div {
   padding-block: unset;
 }
 
+#main:has(#filter-active:checked) task-item.complete,
+#main:has(#filter-complete:checked) task-item:not(.complete) {
+  display: none;
+}
+
 #clear-completed {
   appearance: none;
   background-color: var(--background-color);

index.js

@@ -48,10 +48,7 @@ NEW_TASK.addEventListener('keydown', (event) => {
 
 $('#add-task').addEventListener('click', add_task);
 
-$('#filter').addEventListener('change', () => {
-  MAIN.dataset.filter = $('input[name="filter"]:checked').value;
-  save();
-});
+$('#filter').addEventListener('change', save);
 
 $('#clear-completed').addEventListener('click', () => {
   for (const el of $$('task-item.complete')) {