title: Trying to do a filter for a to-do list app in Javascript but struggling
body: <p>I have a to-do list and it is working just fine but I'm trying to filter it but I'm struggling a little bit.
  Basically, every task is an object every object has  text, id, and checked properties.
  I want for example  to display only the tasks that are not checked when I press Active.</p>
  <p>I hope you can help.
  Here is an image for more clarification:</p>
  <p><img src="https://i.stack.imgur.com/thsNp.jpg" alt="Ui image" /></p>
  <pre><code>
  /*  Selectors  */
  const switcher = document.querySelector(' input[Type=&quot;checkbox&quot;]');
  const body = document.body;
  const formT = document.querySelector(`[data-new-todo-form]`)
  const inputT = document.querySelector(`[data-new-todo-input]`)
  const todoList = document.getElementById('todo-list');
  const filterList = document.querySelector('.controls-list')
  
  /* array that holds tasks */
  let tasks = [];
  
  
  /*  EVENT LISTENERS */
  switcher.addEventListener('change', (e) =&gt; {
      if(e.target.checked) {
          body.classList.replace('light', 'dark')
      } else {
          body.classList.replace('dark', 'light')
      }
  
  })
  
  
  formT.addEventListener('submit', e =&gt; {
      e.preventDefault()
      
      let text = inputT.value.trim();
      if(text !== '') {
         addTask(text);
         inputT.value = '';
         inputT.focus();
  
      } 
   
  })
  
  
  todoList.addEventListener('click', e =&gt; {
      if (e.target.classList.contains('js-tick')) {
          const itemKey = e.target.parentElement.dataset.key;
          toggleDone(itemKey);
          
      }
  
      if (e.target.classList.contains('delete')) {
          const itemKey = e.target.parentElement.dataset.key;
          deleteTodo(itemKey);
          counter();
        }
  
        
      
  });
  
  
  document.addEventListener('DOMContentLoaded', () =&gt; {
      const ref = localStorage.getItem('tasksRef');
      if (ref) {
        tasks = JSON.parse(ref);
        tasks.forEach(task =&gt; {
          renderTodo(task);
          counter();
        });
      }
    });
  
  
  
    /* FUNCTIONS */
  
  /* create a todo object */
  const addTask = (text) =&gt; {
      const todoTask = {
          text,
          checked: false,
          id: Date.now(),
      }
      tasks.push(todoTask);
      renderTodo(todoTask);
  
  };
  
  
  const renderTodo = (todoTask)=&gt; {
  
      localStorage.setItem('tasksRef', JSON.stringify(tasks));
  
      
      const item = document.querySelector(`[data-key='${todoTask.id}']`);
  
      if (todoTask.deleted) {
          // remove the item from the DOM
          item.remove();
          return
        }
  
      const isChecked = todoTask.checked ? 'done': '';
  
      const node = document.createElement('li')
      node.setAttribute('class', `todo-item ${isChecked}`);
      node.setAttribute('data-key', todoTask.id);
      node.innerHTML = `
      
      &lt;input class=&quot;js-tick&quot; id=&quot;${todoTask.id}&quot; type=&quot;checkbox&quot; ${isChecked ? &quot;checked&quot; : &quot;&quot;}/&gt;
      &lt;span&gt;${todoTask.text}&lt;/span&gt;
      &lt;img class=&quot;delete&quot; width=&quot;15px&quot; height='15px' src=&quot;/images/icon-cross.svg&quot; alt=&quot;cross&quot;&gt;`
      ;
      todoList.append(node);
  
      if (item) {
          node.replaceWith(item)
      } else {
          todoList.append(node)
      }
      counter();
  
  }
  
  
  const toggleDone = (key) =&gt; {
      
      const index = tasks.findIndex(task=&gt; task.id === Number(key));
  
      tasks[index].checked = !tasks[index].checked;
      renderTodo(tasks[index]);
  }
  
  const deleteTodo = (key) =&gt; {
      const index = tasks.findIndex(item =&gt; item.id === Number(key));
  
  
      const todoTask = {
          deleted: true,
          ...tasks[index]
        };
        tasks = tasks.filter(item =&gt; item.id !== Number(key));
    renderTodo(todoTask);
  }
  
  
  const counter = () =&gt; {
      const itemsCounter =  tasks.filter(task=&gt; !task.checked)
      const count = document.getElementById('todosLeft');
  
      const counterString = itemsCounter.length === 1 ? 'item' : 'items'
  
   count.innerText = `${itemsCounter.length} ${counterString} left`
  
  }
  </code></pre>
  <p>Here is the HTML:</p>
  <pre><code>&lt;body class=&quot;light&quot;&gt;
    &lt;section class=&quot;header&quot;&gt;
      
    &lt;/section&gt;
    &lt;div class=&quot;container&quot;&gt;
  
    &lt;div class=&quot;title-theme&quot;&gt;
      &lt;h1&gt;Todo&lt;/h1&gt;
      &lt;input type=&quot;checkbox&quot; id=&quot;switch-l&quot; class=&quot;themeSwitch&quot;&gt;
      &lt;label for=&quot;switch-l&quot; id=&quot;switch&quot; class=&quot;themeSwitch-label&quot;&gt;&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class=&quot;todosInput&quot;&gt;
      &lt;div id=&quot;mark&quot;&gt;&lt;/div&gt;
      &lt;form class=&quot;form&quot; action=&quot;&quot; data-new-todo-form&gt;
        &lt;input id=&quot;todos&quot; data-new-todo-input type=&quot;text&quot; placeholder=&quot;Create a new todo...&quot; &gt;
      &lt;/form&gt;
    &lt;/div&gt;
      &lt;div class=&quot;myTodos&quot;&gt;
        &lt;ul id=&quot;todo-list&quot;&gt;
      &lt;--! THE TASKS GOES HERE !--&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
   &lt;div class=&quot;controls&quot;&gt;
      &lt;p id=&quot;todosLeft&quot;&gt;items left&lt;/p&gt;&lt;!-- Add dynamic number --&gt; 
      &lt;div class=&quot;controls-list-div&quot;&gt;
        &lt;ul class=&quot;controls-list&quot; data-lists&gt;
          &lt;li&gt;All&lt;/li&gt; 
          &lt;li&gt;Active&lt;/li&gt; 
          &lt;li&gt;Completed&lt;/li&gt; 
          &lt;/ul&gt;
      &lt;/div&gt;
     Clear Completed
     
    &lt;/div&gt; 
  &lt;/div&gt;
    &lt;div class=&quot;instruc&quot;&gt;
      &lt;p&gt;Drag and drop to reorder list&lt;/p&gt;
    &lt;/div&gt;   
  
  </code></pre>