Issue with filtering tasks in a Task Tracker application

Question

Issue with filtering tasks in a Task Tracker application

Hey there! I'm new to JavaScript and I've been working on a todo app. Everything seems to be running smoothly except for the filter function, which I just can't seem to get working no matter what I try. I previously had a similar app with materialize that worked perfectly fine.

I've attempted using task.style.display and task.className, but unfortunately, it didn't work out as expected.

CHECK OUT THE DEMO HERE: https://codepen.io/salma-py97/pen/mdOdLvo?editors=1010

Here's a glimpse of the HTML included in my project:

  <body class="bg-secondary">
      <div class="container">
          <div class="row">
              ...

And here's some of the JavaScript code in action:

// Define UI Variables
const form = document.querySelector('#task-form');
const taskInput = document.querySelector('#task-input');
...

javascript bootstrap-4

Answer 1

Answer №1

The concept of utilizing a single data source

resonates deeply with me as well as the principle of DRY (Don't Repeat Yourself)

const form = document.querySelector('#task-form');
const taskInput = document.querySelector('#task-input');
const filter = document.querySelector('#filter-tasks')
const taskList = document.querySelector("#task-list");
const clearBtn= document.querySelector("#clear-tasks");

class Tasks {
  constructor(taskList) {
    this.taskList = taskList;
    this.tasks=[];
    this.loadTasks();
    this.drawTasks();
  }

  loadTasks(){
    const stored = (localStorage.getItem("tasks"));
    this.tasks = stored ? JSON.parse(stored) : [];
  }   

  createTaskLI(task){
    const li = document.createElement('li');
    li.className = 'list-group-item d-flex justify-content-between'
    li.appendChild(document.createTextNode(task));
    const link = document.createElement('a');
    link.className='delete-item';
    link.innerHTML = '<i class= "fa fa-remove"></i>';
    li.appendChild(link);
    this.taskList.appendChild(li);
  }

  drawTasks() {
    this.tasks.forEach((task) => {
      this.createTaskLI(task)
    })       
  }
  
  clearTasks = () =>{
    this.taskList.innerHTML="";
    this.tasks=[];
    localStorage.clear();
  }
  
  addTask = (e) => {
    e.preventDefault()
    if(taskInput.value === ""){
      alert("Add task");
    } else {
      this.createTaskLI(taskInput.value)
      this.tasks.push(taskInput.value);
      this.UpdateLocalStorage();
      taskInput.value='';
    }        
  }
  
  removeTask = (e) => {
    if (e.target.parentElement.classList.contains('delete-item')){
      const item = e.target.parentElement.parentElement;
      const parent = item.parentElement;
      const index = [...parent.children].indexOf(item);
      item.remove();
      this.tasks.splice(index, 1);
      this.UpdateLocalStorage();
    }
  }

  UpdateLocalStorage(){
    localStorage.setItem("tasks", JSON.stringify(this.tasks));
  }

  filterTasks = (e) => {
    const text = e.target.value.toLowerCase();
    
    document.querySelectorAll('.list-group-item')
      .forEach((task, index) => {
        const condition = (text === "" || this.tasks[index].includes(text)) 
        task.classList.add(condition ? "d-flex" : "d-none");
        task.classList.remove(condition ? 'd-none': "d-flex");  
    })
  }
}

const tasks = new Tasks(taskList);
loadEventListeners();

function loadEventListeners(){
  form.addEventListener('submit', tasks.addTask);
  taskList.addEventListener('click', tasks.removeTask );
  filter.addEventListener('keyup', tasks.filterTasks);
  clearBtn.addEventListener('click', tasks.clearTasks)
}

Answer 2

The concept of utilizing a single data source

resonates deeply with me as well as the principle of DRY (Don't Repeat Yourself)

const form = document.querySelector('#task-form');
const taskInput = document.querySelector('#task-input');
const filter = document.querySelector('#filter-tasks')
const taskList = document.querySelector("#task-list");
const clearBtn= document.querySelector("#clear-tasks");

class Tasks {
  constructor(taskList) {
    this.taskList = taskList;
    this.tasks=[];
    this.loadTasks();
    this.drawTasks();
  }

  loadTasks(){
    const stored = (localStorage.getItem("tasks"));
    this.tasks = stored ? JSON.parse(stored) : [];
  }   

  createTaskLI(task){
    const li = document.createElement('li');
    li.className = 'list-group-item d-flex justify-content-between'
    li.appendChild(document.createTextNode(task));
    const link = document.createElement('a');
    link.className='delete-item';
    link.innerHTML = '<i class= "fa fa-remove"></i>';
    li.appendChild(link);
    this.taskList.appendChild(li);
  }

  drawTasks() {
    this.tasks.forEach((task) => {
      this.createTaskLI(task)
    })       
  }
  
  clearTasks = () =>{
    this.taskList.innerHTML="";
    this.tasks=[];
    localStorage.clear();
  }
  
  addTask = (e) => {
    e.preventDefault()
    if(taskInput.value === ""){
      alert("Add task");
    } else {
      this.createTaskLI(taskInput.value)
      this.tasks.push(taskInput.value);
      this.UpdateLocalStorage();
      taskInput.value='';
    }        
  }
  
  removeTask = (e) => {
    if (e.target.parentElement.classList.contains('delete-item')){
      const item = e.target.parentElement.parentElement;
      const parent = item.parentElement;
      const index = [...parent.children].indexOf(item);
      item.remove();
      this.tasks.splice(index, 1);
      this.UpdateLocalStorage();
    }
  }

  UpdateLocalStorage(){
    localStorage.setItem("tasks", JSON.stringify(this.tasks));
  }

  filterTasks = (e) => {
    const text = e.target.value.toLowerCase();
    
    document.querySelectorAll('.list-group-item')
      .forEach((task, index) => {
        const condition = (text === "" || this.tasks[index].includes(text)) 
        task.classList.add(condition ? "d-flex" : "d-none");
        task.classList.remove(condition ? 'd-none': "d-flex");  
    })
  }
}

const tasks = new Tasks(taskList);
loadEventListeners();

function loadEventListeners(){
  form.addEventListener('submit', tasks.addTask);
  taskList.addEventListener('click', tasks.removeTask );
  filter.addEventListener('keyup', tasks.filterTasks);
  clearBtn.addEventListener('click', tasks.clearTasks)
}

Answer 3

Answer №2

Utilizing the filterTasks function effectively adds classes, however, neglects to remove them when necessary. It is crucial to address the removal of these classes in order to maintain proper functionality.

if(item.toLowerCase().indexOf(text) != -1){
    task.classList.remove("d-none");
    task.classList.add("d-block");
// else hide task
} else {
    task.classList.remove("d-block");
    task.classList.add("d-none");
}

Consider utilizing classList.toggle as a more efficient alternative in this scenario.

Answer 4

Utilizing the filterTasks function effectively adds classes, however, neglects to remove them when necessary. It is crucial to address the removal of these classes in order to maintain proper functionality.

if(item.toLowerCase().indexOf(text) != -1){
    task.classList.remove("d-none");
    task.classList.add("d-block");
// else hide task
} else {
    task.classList.remove("d-block");
    task.classList.add("d-none");
}

Consider utilizing classList.toggle as a more efficient alternative in this scenario.

Answer 5

Answer №3

Success at last!

function siftThroughTasks(event){
    // Compare the tasks in the list and the input in the filter
    const searchTerm = event.target.value.toLowerCase();
    
    // Loop through all the list items
    document.querySelectorAll('.list-group-item').forEach(function(taskItem){
        const taskText = taskItem.firstChild.textContent;
        
        // If the filter matches a task, display it
        if(taskText.toLowerCase().indexOf(searchTerm) != -1){
            taskItem.className = "list-group-item d-flex justify-content-between";
        } else {
            // Otherwise, hide the task
            taskItem.classList.remove("d-flex");
            taskItem.classList.add("d-none");
        }
    })

    event.preventDefault();

}

Answer 6

Success at last!

function siftThroughTasks(event){
    // Compare the tasks in the list and the input in the filter
    const searchTerm = event.target.value.toLowerCase();
    
    // Loop through all the list items
    document.querySelectorAll('.list-group-item').forEach(function(taskItem){
        const taskText = taskItem.firstChild.textContent;
        
        // If the filter matches a task, display it
        if(taskText.toLowerCase().indexOf(searchTerm) != -1){
            taskItem.className = "list-group-item d-flex justify-content-between";
        } else {
            // Otherwise, hide the task
            taskItem.classList.remove("d-flex");
            taskItem.classList.add("d-none");
        }
    })

    event.preventDefault();

}

Issue with filtering tasks in a Task Tracker application

Answer №1

Answer №2

Answer №3

Similar questions

Tips for testing parallel, mocked data requests in JEST by simulating cached responses with a 500ms limit

Issues with navigation drawer not functioning

Interval function not initiating properly post bullet navigation activation

Stopping npm private organization from releasing public packages

Troubleshooting Problems with Adjusting Left Margin Using JQuery

Refresh your HTML by reloading the JavaScript source

What is the best method for storing a JavaScript widget with analytics - should it be done dynamically or statically?

Concurrent Accordion and Color Transformation Animations

Error: When executing the npm run build command, I encountered a TypeError stating that Ajv is not a

Changing a table cell's value when a button is clicked using Angular

How can I transfer information or a variable between React components?

The Bootstrap DateTime Picker is not displaying correctly; it appears to be hidden behind the screen

Activate the Giphy search feature in the Slack Nestor bot's response

Is there a way to use CSS to generate a disappearing triangle-shaped div that will only vanish when clicked directly on the triangle and not when clicked on the surrounding overflow area?

Is it possible to integrate a JavaScript library into the Vue prototype?

When the property "a" is set to true, it must also require the properties "b" and "c" to be included

What is the best way to integrate node.js with HTML?

Navigation bar with a divider line along with an accompanying image

How to set up a function to detect column resizing within the Angular UI-

The error "TypeError: ollama.chat is not a function" has occurred when trying to use the ollama module in