jQM Task List

by Erik Zanker

HTML

<div data-role="page" id="page1">
        <div data-role="header">            
            <h1>Last time I did it</h1>
        </div>
        <div data-role="content"></div>
        <div data-role="footer">
        <div data-role="navbar">
            <ul>
               <li>
                  <a data-role="button" href="#page2" data-transition="slide" id="add" data-rel="page">ADD</a>
               </li>
               <li>
                  <a data-role="button" href="#page3" data-transition="slide" id="show" data-rel="page">SHOW</a>
               </li>
            </ul>
        </div>
        </div>
   </div>
   <div data-role="page" id="page2">
       <div data-role="header">            
           <h1>Add event</h1>
       </div>
       <div data-role="content">
       <textarea id="newItemText"></textarea>
       </div>
       <div data-role="footer">
          <div data-role="navbar">
              <ul>
                 <li>
                    <a data-role="button"  href="#" data-transition="slide" id="btnSave">SAVE</a>
                 </li>
                 <li>
                    <a data-role="button" href="#page1" id="btnCancel" data-transition="slide" data-direction="reverse" data-rel="page">CANCEL</a>
                 </li>
              </ul>
          </div>
      </div>
   </div>
   <div data-role="page" id="page3">
      <div data-role="header">
        <a href="#page2"  class="ui-btn-left" data-rel="back" data-transition="slide">Back</a>
        <h1>Events</h1>
      </div>
      <div data-role="content">
        <ul data-role="listview" id="orderedList" data-inset="true">
            
        </ul>
      </div>
      <div data-role="footer">
         <div data-role="navbar">
          <ul>
            <li>
                <a data-role="button" id="edit">EDIT</a>
            </li>
            <li>
                <a data-role="button" id="delete">DELETE</a>
            </li>
          </ul>
         </div>
      </div>
      </div>

JavaScript

$(document).on('pagebeforeshow', '#page3', function(){ 
    //setup the current list

    if(localStorage.getItem('TaskList')){
        var TheList = [];
        TheList = JSON.parse(localStorage.getItem('TaskList'));
        var items = '';
        
        for (var i = 0; i < TheList.length; i++) {
            items += '<li><h3>' + TheList[i].text + '</h3><p>' + timeAgo( (new Date(TheList[i].time).getTime())/1000) + ' ago<p></li>';
        }
        
        $('#orderedList').empty().append($(items)).listview('refresh');

    }

});


$(document).on('pageinit', '#page2', function(){ 
    
    $('#btnCancel').on("click", function(){
        $('#newItemText').val(''); //CLEAR TEXT AREA
    });
    
    $('#btnSave').on("click", function(){
        
        var TheList = [];
        if(localStorage.getItem('TaskList')){
            TheList = JSON.parse(localStorage.getItem('TaskList'));
        }
        var newitem = $('#newItemText').val(); 
        var task = {text: newitem, time: new Date() };
        TheList.push(task);
        localStorage.setItem('TaskList', JSON.stringify(TheList));
        
        $('#newItemText').val(''); //CLEAR TEXT AREA
        $.mobile.navigate( "#page3", { transition : "slide" });

    });

});

function timeAgo(time){
  var units = [
    { name: "second", limit: 60, in_seconds: 1 },
    { name: "minute", limit: 3600, in_seconds: 60 },
    { name: "hour", limit: 86400, in_seconds: 3600  },
    { name: "day", limit: 604800, in_seconds: 86400 },
    { name: "week", limit: 2629743, in_seconds: 604800  },
    { name: "month", limit: 31556926, in_seconds: 2629743 },
    { name: "year", limit: null, in_seconds: 31556926 }
  ];
  var diff = (new Date() - new Date(time*1000)) / 1000;
  if (diff < 5) return "now";
  
  var i = 0;
  while (unit = units[i++]) {
    if (diff < unit.limit || !unit.limit){
      var diff =  Math.floor(diff / unit.in_seconds);
      return diff + " " + unit.name + (diff>1 ? "s" : "");
    }
  };
}