Lên danh sách những việc phải làm bằng Todo List cho Blogger

Todo List Widget for Blogger

Một tiện ích nhỏ thích hợp cho các bạn làm blog cá nhân để lên danh sách những việc phải làm.

CSS

1 Vào Mẫu >> Chỉnh sửa HTML tìm đến thẻ ]]></b:skin> và chèn đoạn CSS sau trước thẻ đó.

.container{border-radius:3px;padding:20px 20px 60px 20px;display:block;background:#fff;width:100%;max-width:420px;margin:90px auto 0}
h2{text-align:center;font-weight:300;letter-spacing:0.03em}
ul{margin:0;padding:0}
li *{float:left}
li,h3{clear:both;list-style:none}
input,button{outline:none}
button{background:none;border:0;color:#888;font-size:15px;width:60px;margin:10px 0 0;font-family:Lato,sans-serif;cursor:pointer}
button:hover{color:#333}
/* Heading */
h3,label[for='new-task']{color:#333;font-weight:700;font-size:15px;border-bottom:2px solid #333;padding:30px 0 10px;margin:0;text-transform:uppercase}
input[type="text"]{margin:0;font-size:18px;line-height:18px;height:18px;padding:10px;border:1px solid #ddd;background:#fff;border-radius:6px;font-family:Lato,sans-serif;color:#888}
input[type="text"]:focus{color:#333}
/* New Task */
label[for='new-task']{display:block;margin:0 0 20px}
input#new-task{float:left;width:318px}
p > button:hover{color:#0FC57C}
/* Task list */
li{overflow:hidden;padding:20px 0;border-bottom:1px solid #eee}
li > input[type="checkbox"]{margin:0 10px;position:relative;top:15px}
li > label{font-size:18px;line-height:40px;width:237px;padding:0 0 0 11px}
li >  input[type="text"]{width:226px}
li > .delete:hover{color:#CF2323}
/* Completed */
#completed-tasks label{text-decoration:line-through;color:#888}
/* Edit Task */
ul li input[type=text]{display:none}
ul li.editMode input[type=text]{display:block}
ul li.editMode label{display:none}

Javascript

2 Tiếp tục tìm thẻ </body> và chèn trước nó đoạn script sau

<script type='text/javascript'>
//<![CDATA[
var taskInput = document.getElementById("new-task");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTasksHolder = document.getElementById("incomplete-tasks");
var completedTasksHolder = document.getElementById("completed-tasks");

//New Task List Item
var createNewTaskElement = function(taskString) {
  //Create List Item
  var listItem = document.createElement("li");
    
  //input (checkbox)
  var checkBox = document.createElement("input");
  //label
  var label = document.createElement("label");                         
  //input (text)
  var editInput = document.createElement("input"); 
  //button.edit
  var editButton = document.createElement("button");
  //button.delete
  var deleteButton = document.createElement("button"); 
  
  //Each element, needs modifying 
  
  checkBox.type = "checkbox";
  editInput.type = "text";
  editButton.innerText = "Edit";
  editButton.className = "edit";
  deleteButton.innerText = "Delete";
  deleteButton.className = "delete";
  label.innerText = taskString;
  
  //Each elemts need appending
  listItem.appendChild(checkBox);
  listItem.appendChild(label);
  listItem.appendChild(editInput);
  listItem.appendChild(editButton);
  listItem.appendChild(deleteButton);
  
  return listItem;
}

//Add a new task
var addTask = function() {
  console.log("Add task");
  // When button is pressed
  // Create new list item with the text from the new task
  var listItem = createNewTaskElement(taskInput.value); 
  //Append listItem to incompleteTasksHolder
  if(taskInput.value.length > 0) { incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
  taskInput.value = "";
  }
}


// Edit an existing task
var editTask = function() {
  console.log("Edit task");
  
  var listItem = this.parentNode;
  var editButton = this;
  var editInput = listItem.querySelector("input[type=text]");
  var label = listItem.querySelector("label");
  
  var containsClass = listItem.classList.contains("editMode");
  
  //if the class of the parent is .editMode
  if(containsClass) {
      //Switch from .editMode
      //Label text become input's (text) value
      label.innerText = editInput.value;
      editButton.innerText = "Edit";
   } else {
     //switch to .editMode
     //input (text) value becomes label's text
     editInput.value = label.innerText;
     editButton.innerText = "Save";
      
   } 
    //Toggle .editMode on the li
    listItem.classList.toggle("editMode");
    
}

// Delete and existing task
var deleteTask = function() {
  console.log("Delete task");
  var listItem = this.parentNode;
  var ul = listItem.parentNode;
  //Remove the parent <li> from ul
  ul.removeChild(listItem);
}

// Mark a task a task as complete
var taskCompleted = function() {
  console.log("Task complete");
   //Append the task li to the #completed-tasks
   var listItem = this.parentNode;
   completedTasksHolder.appendChild(listItem); 
   bindTaskEvents(listItem, taskIncomplete);
}


// Mark a task as incomplete
var taskIncomplete = function() {
   console.log("Task incomplete"); 
   //Append the task li to #incomplete-tasks
  var listItem = this.parentNode;
  incompleteTasksHolder.appendChild(listItem);
  bindTaskEvents(listItem, taskCompleted);
}

var bindTaskEvents = function(taskListItem, checkBoxEventHandler) {
  console.log("Bind list item events");
   //select taskListItems's children
   var checkBox = taskListItem.querySelector("input[type=checkbox]");
   var editButton = taskListItem.querySelector("button.edit");
   var deleteButton = taskListItem.querySelector("button.delete");
   
    //bind editTask to edit button
    editButton.onclick = editTask;
  
    //bind deleteTask to the delete button
    deleteButton.onclick = deleteTask;
  
  
    //bind checkboxEventHandler to the checkbox
    checkBox.onchange = checkBoxEventHandler;
  
}

//Set the click handler to the addTask function
addButton.addEventListener("click", addTask);

//cycle over incompleteTasksHolder ul list items
for (var i = 0; i < incompleteTasksHolder.children.length; i++) {
  //bind events to list item's children (taskCompleted)
  bindTaskEvents(incompleteTasksHolder.children[i], taskCompleted);
}

//cycle over completedTasksHolder ul list items
for (var i = 0; i < completedTasksHolder.children.length; i++) {
  //bind events to list item's children (taskIncomplete)
  bindTaskEvents(completedTasksHolder.children[i], taskIncomplete);
}
//]]>
</script>

HTML

3 Cuối cùng trở lại Bố cục >> Thêm tiện ích HTML/Javascript và dán vào đoạn code bên dưới.

    <div class="container">
      <h2>Todo List</h2>
      <p>
        <label for="new-task">Add Item</label><input id="new-task" type="text"><button>Add</button>
      </p>
      
      <h3>Todo</h3>
      <ul id="incomplete-tasks">
        <li><input type="checkbox"><label>Pay Bills</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li>
        <li class="editMode"><input type="checkbox"><label>Go Shopping</label><input type="text" value="Go Shopping"><button class="edit">Save</button><button class="delete">Delete</button></li>
      </ul>
      
      <h3>Completed</h3>
      <ul id="completed-tasks">
       <li><input type="checkbox" checked><label>See the Doctor</label><input type="text"><button class="edit">Edit</button><button class="delete">Delete</button></li> 
      </ul>
    </div>

Lưu ý: Nếu muốn thêm list công việc bạn phải thêm bằng cách chỉnh sửa đoạn code HTML trên, nếu thêm trực tiếp trên widget khi refresh lại sẽ bị mất.

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm