Task App

by bizamajig

HTML

<input type="text" rows="30" />
<br />
<div id="task-home">
    <div id="task-list-container">
        <div id="left-menu-expand"><a id="left-menu-expand-link" href="#"></a></div>
        <div id="task-list-inner-container">
            <div class="task-list-blue-bar">
                <div class="task-list-buttons">
                    <div class="grey-button add-task"><div class="add-button-grey"></div>Add Task</div>
                    <div class="grey-button complete-task">Complete</div>
                    <div class="grey-button delete-task">Delete</div>
                    <div class="yellow-task-message"></div>
                </div>
            </div>
            <div class="task task-bar overdue-task-bar">
                <div class="tipsy tipsy-e tipsy-task"><div class="tipsy-arrow"></div></div>
                <div class="little-grippy"></div>
                <div class="checkbox"><input type="checkbox" class="checkbox" /></div>
                <div class="tasks-left-tag-area">
                    <div class="tasks-overdue-tag">Overdue</div>
                </div>
                <div class="task-content-title">Take out the trash</div>
                <div class="tasks-right-tag-area"></div>
                <div class="tasks-due-date-area tasks-due-date-overdue">18 days Overdue</div>
                <div class="edit-pencil-icon"></div>
                <div class="task-delete-icon"></div>
            </div>
            <div class="task task-bar due-today-task-bar">
                <div class="little-grippy"></div>
                <div class="checkbox"><input type="checkbox" class="checkbox" /></div>
                <div class="tasks-left-tag-area">
                    <div class="tasks-due-today-tag">Due Today</div>
                </div>
                <div class="task-content-title">Find a better way to take out the trash</div>
                <div class="tasks-right-tag-area"></div>
                <div class="tasks-due-date-area">Due Today</div>
  ...

CSS

body
{
    font-family: Arial;
    font-size: 12px;
}

.grey-button
{
    position: relative;
    float: left;
    width: auto;
    height: auto;
    margin: 0 1px 0 1px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #DCDCDC url(http://static.goalscdn.com/img/grey-button-background.png) 0 0;
    border: 1px solid #777;
    outline:none;
    display: block;
    color: #333;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    padding: 4px;
    line-height: 14px;
    text-shadow: #fff 0px 1px;
    cursor: pointer;
}

.grey-button:hover
{
    text-decoration: none;
}

.grey-button:active
{
    background: transparent url(http://static.goalscdn.com/img/grey-button-background-clicked.png) 0 0;
}

.add-button-grey
{
    float: left;
    margin: -1px 5px 0 2px;
    height: 14px;
    width: 17px;
    background: transparent url(http://static.goalscdn.com/img/addarticleicon.png) 0 0px no-repeat;
}

#task-home
{
    position: relative;
    float:left;
    width: 780px;
}

#task-list-container
{
    position: relative;
    float:left;
    width: 780px;
    height: auto;
    background-color: #CADDEC;
}

#task-list-inner-container
{
    margin: 0px 0 6px 6px;
    width: 768px;
    height: auto;
}

#commands-exterior
{
    float: left;
    width: 780px;
    padding-top: 5px;
    font-size: 11px;
}

#commands-interior
{
    width: 75%;
    margin: auto;
}

.task-list-blue-bar
{
    float: left;
    width: 768px;
    height: 34px;
    background-color: #2775b3;
}

.task-list-buttons
{
    width: 768px;
    padding: 5px;
}

.yellow-task-message
{
    float: left;
    margin-left: 100px;
    width: auto;
    padding: 5px;
    font-weight: bold;
    color: black;
    background-color: #FFF1A8;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    display: none;
}

.task-bar
{
    float: left;
    width: 100%;
    height: 25px;
    background: -webkit-gradient(linear, left...

JavaScript

$(document).ready(function(){

  // global variables
  var container = $('#task-list-container'),
      yellowTaskMessageObj = $('.yellow-task-message'),
      arrowHTML = '<div class="tipsy tipsy-e tipsy-task"><div class="tipsy-arrow"></div></div>',
      timer;

  // Turn task bar yellow on checkbox click
  container.find(':checkbox').bind('click', function() {
    if($(this).is(':checked')) {
      $(this).parents('.task').addClass('checked-task-bar');
      enableTaskButtons();
    } else {
      $(this).parents('.task').removeClass('checked-task-bar');
      if( countChecked() === 0 ) {
        // Make complete and delete task buttons look disabled
        disableTaskButtons();
      }
    }
  });

  // Listen for keydown for Task list navigation
  // Use keydown on document for better compatibility
  $(document).bind('keydown', function(e) {
    // ignore keypress if it is in a text input or textarea
    if(e.target.type !== "text" && e.target.tagName !== "TEXTAREA") {
      listenForTaskKeys(e);
    }
  });

  // Delete the selected tasks
  container.find('.delete-task').bind('click', function() {
    deleteCheckedTasks();
    disableTaskButtons();
  });

  // Complete the selected tasks
  container.find('.complete-task').bind('click', function() {
    completeCheckedTasks();
    disableTaskButtons();
  });

  function listenForTaskKeys(e) {
      // J Navigates down the list
    if(e.which == 74) {
      var next_task = container.find('.tipsy-task').parent('.task').next('.task');
      if(next_task.length !== 0) {
        container.find('.tipsy-task').remove();
        next_task.prepend(arrowHTML);
      }
    }

    // K Navigates up the list
    if(e.which == 75) {
      var prev_task = container.find('.tipsy-task').parent('.task').prev('.task');
      if(prev_task.length !== 0) {
        container.find('.tipsy-task').remove();
        prev_task.prepend(arrowHTML);
      }
    }

    // X Selects task, checking checkbox
    if(e.which == 88) {
      var...