panicbus
10/9/2013 - 8:06 PM

todo.css

todo.js
content_copyfile_download
$(function () {

  function todoListItem( inputClass, spanClass, listItem) {
    return '<li><input class=' + inputClass + ' type="checkbox"><span class=' + spanClass + '>'
              + listItem + '</span><button id="delete" class="button">Delete</button></li>'
  }

  function addToTodoList(event) {
    event.stopPropagation();
    addItem = $('#add-item').val();
    if (addItem != "") {
      console.log(addItem);
      $('.todo-list ol').fadeIn(2000,function() {
        $('.todo-list ol').append(todoListItem("done", "todo-item", addItem));
      });
      $('#add-item').val('');
      addItem = "";
    }
  }

  function deleteFromList(event) {
    event.stopPropagation();
    console.log($(event.target).prev().text());
    $(event.target).parent().fadeOut(2000, function() {
      $(event.target).parent().detach();
    });
  }

  function moveToCompletedList(event) {
    event.stopPropagation();
    completedTask = $(event.target).next().text();
    console.log(completedTask);
    $(event.target).parent().fadeOut(2000, function() {
      $(event.target).parent().detach();
    });
    $('.completed-list ol').append(todoListItem("redo", "completed-item", completedTask));
  }

  function moveToTodoList(event) {
    event.stopPropagation();
    redoTask = $(event.target).next().text();
    console.log(redoTask);
    $('.todo-list ol').append(todoListItem("done", "todo-item", redoTask));
    $(event.target).parent().fadeOut(2000, function() {
      $(event.target).parent().detach();
    });
  }

  $('.add-list').on('click', 'li #add', addToTodoList);

  $('.todo-list').on('click', 'li .done', moveToCompletedList);

  $('.todo-list').on('click', 'li #delete', deleteFromList);

  $('.completed-list').on('click', 'li .redo', moveToTodoList);

  $('.completed-list').on('click', 'li #delete', deleteFromList);

});
todo.html
content_copyfile_download
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Todo</title>
  <link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css'>
  <link href="css/todo_style.css" rel="stylesheet" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="js/todo_script.js"></script>
</head>
<div class="container" >
    <div class ="content">
      <body id="container">
          <div class="add-list">
          </br>
            <h1>Add Item</h1>

            <ol>
              <li><input id="add-item" type="text"><button id="add" class="button">Add</button></li>
            </ol>

          </div>
          <h1>Todo List</h1>
          <div class="todo-list">

            <ol><!-- <li> Todo List Items appended here.</li> --></ol>

          </div>
          <h1>Completed List</h1>
          <div class="completed-list">

            <ol><!-- <li> Completed List Items appended here.</li> --></ol>

          </div>
    </body>
  </div>
</div>
</html>
todo.css
content_copyfile_download
/* Todo List CSS */

/* Checkboxes */
.done {
  margin: 0 10px;
}

 .redo {
  margin: 0 10px;
 }

 .create {
  margin: 0 10px;
 }

 /* Button */
 .button {
  margin: 0 10px;
  border-radius: 10px;
  font-size: 0.9em;
  background-color: black;
  color: white;
  opacity: .7;
 }

.button:hover {
  opacity: 1;
}
 /* Todo Items */

#add-item {  /* text input */
  text-align: left;
  width: 300px;
  font-size: 1.2em;
}

.todo-item {
  text-align: left;
  width: 400px;
  font-size: 1.2em;
  color: black;
}

.completed-item {
  text-align: left;
  width: 400px;
  text-decoration: line-through;
  font-size: 1.2em;
  color: red;
}


/* Lists */

.add-list {
  width: 450px;
  margin: 0 auto;

}

.todo-list {
  width: 450px;
  margin: 0 auto;
  font-size: 1.2em;

}

.completed-list {
  width: 450px;
  margin: 0 auto;
  font-size: 1.2em;

}

/* Container */
.container {
  position: relative;
}

.container:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: transparent url('notepad.jpg') no-repeat;
    margin-left: 200px;
    /*margin: 0 auto;*/
    height: 900px;
   opacity: 0.8;
}

.content {
    position: relative;
    z-index: 2;
}​

body {
  text-align: center;
  font-family: 'Kite One', sans-serif;
}

h1 {
  text-align: center;
}