Fully Functional Todo App with Vanilla js
By: Puneet Tiwari
Tags: JavaScript, To Do List App, Todo, Vanillajs, Learning To Code

This is our third and one of the most important functionality

Here, our first step gonna be is to subscribe a 'click' event to the checbox, which we named as input, with a callBack function toggle.

Whenever the user will click on a checkbox, it will send an event to our toggle function.

In toggle, we are putting a map on our array with a condition that if the dataset key of the target is equal to the ‘id’ property of todo, then it will change its completed property to the opposite of what it is already.

If it is true, we will make it false and vice-versa.

At the same time, we gonna replace our old array by our newly obtained array.

And rendering it by calling our render method and updating local storage is mandatory.

***Its imporatnt to call this function inside our forEach method which is already inside our rendor method.

To keep our checkbox always update, whenever we will refresh, do not forget to add this in our render method

hurrrrayyyyyyyyyy!!!!!!

We have completed our three main functionalities of the todo app.

Let’s add a few more features to it.

Items left, fourth functionality

This is not exactly a function but its gonna be a feature of our todo app, it will show us no. of items lefts which we didn’t mark completed.

Have a look at the above image, this is what we gonna do and yes, I have already done all the styling part and gave the link in starting of article.

Believe me, this is going to be very simple. We just have to keep updating it with the length of the array including only those which have completed property as false.

Yes, using the filter method will be a good idea.

Let’s do it.

Yes, the code is really small, just put a filter get the length and update it.

***Dont forget to invoke the function in rendor method.



Yes, even the fourth functionality is done, let’s see three more functionalities.

From the above image, it's easy to understand our next three functionalities.

Active Button

Whenever the user will click on the active button. It will only show him only those todos which are not marked as completed.

At first, we have to subscribe to the Active button to click event.

Clicking on the Active button will trigger activeFunc.

In activeFunc function, we are creating a new object called newtodoActive with the help constructor function TODOS.

This new object will only consist of todos which aren’t marked as completed.

As in the above image using the filter method we are obtaining our new array.

And yes the final step is to call render method on the new object.

Yes, it was that simple.

All Button

This button simply gonna show the list of all todos. No efforts needed, just to subscribe it with click event and then to call render method on the object.

const allFunc = function(event){ newtodo.render(ul); } all.addEventListener('click', allFunc); yes this much easy :)

Completed Button

This will do the exact opposite of the Active button.

When users will click on the Completed button, it will invoke completedFunc.

We gonna create new object i.e. newtodoCompleted with the help of constructor function TODOS.

Which will only consist of an array of todos which are marked as completed.

Yes, the next step is to render our new object.

That's it, Our fully functional todo is ready to go live :)

I m putting my whole js code here, in case anyone needs it.

Hope, It will help.

Though there are still many more features we can add in todo app, I am leaving this on your creativity :)