Created
January 19, 2016 17:04
-
-
Save joelbrennan0/a4d58d86ae5ee07c7512 to your computer and use it in GitHub Desktop.
Treehouse JavaScript TODO
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//element vars | |
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"); //completed-tasks | |
var createNewTaskElement = function(taskString) { | |
var listItem = document.createElement("li"); | |
var checkBox = document.createElement("input"); | |
var label = document.createElement("label"); | |
var editInput = document.createElement("input"); // text | |
var editButton = document.createElement("button"); | |
var deleteButton = document.createElement("button"); | |
listItem.appendChild(checkBox); | |
listItem.appendChild(label); | |
listItem.appendChild(editInput); | |
listItem.appendChild(editButton); | |
listItem.appendChild(deleteButton); | |
checkBox.type = "checkbox"; | |
editInput.type = "text"; | |
editButton.className = "edit"; | |
editButton.innerText = "Edit"; | |
deleteButton.className = "delete"; | |
deleteButton.innerText = "Delete"; | |
label.innerText = taskString; | |
return listItem; | |
} | |
var createTask = function() { | |
console.log('Adding..........'); | |
var listItem = createNewTaskElement(taskInput.value); | |
if (taskInput.value != "") { | |
incompleteTasksHolder.appendChild(listItem); | |
bindTaskEvents(listItem, taskComplete); | |
taskInput.value = ""; | |
} else { | |
taskInput.placeholder = "Enter your task here."; | |
} | |
} | |
var editTask = function() { | |
console.log('Editing.........'); | |
var listItem = this.parentNode; | |
var editInput = listItem.querySelector("input[type=text]"); | |
var label = listItem.querySelector("label"); | |
var editButton = listItem.querySelector("button.edit"); | |
var containsClass = listItem.classList.contains("editMode"); | |
if (containsClass) { | |
label.innerText = editInput.value; | |
editButton.innerText = "Edit"; | |
} else { | |
editInput.value = label.innerText; | |
editButton.innerText = "Save"; | |
} | |
listItem.classList.toggle("editMode"); | |
} | |
var deleteTask = function() { | |
console.log('Deleting........'); | |
var listItem = this.parentNode; | |
var ul = listItem.parentNode; | |
ul.removeChild(listItem); | |
} | |
var taskComplete = function() { | |
console.log('Complete........'); | |
var listItem = this.parentNode; | |
completedTasksHolder.appendChild(listItem); | |
bindTaskEvents(listItem, taskIncomplete); | |
} | |
var taskIncomplete = function() { | |
console.log('Incomplete......'); | |
var listItem = this.parentNode; | |
incompleteTasksHolder.appendChild(listItem); | |
bindTaskEvents(listItem, taskComplete); | |
;} | |
var bindTaskEvents = function(taskListItem, checkBoxEventHandler) { | |
console.log('bindTaskEventcalled'); | |
var checkBox = taskListItem.querySelector("input[type=checkbox]"); | |
var editButton = taskListItem.querySelector("button.edit"); | |
var deleteButton = taskListItem.querySelector("button.delete"); | |
editButton.onclick = editTask; | |
deleteButton.onclick = deleteTask; | |
checkBox.onchange = checkBoxEventHandler; | |
} | |
//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], taskComplete); | |
} | |
//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); | |
} | |
addButton.addEventListener("click", createTask); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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"> | |
</ul> | |
<h3>Completed</h3> | |
<ul id="completed-tasks"> | |
</ul> | |
</div> | |
<script type="text/javascript" src="js/app.js"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment