[go: up one dir, main page]
Skip to content

Commit

Permalink
Commit: most functionality added
Browse files Browse the repository at this point in the history
  • Loading branch information
Juan committed Sep 23, 2015
0 parents commit 0350081
Show file tree
Hide file tree
Showing 3 changed files with 294 additions and 0 deletions.
120 changes: 120 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
/* Basic Style */
body {
background: #fff;
color: #333;
font-family: Lato, sans-serif;
}
.container {
display: block;
width: 400px;
margin: 100px auto 0;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li, h3 {
clear:both;
list-style:none;
}
input, button {
outline: none;
}
button {
background: none;
border: 0px;
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;
}
30 changes: 30 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Todo App</title>
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<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">Edit</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>

<script type="text/javascript" src="js/app.js"></script>

</body>
</html>
144 changes: 144 additions & 0 deletions js/app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
//Problem: user interaction doesn't provide desired results

//Solution: add interactivity so the user can manage daily tasks


var taskInput = document.getElementById("new-task"); //new task
var addButton = document.getElementsByTagName("button")[0]; //First button
var incompleteTasksHolder = document.getElementById("incomplete-tasks"); //incomplete tasks
var completedTasksHolder = document.getElementById("completed-tasks");; //complete tasks


//New task list item
var createNewTaskElement = function (taskString) {
//Create list item
var listItem = document.createElement("li");
//input checkbox
var checkBox = document.createElement("input"); //checkbox
//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

//Each element needs 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 the Add button is pressed
//Create a new list item with the text of #new-task:
var listItem = createNewTaskElement("Some task")

//Append listItem to incompleteTasksHolder
incompleteTasksHolder.appendChild(listItem);
bindTasksEvents(listItem, taskIncomplete);

};




//Edit an existing task
var editTask = function () {
console.log("Edit task...");
//When the edit button is pressed
//If the class of the parent is .editmode
//Switch from .editmode
//label text becomes the input's value
//else
//Switch to .editMode
//input value becomes the label text

//Toggle .editMode on the parent
};




//Delete an existing task
var deleteTask = function () {
console.log("Delete task...");
//When the delete button is pressed
//Remove list item from the ul
var listItem = this.parentNode;
var ul = listItem.parentNode;
ul.removeChild(listItem);
};



//Mark a task as complete
var taskCompleted = function () {
console.log("Complete task...");
//When the checkbox is checked
//Append the list item into the #complete-tasks ul
var listItem = this.parentNode;
completedTasksHolder.appendChild(listItem);
bindTasksEvents(listItem, taskIncomplete);
};



//Mark a task as incomplete
var taskIncomplete = function () {
console.log("Task incomplete...");
//When the checkbox is unchecked
//Append the list item into the #incomplete-tasks ul
var listItem = this.parentNode;
incompleteTasksHolder.appendChild(listItem);
bindTasksEvents(listItem, taskCompleted);
};


var bindTasksEvents = function (taskListItem, checkboxEventHandler) {
console.log("Bind list item event");
//select its 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 delete button
deleteButton.onclick = deleteTask;
//bind checkboxEventHandler to checkbox
checkBox.onchange = checkboxEventHandler;
}


//Set the click handler to the addTask function
addButton.onclick = addTask;


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


//Cycle over completedTasksHolder ul items
//for each list item
for (var i = 0; i < completedTasksHolder.children.length; i++) {
//bind events to list item children (taskIncomplete)
bindTasksEvents(completedTasksHolder.children[i], taskIncomplete);
};






0 comments on commit 0350081

Please sign in to comment.