to-do-list

This is my first blog post, so i want to write about my first project as frontend developer and how i started understanding Javascript.

So it all started very simple - to do list application/game/project (call it whatever you want), i would call it - game, because it was fun and in the same time - hard to make it all work.

Functionality

My to do list functionality -

  • add new task
  • delete task
  • edit task
  • filter by category
  • check/uncheck task as done
  • prioritize tasks
  • local storage (save tasks locally)
  • search (not finished)

Pretty much this is it and this is how it looks like.

Smithsonian Image

Javascript

Three years from now is passed and as i went through my to-do-list project and all the written code, i see a lot of mistakes and improvements need to be done, but for beginner this was really good knowledge. I do not regret that this was my first project, because i learned a lot about Javascript, for example -

  • data processing
  • arrays
  • objects
  • functions
  • stack overflow (not Javascript :D)

I even learned new things in HTML and CSS. As you can see in picture, there is this checkbox, for me this was very first time making custom checkboxes.

How to start?

I had always this questions in my mind. What is the correct coding? How should i start? What to write? How to think? So it was my teacher and he said

Just start

and everything started there, created some hardcoded data, next was the ‘add task’ function, just pushed data into an array. Next step was deleting by id. Interesting for beginner. At the end also the other functionality. It took me about two weeks each evening to finish almost finish this app.

Why didn’t i use jQuery, you might say? Because my teacher said to use only pure Javascript. And i am very thankful for that, because jQuery is just a Javascript library, that is why starting with javascript makes you also understand correctly jQuery.

I suggest you to start learning programming with to-do-list. There are many other to do list projects out there.

Example

Here is the working example - to-do-list.