week 9 - Todo w/ Inheritance & Events!

F830AM w/ Artie

by Ramya Ranganathan

HTML

<div id="todoform">
<input id="todotext" type="text" /> 
<select id="todopriority">
    <option value="0">High Priority</option>
    <option value="1" selected>Medium Priority</option>
    <option value="2">Low Priority</option>
</select>
<button id="todobtn">Add Todo</button>
</div>

<h3>Todo List</h3> 
<div id="items">
</div>

CSS

#todoform, #items {
    padding: 1em 0;
}
h3 i {font-size: 14px;}
.todo {
    border-bottom: 1px solid #000;
    padding: 10px 0px;
}
.todo.priority0 { 
    color: black;
}
.todo.priority1 {
    color: black;
}
.todo.priority2 {
    color: black;
}

JavaScript

// Artie F830AM section 
// April 3, 2015
//
// Goals:
// 
// * Practice using inheritance to extend javascript objects.
// * Practice using DOM events:
//     - listening for events with addEventListener() and reacting to them
//     - bubbling events
//
// Tasks:
// 
// * Extend TodoList with a new object called SortedTodoList that always keeps
//   todos in sorted order. What about extending it as PersistentTodoList that
//   saves objects in localStorage?
//
// * Modify form button event handler to use addEventListener()
//
// * Add an event listener to each todo item displayed in the list so that
//  whenever a todo is clicked, it is highlighted in yellow.
// 
// * Change it so instead of having multiple event listeners, one for each
//   todo, there's just one event listener on the todo list itself, that
//   listens for events that bubble up from the todo items.
//
// * Add an event handler to the text input on the form so that hitting "enter"
//   will add the todo item.
//
// * Add an event handler so that you can move a TODO up or down in the list
//   by hitting the up/down arrow key.

//----------------------------------------
// Creates a Todo object that holds data about a single "todo" item
var Todo = function(name, priority) {
    this.name = name; // string
    this.priority = priority; // number 0-3
    this.priorityStrings = ["High Priority", "Medium Priority", "Low Priority"];
};
Todo.prototype.asString = function() {
    return "Todo: " + this.name + "  (" + this.getPriorityString() +")";
};
Todo.prototype.getPriorityString = function() {
    return this.priorityStrings[this.priority].toLowerCase();
};

//----------------------------------------
// Creates a TodoList object that contains Todo objects.
var TodoList = function() {
    this.items = [];
};
TodoList.prototype.getItems = function() { 
    return this.items;
};
TodoList.prototype.addItem = function(item) {
    this.items.push(item);
};

// SortedTodoList *inherits* from TodoList. It...