docs: function(item_data){
        var item_text, // The text that will display in the item
            todo_div, todo_checkbox, todo_delete, todo_wrapper; // DOM elements (main div, checkbox that indicates done-ness)
  
        todo.data[item_data.__id__] = item_data;
  
        item_text = ''; // By default, start with an empty string.
        if (item_data.hasOwnProperty('deadline')){ // Parse how much time is left to complete this task.
          parsed_deadline = todo.parse_remaining_time(item_data.deadline.timestamp);
          if (parsed_deadline <= 0){
            item_text += '<span class="overdue">Overdue</span>'; // If time is up, put a bold "Overdue" flag on the item.
          } else {
          item_text += '<span class="due">Due in ' + parsed_deadline + ' hours.</span>'; // Else, put a subtler flag indicating the hours left to complete the task.
          }
        }
        // Build the elements
        todo_wrapper = $('<span item="' + item_data.__id__ + '"><br></span>');
        todo_div = $('<div class="todo_item"><span class="value"></span>' + item_text + '</div>');
        todo_div.find('.value').text(item_data.text); // Use $.text() to prevent script injection
        todo_checkbox = $('<input type="checkbox" />'),
        todo_delete = $('<div class="delete_button"></div>');
  
        // Styling for if the item is done: "done" class crosses out text and makes it lighter. Check off the checkbox, too.
        if (item_data.done){
          todo_div.addClass('done');
          todo_checkbox.attr('checked', true);
        }
  
        /*
          Prepend the checkbox to the div element and give the whole thing
          a click function to toggle the listing's done status.
          (This is just for UI's sake: it's easier to click the whole thing than ticking the checkbox itself.
          The CSS cursor: pointer on the item will make it clear that it's clickable)
        */
        todo_div.prepend(todo_checkbox).click(function(){
          var item_data = todo.data[$(this).parent().attr('item')];
          todo.toggle_item(item_data);
        }).css({
          background: todo.priority_colors[item_data.priority] // Give the item the color corresponding to its priority level.
        });
  
        // Bind click event to the delete button
        todo_delete.click(function(e){
          e.stopPropagation();
          todo.delete_item($(this).parent().parent().attr('item'))
        });
  
        // Commit the element to the page.
        $(todo_div).append(todo_delete);
        $(todo_wrapper).prepend(todo_div);
        $('#todo').prepend(todo_wrapper);
  
        // In case this is the first item added, hide the "You haven't added any items yet" message.
        $('#empty_list').hide();
      }