Skip to content

Puneet #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
puneet7 wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Puneet #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
859a535
To do completed
puneet7 Apr 12, 2016
5ad89f9
completed to do
puneet7 Apr 12, 2016
4272190
Delete index.html~
puneet7 Apr 12, 2016
9432e9f
Delete main.css~
puneet7 Apr 12, 2016
20dfc8c
Delete main.js~
puneet7 Apr 12, 2016
7e53293
Update index.html
puneet7 Apr 12, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 69 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,69 @@
<link rel="stylesheet" href="main.css">
<h3>todo!</h3>
<script src="main.js"></script>
<!DOCTYPE html>

<html lang="en">
<head>
<title>To-Do List</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./main.css">
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Kalam' rel='stylesheet' type='text/css'>
</head>

<body style="background-color: #E3F2FD;">

<div class = "container-fluid">
<h1 class = "test">To-Do</h1>
<div class = "container-fluid">

<!-- Input Form and Button -->

<div class = "form-group text-center">
<form id = "todoform">
<input type = "text" class = "form-control" id = "todo_item" placeholder= "Enter To-Do item here.">
<button class = "btn btnview" id = "todo_sub">Add To-Do Item</button>
</form>
</div>

<!-- To-Do List Box (Leftblock) -->

<div class = "row">

<div class = "col-xs-6 well leftblock" style = "overflow: scroll; max-height: 450px;" id = "todo_box">

<div class = "lefttext">
To-Do List:
</div><br>
<!-- New/Reverted tasks will be added here -->
<div id = "todo_items">

</div>

</div>

<!-- Completed Tasks box (Rightblock) -->

<div class = "col-xs-6 well rightblock" style = "overflow: scroll; max-height: 450px;" id = "completed_box">

<div class = "righttext">
Completed Tasks:
</div><br>

<div id = "completed_tasks">
<!-- Completed tasks will be added here -->
</div>

</div>

</div>

</div>
</div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type = "text/javascript" src="./main.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
72 changes: 69 additions & 3 deletions main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,69 @@
body {
padding: 20px;
}
<style type="text/css">

h1{
font-family: Comic Sans Ms;
color: red;
}

.test{
font-family: Indie Flower;
color: #3F51B5;
font-size: 40px;
text-align: center;
text-decoration: underline;
margin-top: 0px;
}

.leftblock{
font-family: Kalam;
color: red;
border-color: red;
border-radius: 10px;
border-width: 4px;
background-color: #FFEBEE;
}


.rightblock{
font-family: Kalam;
color: #33691E;
border-color: green;
border-radius: 10px;
border-width: 4px;
background-color: #F1F8E9;
}

.lefttext{
font-size: 20px;
text-decoration: underline;

}

.righttext{
font-size: 20px;
text-decoration: underline;
}

.btnview{
margin-top: 15px;
color: #3F51B5;
border-color: #3F51B5;
border-radius: 5px;
border-width: 2px;
}

.tstamp{
font-size: 10px;
font-family: Monospace;
text-align: right;
}

div.alert-danger:hover{
background-color: #F8BBD0;
}

div.alert-success:hover{
background-color: #B2FF59;
}

</style>
70 changes: 69 additions & 1 deletion main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,69 @@
console.log('test');
$(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 = "<div id = \"it_no"+i+"\" class = \"alert alert-danger fade in\"><span style = \"color: #E53935;\">" + todoitem + "</span><a href=\"#\" id = \"a_it_no"+i+"\" title = \"Move to completed tasks\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">x</a></div>";
$(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 '&larr;' 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<rev_task.length -1; i++) // Loop to remove
redo_task = redo_task + rev_task[i] + " "; // the timesstamp when reverting back to unfinshed tasks.

document.getElementById("todo_item").value = redo_task; //Set the input task value to reverting task.
$("#todo_sub").click(); //Triger the 'click submit button' event, with input text as redo_task.

}

return true; //If user doesn't want to revert the task, delete it.
}

var complete = $par_div.find("span").text(); //If the anchor tag (x) clicked belongs to To-Do List, find the text in the span tags which will be the task.
var html_completed = "<div class = \"alert alert-success fade in\" id = \"c_it_no" + comp_no + "\"> <span style = \"text-decoration: line-through;\">" + complete + "</span><span class = \"tstamp\">" + completed_time_stamp + "</span><a title = \"Remove task\" href=\"#\" class=\"close\" data-dismiss=\"alert\" aria-label=\"close\">&nbsp;x</a><a id = \"rev_back\"" + comp_no + "\" title = \"Mark as unfinished\" href = \"#\" class = \"close\" data-dismiss = \"alert\">&larr;&nbsp;</a></div>";
$(html_completed).hide().fadeIn(300).appendTo("#completed_tasks"); //Move from To-Do List to Completed Tasks.

});

});