diff --git a/index.html b/index.html index 47f39d4..22b9099 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,69 @@ - -

todo!

- \ No newline at end of file + + + + + To-Do List + + + + + + + + + + + +
+

To-Do

+
+ + + +
+
+ + +
+
+ + + +
+ +
+ +
+ To-Do List: +

+ +
+ +
+ +
+ + + +
+ +
+ Completed Tasks: +

+ +
+ +
+ +
+ +
+ +
+
+ + + + + + diff --git a/main.css b/main.css index cdda92f..470e33f 100644 --- a/main.css +++ b/main.css @@ -1,3 +1,69 @@ -body { - padding: 20px; -} \ No newline at end of file + diff --git a/main.js b/main.js index c80ec08..911afab 100644 --- a/main.js +++ b/main.js @@ -1 +1,69 @@ -console.log('test'); \ No newline at end of file + $(document).ready(function() { + + function makeCounter() { // This part will run ONLY once after the page loads + var count = 0; // count will be visible to inner function. + + return function() { // + count++; // Increment count everytime a variable assigns itself to makeCounter(); + return count; // This can happen everytime a button is clicked + }; + + }; + + todo_counter = makeCounter(); // Will be equal to inner function of makeCounter + completed_counter = makeCounter(); // + + $("#todo_sub").click(function(e){ + + var todoitem = document.getElementById("todo_item").value; //Get the Task from the input text area. + document.getElementById("todo_item").value = ""; //Reset the value of input text area. + + if(todoitem.trim().length == 0) //Reject Blank submissions. + return false; + + var i = todo_counter(); //Use the counter to create unique id for every 'x' in the anchor tag and every div under To-Do list. + + //Create HTML for the newest task submitted and append it under To-Do List. + var html_todo = "
" + todoitem + "x
"; + $(html_todo).hide().fadeIn(300).appendTo("#todo_items"); + + e.preventDefault(); //Prevent form submission (page refresh) to avoid resetting data. + + }); + + + $(document).on('click', 'a', function() { + + var date = new Date(); //Create Timestamp in 12Hr Format. + var completed_time_stamp = " " + (date.getHours() > 12 ? (date.getHours()-12).toString() : date.getHours().toString()) + ":" + date.getMinutes().toString() + ":" + date.getSeconds().toString(); + + var comp_no = completed_counter(); //Use the counter to create unique id's for 'x' and '←' anchor tags. + + $par_div = $(this).parent("div"); //Get the Parent Element. + par_div_id = $par_div.attr("id"); //Get the id of the Parent Element. + + var check_parent_div = par_div_id.toString().split(""); //Gets the First letter of parent id + if(check_parent_div[0] =="c"){ //If first letter is c, the anchor tag clicked belongs to Completed Task and + if(this.id.toString().split("")[0] == "r"){ //Checks whether user wants to delete the task or 'r'-evert back to Unfinished Tasks. + + var rev_task = $par_div.find("span").text().split(" "); //Split the words of reverting task in an array, Last element will be the timestamp. + var redo_task = ""; + + for(var i = 0; i " + complete + "" + completed_time_stamp + " x← "; + $(html_completed).hide().fadeIn(300).appendTo("#completed_tasks"); //Move from To-Do List to Completed Tasks. + + }); + +});