todo

HTML

<div id="container">

  <div id="header"> To Do List </div>

  <div class="task-list task-container" id="pending">
    <h3>Pending</h3>
    <!--<div class="todo-task">
                    <div class="task-header">Sample Header</div>
                    <div class="task-date">25/06/1992</div>
                    <div class="task-description">Lorem Ipsum Dolor Sit Amet</div>
                </div>-->
  </div>

  <div class="task-list task-container" id="inProgress">
    <h3>In Progress</h3>
  </div>

  <div class="task-list task-container" id="completed">
    <h3>Completed</h3>
  </div>

  <div class="task-list">
    <h3>Add a task</h3>
    <form id="todo-form">
      <input type="text" placeholder="Title" />
      <textarea placeholder="Description"></textarea>
      <input type="text" id="datepicker" placeholder="Due Date (dd/mm/yyyy)" />
      <input type="button" class="btn btn-primary" value="Add Task" onclick="myadd();" />
    </form>

    <input type="button" class="btn btn-primary" value="Clear Data" onclick="todo.clear();" />

    <div id="delete-div">
      Drag Here to Delete
    </div>
  </div>

  <div style="clear:both;"></div>



</div>

CSS

#container {
  margin: 0 auto;
  width: 1060px;
  min-height: 100%;
  background-color: transparent;
  border: 0;
}

#header {
  font-size: 30px;
  text-align: center;
  margin-bottom: 15px;
  color: #fff;
}

.task-list {
  width: 250px;
  float: left;
  margin: 0 5px;
  background-color: #e3e3e3;
  min-height: 240px;
  border-radius: 10px;
  padding-bottom: 15px;
}

.task-list input,
.task-list textarea {
  width: 240px;
  margin: 1px 5px;
}

.task-list input {
  height: 30px;
}

.todo-task {
  border-radius: 5px;
  background-color: #fff;
  width: 230px;
  margin: 5px;
  padding: 5px;
}

.task-list input[type="button"] {
  width: 100px;
  margin: 5px;
}

.todo-task>.task-header {
  font-weight: bold;
}

.todo-task>.task-date {
  font-size: small;
  font-style: italic;
}

.todo-task>.task-description {
  font-size: smaller;
}

h3 {
  text-align: center;
}

#delete-div {
  display: none;
  background-color: #fff;
  border: 3px dotted #000;
  margin: 10px;
  height: 75px;
  line-height: 75px;
  text-align: center;
}

JavaScript

/*
   * @author Shaumik "Dada" Daityari
   * @copyright December 2013
   */

  /* Some info
  Using newer versions of jQuery and jQuery UI in place of the links given in problem statement
  All data is stored in local storage
  User data is extracted from local storage and saved in variable todo.data
  Otherwise, comments are provided at appropriate places
  */

  //var todo = todo || {},
  //  data = JSON.parse(localStorage.getItem("todoData"));
  var todo = {},
    data = {};
  data = data || {};

  (function(todo, data, $) {

    var defaults = {
        todoTask: "todo-task",
        todoHeader: "task-header",
        todoDate: "task-date",
        todoDescription: "task-description",
        taskId: "task-",
        formId: "todo-form",
        dataAttribute: "data",
        deleteDiv: "delete-div"
      },
      codes = {
        "1": "#pending",
        "2": "#inProgress",
        "3": "#completed"
      };

    todo.init = function(options) {

      options = options || {};
      options = $.extend({}, defaults, options);

      $.each(data, function(index, params) {
        generateElement(params);
      });

      /*generateElement({
          id: "123",
          code: "1",
          title: "asd",
          date: "22/12/2013",
          description: "Blah Blah"
      });*/

      /*removeElement({
          id: "123",
          code: "1",
          title: "asd",
          date: "22/12/2013",
          description: "Blah Blah"
      });*/

      // Adding drop function to each category of task
      $.each(codes, function(index, value) {
        $(value).droppable({
          drop: function(event, ui) {
            var element = ui.helper,
              css_id = element.attr("id"),
              id = css_id.replace(options.taskId, ""),
              object = data[id];

            // Removing old element
            removeElement(object);

            // Changing object code
            object.code = index;

            // Generating new element
       ...