Pure JS is Hard

Hey Everyone! So this one is suuuper late and it's not Rust :(. Previous related blog is here :)

Hacktoberfest Week 2

Antonio-Bennett ・ Oct 16 '21 ・ 2 min read

#opensource #hacktoberfest #rust #osd600

Project

So you might be wondering why did I say pure Javascript is hard...well that's because it is. Not hard in the sense of syntax and etc but when we start building complex apps that manage state etc it becomes annoying very quickly and you realize why we have frameworks. This project aims to create a todo app with pure JavaScript and eventlistener goodness.

Issue

The issue was that when a user enters tasks to do, there is no way of clearing only completed tasks.

PR

The PR can be found here if you want to just see it. First thing I did was creating a new button which only shows up with the clear task button as well.

First we add the button of course.

<a href="#" class="btn btn-sm btn-outline-danger clear-comp-tasks">Clear completed tasks</a>

Then place inside a function that shows the button only when the task list is greater than 2

if(tasks.length > 2) {
            document.querySelector('.clear-tasks').style.display = 'inline-block';
            document.querySelector('.clear-comp-tasks').style.display = 'inline-block';
            document.querySelector('.filter-wrapper').style.display = 'block';
}

Next is the functionality

First register the event listener to the button.

const clearCompTasks = document.querySelector(".clear-comp-tasks");
clearCompTasks.addEventListener("click", Tasklist.deleteAllCompleted);

Then the functionality

static deleteAllCompleted(){
        if(confirm('This will delete ALL completed tasks')) {
            tasks.forEach(task => {
              if(task.status === 'completed')
              document.querySelector(`[data-id="${task.date}"]`).remove();
            });
            tasks = tasks.filter(task => task.status !== 'completed');
            localStorage.setItem('tasks', JSON.stringify(tasks));
            Tasklist.filter();
        }
}

Overall Thoughts

I realize why everyone loves JavaScript frameworks even more now. As complexity of the app goes up, state management becomes a pain in pure js. It is still fun figuring stuff out though.