# Memo Application
This sample app allows user to create a memo application using local storage.
## Demo
[Import Memo Application to your Monaca Account](https://monaca.mobi/ja/directimport?pid=62996175e788857b1f7f7f46)
**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](http://demos.jquerymobile.com/).
The following content of the HTML body tag of `index.html` file:
```markup
...
```
You can add, view and delete notes from this home screen.
The following content of the HTML body tag of `index.html` file:
```markup
...
...
```
You can add and save notes from this page.
The following content of the HTML body tag of index.html file:
```markup
...
```
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:
```javascript
...
///// 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 = $("Delete");
$li.data("id", memo.id);
$li.find("h3").text(date);
$li.find("p").text(memo.text);
$("#TopListView").prepend($li);
}
if (list.length == 0) {
$li = $("No memo found");
$("#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:
```javascript
///// 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:
```javascript
///// 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, "
");
$("#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:
```javascript
///// 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:
1. `getMemoList()`: get the list of all memo stored in the local
storage.
2. `saveMemoList()`: save the list of all memo into the local storage.
3. `AddMemo()`: add a new memo into the memo list and then save the new
list into the local storage using `saveMemoList()` function.
4. `deleteMemo()`: delete a specific memo from the memo list and then
save the new list into the local storage using `saveMemoList()`
function.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://en.docs.monaca.io/sampleapp/samples/memo_application.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.