Категория в JavaScript с использованием ввода

let taskForm = document.tasks;
taskForm.onsubmit = e => {
  e.preventDefault();
  let taskData = new FormData(taskForm);
  let category = taskData.get("category");
  
  let result = document.querySelector(".tasks");
  let task = document.createElement('div');
  let filterTask = document.querySelector('input[name = "filter"]:checked');
  task.appendChild(document.createTextNode(taskData.get("task")));
  task.dataset.group = category;
  task.classList.add("task");
  task.style.display = ["all", category].includes(filterTask.value) ? "block" : "none"; 
  result.appendChild(task);
}

let showTasks = document.getElementsByName("filter");
showTasks.forEach(el => {
  el.addEventListener("click", e => {
    tasks = document.querySelectorAll(".task");
    tasks.forEach(task => {
      task.style.display = ["all", task.dataset.group].includes(e.target.value) ? "block" : "none";
    });
  });
});

input[type = "radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

input[type = "radio"] ~ label {
  display: inline-block;
  background-color: #ddd;
  padding: 5px 20px;
  font-family: sans-serif, Arial;
  font-size: 16px;
  border: 2px solid #444;
  border-radius: 4px;
}

input[type = "radio"] ~ label:hover {
  background-color: #dfd;
}

input[type = "radio"]:checked + label {
  background-color: #bfb;
  border-color: #4c4;
}

<div>
  <form name = "tasks">
    <label for = "name">Assigned Task</label>
    <input name = "task" type = "text" required />

    <label for = "category">Category</label>
    <select name = "category">
      <option value = "school" selected>School</option>
      <option value = "work">Work</option>
    </select>

    <input type = "submit" value = "Add" />
  </form>

  <h3>Task To</h3>

  <input name = "filter" id = "all" type = "radio" value = "all" checked />
  <label for = "all">All</label>

  <input name = "filter" id = "school" type = "radio" value = "school" />
  <label for = "school">School</label>

  <input name = "filter" id = "work" type = "radio" value = "work" />
  <label for = "work">Work</label>

  <h2>Tasks</h2>
  <div class = "tasks"></div>
</div>