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( !== 'mainTask'){
                $(this).stop().animate({top:-80}, 200);


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

Finished reading Chapter 10, and starting a new project, kinda..

I’ve finished reading Chapter 10 in JavaScript and jQuery: The Missing Manual, really interesting stuff. It explained how to make tabbed pages, Tooltips and sliders. It turned out to be somehow easy to make as i thought it need some kind of an expert developer or something.

Now i’m going to rebuild my simple Todo list application using jQuery.

And also here’s its git repository, in case you wanted to take a look at the old code, maybe give some suggestions for the future jQuery code.

I’m going to redesign the interface of course, adding some effects using jQuery, and re-writing all the code.

It’s a long task so wish me luck.

My learning resources

Right now, i’m learning JavaScript and jQuery. Finding resources is quite easy, there’re a lot of it on the web.

But i’ve picked what suits me as a beginner so i have two books :

The last one is truly an amazing book, since i’ve learnt a lot of JavaScript from the first book plus videos, learning jQuery from The Missing Manual is such an enjoyable journey full of tutorials and tips & tricks. I’m at Chapter 10: Expanding Your Interface, which talks about several topics, tabbed panels, content sliders, tooltips and determining the dimensions of a page element.

Also i’ve watched jQuery Essential Training and going to have a look at Net Tuts which is a great site for web development, i highly recommend it.

All the above is kind of useless if i didn’t try to implement what i learn by hand and make mistakes, and here’s where Stack Overflow really comes into play really big time.

Stack Overflow is essentially a web site full of expert developers who are willing to help you and give you advices about your code and mistakes. This site helped me a lot and i hope that it helps you too.

So that’s it, i’ll write what interest me in chapter 10 from The Missing Manual soon.

What i’m doing now

Hi, This is my first post on this new blog, i’m 22 years old guy, living in Egypt.

According to The Learning Pyramid, by the National Training Laboratories, Bethel, Maine. If you want to retain 90% of what you learn you have to teach what you’ve learned to others, if you want to retain 70% you have to get your hands dirty implementing what you’re learning. So, i’m making this blog.

The Learning Pyramide

Computer science, for some reason or another, is not my major, but i don’t really care. All what i’m gonna do in my life now after my graduation, is to learn programming, back-end web development to be specific.

I’ve learnt HTML and CSS so far, and right now i’m learning JavaScript and jQuery. After that, my main task, learning a server-side programming language. Right now i’m going back and forth between PHP and Python. I think i would made my choice by the time i finish what i’m planing for JS and jQuery.

So from now on, i’ll be writing my thought about whatever draw my attention during my learning process in JavaScript and jQuery.