Memo Application

This sample app allows user to create a memo application using local storage.

Demo

Import Memo Application to your Monaca Account

Tested Environment

Android 11.0
iOS 14.3

File Components

File

Description

index.html

The Home screen

js/memo.js

A JavaScript file handling data manipulation in local storage

js/app.js

A JavaScript file handling various implementation in the application

Required JS/CSS Components

jQuery
jQuery Mobile

HTML Explanation

index.html

This sample app's user interface is based on jQuery Mobile. In jQuery Mobile, multiple pages can be integrated to a single HTML file. In this app, for example, all pages (Top page, Add Memo page and Detail page) are defined within index.html. Specifically, pages are expressed by div tags in which the data-role attribute is set to page. The role of the tags is expressed by the data-role attribute in this manner. For example, data-role can also specify as header, content , or listview. For more information on jQuery Mobile tags and components, please refer to jQuery Mobile Demo.

The following content of the HTML body tag of index.html file:

<body>
  <!-- TOP Page -->
  <div data-role="page" id="TopPage">
    <header data-role="header" data-position="fixed">
      <h1>Monaca Memo</h1>
      <a href="#AddPage" data-icon="plus" class="ui-btn-right">Add</a>
    </header>
    <section data-role="content">
      <ul id="TopListView" data-role="listview"
        data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" data-split-icon="delete">
      </ul>
    </section>
  </div>
  ...
</body>

You can add, view and delete notes from this home screen.

The following content of the HTML body tag of index.html file:

<body>
  ...
  <!-- Add Memo Page -->
  <div data-role="page" id="AddPage">
    <header data-role="header" data-position="fixed">
      <a data-role="button" data-rel="back" data-icon="back">Back</a>
      <h1>Add Memo</h1>
    </header>
    <section data-role="content">
      <label for="Memo">Memo:</label>
      <textarea id="Memo"></textarea>
      <a data-role="button" data-icon="check" id="SaveBtn">Save</a>
    </section>
  </div>
  ...
</body>

You can add and save notes from this page.

The following content of the HTML body tag of index.html file:

<body>
  ...
  <!-- Detail Page -->
  <div data-role="page" id="ShowPage">
    <header data-role="header" data-position="fixed">
      <a data-role="button" data-rel="back" data-icon="back">Back</a>
      <h1></h1>
    </header>
    <section data-role="content">
      <p></p>
    </section>
  </div>
</body>

You can view the details of each memo from this screen.

JavaScript Explanation

app.js

app.js is a JavaScript file handling various implementation of the application.

As soon as the application starts, the initTopPage() function is called. This function is used to initialize the Top page (Home screen). The initialization process is to get all the previously stored memo(s) (using the getMemoList() function which is defined in the memo.js file) and put them into a list view. If there is no previously created memo (when using the application for the first time), "No memo found" will be displayed.

Below is the source code of this function:

...
///// Initialize top page
function initTopPage() {
    $("#TopListView").empty();

    var list = getMemoList();
    for (var i in list) {
        var memo = list[i];
        var d = new Date(memo.time);
        var date = d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate();

        $li = $("<li><a href='#' class='show'><h3></h3><p></p></a><a href='#' class='delete'>Delete</a></li>");
        $li.data("id", memo.id);
        $li.find("h3").text(date);
        $li.find("p").text(memo.text);
        $("#TopListView").prepend($li);
    }
    if (list.length == 0) {
        $li = $("<li>No memo found</li>");
        $("#TopListView").prepend($li);
    }
    $("#TopListView").listview("refresh");  // Call refresh after manipulating list
}
...

On the Top page, when a user clicks on the +Add button, the Add Memo page will be shown. After filling in the Memo text box, the onSaveBtn() function is called when the Save button is clicked. In this function, the input text will be saved to local storage via the addMemo() function (defined in the memo.js file) and then it goes back to the Top page with an updated list. Below is the source code of this function:

///// Save memo and return to top page
function onSaveBtn() {
    var text = $("#Memo").val();
    if (text != '') {
        // Save to local storage
        addMemo(text);
        // Clear form
        $("#Memo").val("");
        // Initialize top page
        initTopPage();
    }
    $.mobile.changePage("#TopPage", { reverse: true });
}

On the Top page, when a user clicks on an item in the list, the onShowLink() function (defined in the memo.js file) is called. In this function, the Detail page will be shown and either the title or the full content of the selected item will be displayed as shown below:

Below is the source code of this function:

///// Move to detail page
function onShowLink() {
    var $li = $(this).parent();
    var memoTitle = $li.find("h3").text();
    var memoHtml = $li.find("p").html().replace(/\n/g, "<br>");

    $("#ShowPage h1").text(memoTitle);
    $("#ShowPage p").html(memoHtml);
    $.mobile.changePage("#ShowPage");
}

On the Top page, a user can delete any item in the list by clicking on the delete icon at the end of each item. When the delete icon is clicked, the onDeleteLink() function is called. In this function, a message confirming the deleting action is shown . If the button is clicked, the selected item will be deleted from the local storage via the deleteMemo() function (defined in the memo.js file). Then, it will go back the Top page with an updated list.

Below is the source code of this function:

///// Delete memo
function onDeleteLink() {
    if (!confirm("Are you sure to delete this memo?")) {
      return;
    }
    var $li = $(this).parent();
    var id = $li.data("id");
    deleteMemo(id);

    initTopPage();

    // Return to top
    $.mobile.changePage("#TopPage", { reverse: true });
}

memo.js

memo.js file is a JavaScript file handling data manipulation in local storage. Inside this file, there are 4 functions such as:

getMemoList(): get the list of all memo stored in the local
storage.
saveMemoList(): save the list of all memo into the local storage.
AddMemo(): add a new memo into the memo list and then save the new
list into the local storage using saveMemoList() function.
deleteMemo(): delete a specific memo from the memo list and then
save the new list into the local storage using saveMemoList()
function.

PreviousClock App NextRSS Reader App

Last updated 2 years ago