Simple Task List

Add text to a UL

by davestein

HTML

<form id="task-creator">
    <input type="text" id="task-name" name="task-name" autocomplete="off" />
    <input type="submit" value="Add Task" />
</form>

<h3>Task List</h3>
<ul id="tasks">
    
</ul>

CSS

h3 { margin: 20px 0; border-bottom: solid 1px #000; padding-bottom: 10px; }

JavaScript

var Task = function() {

  this.list = document.getElementById( 'tasks' );

}; // Task 

Task.prototype = {
    
    add : function( name ) {
        
        var list_item = document.createElement( 'li' );
        
        this.list.appendChild( list_item );
        
        list_item.innerHTML = name;
        
    }
    
};
    
    
var form = document.getElementById('task-creator');
    
    
form.onsubmit = function() {
    
    // create new Task
    var Item = new Task();
    
    // add task to list
    Item.add( document.getElementById('task-name').value );
    
    // reset form
    form.reset();
    
    // prevent form from doing ugly submit
    return false;
    
};