To-Do List | Module Pattern

So for my first foray into using a design pattern, I'm making a Todo program using the Revealing Module Pattern. This pattern is based on the Module Pattern which I spoke about in my last blog post. The benefit of using this structure is that you can easily see the publicly available functions and variables clearly listed within the return statement.

To-Do List Mock Up

I start by assigning the module to a variable that I will then use to call the methods. In this case, I called it Todo because I'm building a Todo program. I then assigned each of the DOM elements that I would be referencing (e.g. the form, the add button and the unordered list) to variables.

This program has only one method -- it's called addListItem. Within it, I assign an event listener and pass in two parameters. The first parameter is the event, in this case I'm using submit and the second parameter is the function. In the function, I create the element (in this case it's a list item), set the attributes of the input element (for this program I am using a checkbox which later on I can make functional so that when someone checks off a task, it can disappear or the text can have a strike-through) and insert the elements into the DOM (whatever words the user types into the text input field).

Within this method, I've also included an event listener on the form which listens for when the user types in the todo item and presses enter -- in this case, I've used the submit event. I could have also used a click event on the button element. 

$(document).ready(function() {

    var Todo = Todo || {};
    
    Todo.Item = (function(){
        'use strict';
        // assigen DOM elements to variables
        var 
            _form = document.querySelector('form'),
            _inputItem = document.querySelector('.input_item'),
            _button = document.querySelector('button'),
            _ul = document.querySelector('ul');
            
            // set up event listeners
            var addListItem = _form.addEventListener('submit', function(event){
                event.preventDefault();

                // create elements
                var li = document.createElement('li');
                var checkbox = document.createElement('input');
                var label = document.createElement('label');

                // decorate elements
                checkbox.setAttribute('type', 'checkbox');
                checkbox.setAttribute('id', 'check');

                label.setAttribute('id', 'item_text');

                label.textContent = _inputItem.value;

                // insert elements into DOM
                _ul.appendChild(li);
                li.appendChild(checkbox);
                li.appendChild(label);
            });
        
        return {
            add: addListItem
        };

        Todo.Item.add();

    })();

});

Before I write any code, I tend to sketch out a short check list of steps that describes in human terms what the program will do. This one is still relatively technical, and can be outlined even simpler still.