“Check!”, my little to-do list app is completed

And finally, i’ve completed my app i’m writing, it’s a simple to-do list. Here it is.. Check!

And here’s the github repository for it, in case you wanted to add more improvement or watch any change i make to it.

It has most of the features i’ve planned to implement right now. I’ll add further improvements later, because i’m going to start learning Python for server-side developments.

And i didn’t chose the framework yet, i’ll chose one after i dive more in the language itself.

So wish me luck. I’ll be back with any interesting thoughts about Python.

My project is completely revamped. Meet “Check!”

It’s been a while since i’ve posted anything, and that’s because i was working on my project. The last design i’ve shown you in the previous post Here didn’t really looked nice.

so i decided to start over trying to make it as elegant and clean as i can, with my little CSS experience.

So here’s a screenshot of how it’d look like if it has many main tasks and sub tasks:

The red boxes that you see indicates the priority of the task, it will be in colors red for urgent, black for normal and blue for low priority.

There’re check button to the right, and that arrow next to it, will pop up a drop down menu for each task and sub task, that provides delete, rename and divide capabilities.

I’ve started in the  JavaScript of it, finished the main task addition mechanism and animations, also finished categorizing mechanism.

I’ve used several jQuery UI plugins, slider, auto complete (for usability) and highlight (for animation). It’s really easy to add and them them thanks to the documentation  in jQuery site.

Github repo

Done designing, started scripting

I’ve finished designing the todo list, it took me couple of hours since i’m not that good with CSS, but still better than before i guess. Here’s where i got so far :

Of course a lot of what you’re seeing is going to change as i propagate more in this project. For example i’m making the top panel to slide up/down by default when user hover on it, so it doesn’t take up much space.

Actually i’ve achieved that, you can check it in my Github repo , Here’s how is it after adding all the scripting for that top panel :

Lessons learnt : 

First, for the CSS :

To make a DIV fully vertically stretched along the entire page:

html {
    height :100%; /*did this to get wrapper fully vertically streched*/

body {
    height: 100%; /*body is contained inside html, so needs that too*/

#mainWrapper {
    height : 100%;   /*finally mainWrapper is inside body which is inside html*/
    margin : auto;


And for jQuery, i ran into a problem in the textbox used to enter task name, it is inside the upper panel that’s gets hidden at every mouseout event.

The problem is when the user is typing some task, but moves his mouse away, the panel will automatically slide up, which will disrupt the task input process.

After the help of StackOverflow guys, i found out that i can check inside the mouseout event, whether if the active element id is mainTask  which is the id of the textbox. And if not, the mouseout event get executed normally, here’s the code :

    //when the DOM loads the top panel start visible and after 400ms it slides up
    //so the user know that there's a hidden panel
    $("#taskInput").delay(400).animate({top:-80}, 500);
            $(this).stop().animate({top:0}, 200);
            //if textbox is active, stop sliding it back up
            //this is carried out by that if statement
            if(document.activeElement.id !== 'mainTask'){
                $(this).stop().animate({top:-80}, 200);


Now, i’m going to work on the task addition mechanism, wish me luck.