tasks-list.html

<dom-module id="tasks-list">
        <template>
                <!--action bar -->
                <paper-toolbar>
                        <paper-icon-button id="navicon" icon="icons:menu"></paper-icon-button>
                        <div class="title">My Task</div>
                        <span class="flex"></span>
                        <paper-icon-button id='morebutton' icon='icons:more-vert'></paper-icon-button>
                </paper-toolbar>
                <div>
                        <!--list task-->
                        <paper-listbox>
                                <template is='dom-repeat' items='{{ tasks }}'>
                                    <!-- Create an individual task -->
                                    <paper-item>
                                        <div style="width: 100%">
                                          <paper-checkbox checked='{{ item.isComplete }}'
                                                 class='' on-change='toggleTask'>
                                                {{ item.taskName }}
                                          </paper-checkbox>  
                                        </div>
                                        <div class='position-right'>
                                            <paper-icon-button
                                                    icon='delete'
                                                    class="pull-right"
                                                    style='color: gray'
                                                    on-click='deleteTask'>
                                            </paper-icon-button>    
                                        </div>                                                
                                    </paper-item>
                                </template>
                        </paper-listbox>

                        <!-- Create a floating action button -->
                        <paper-fab icon='add'
                               style='position:absolute; bottom: 30px; right:24px'
                               on-click='showAddTaskDialog'>
                        </paper-fab>

                        <!-- creating a modal dialog-->
                        <paper-dialog id='addTaskDialog' modal>
                                <paper-input label='What do you have to do?' value='{{ latestTaskName }}'></paper-input>
                                <div class='buttons'>
                                    <paper-button dialog-dismiss>Cancel</paper-button>
                                    <paper-button on-click='addTask'>Add</paper-button>
                                </div>
                        </paper-dialog>
                </div>        
        </template>
        <script type="text/javascript">
                Polymer({
                    is: 'tasks-list',
                    ready: function() {
                        this.tasks = [];
                        this.latestTaskName = "";
                        this.updateTasks();
                    },
                    showAddTaskDialog: function() {
                        this.$.addTaskDialog.open();
                    },
                    addTask: function() {
                        // Store the new task as not completed
                        localStorage.setItem(this.latestTaskName, 'no');
                        // Reset latestTaskName
                        this.latestTaskName="";
                        // Close the dialog
                        this.$.addTaskDialog.close();
                        // Update the list of tasks
                        this.updateTasks();
                     },
                     toggleTask: function(e) {
                        // Get the name of the task
                        var taskName = e.model.item.taskName;
                        // Convert true/false to yes/no
                        if(e.model.item.isComplete)
                        localStorage.setItem(taskName, 'yes');
                        else
                        localStorage.setItem(taskName, 'no');
                     },
                     deleteTask: function(e) {
                        var taskName = e.model.item.taskName;
                        localStorage.removeItem(taskName);
                        // Update the list of tasks
                        this.updateTasks();
                      },
                      updateTasks: function() {
                        // Empty the array
                        this.splice('tasks', 0);
                        // Add items from localStorage
                        for(var taskName in localStorage) {
                                var task = {
                                taskName: taskName,
                                isComplete: localStorage.getItem(taskName) == 'yes'
                                };
                                this.push('tasks', task);
                        }
                      }   
                    // more code goes here
                });
        </script>
</dom-module>