> For the complete documentation index, see [llms.txt](https://en.docs.monaca.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://en.docs.monaca.io/sampleapp/samples/age-calc.md).

# BirthYear App

The app will calculate a user's birthyear and display it after he/she entered his/her name and age.

## Demo

[**Import BirthYear App to your Monaca Account**](https://monaca.mobi/ja/directimport?pid=64081412e788858b3ca02f45)

**Tested Environment**

* Android 11.0
* iOS 14.3

![](/files/-Mfasnz5Flo61sSuM7Oa)

## File Components

![](/files/-MfassCZ4wC_1Pzhxd4M)

| File            | Description                            |
| --------------- | -------------------------------------- |
| `index.html`    | The startup Page                       |
| `css/style.css` | The stylesheet used in the application |

## Required JS/CSS Components

* `jQuery`   

## HTML Explanation

The following contents of the HTML body of `index.html` file is for displaying 2 textboxes for the user to input his/her name and age, and a button to calculate his/her birthyear.

```markup
...
  <div data-role="page" id="TopPage">
      <header data-role="header" data-position="fixed">
          <h1>BirthYear App</h1>
      </header>
      <section data-role="content">

          What's your name?
          <input type="text" id="myname" class="input-text" style="width: 40%">

          How old are you?
          <input type="text" id="myage" class="input-text" style="width: 20%">

          <a class="button" onclick="calculate();">calculate your birth year!</a>
      </section>
  </div>
...
```

## JavaScript Explanation

This code creates a function called `calculate`.

After entering your age and name, it stores them in two variables called `myname` and `myage` respectively. It then goes on to calculate your birth year based on today's date, and stores it in a variable called `birthyear`.

Finally it stores the message contents in a variable called `text`, calls the `navigator.notification.alert` function and displays the result as a popup.

The `navigator.notification.alert` function is a Core Cordova Plugins function that displays a popup dialog box on the screen. The third argument displays the text `Welcome to Monaca!` as the title of the dialog box.