# 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

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-Mfas8C1fJ8NH_Ka5W2_%2F-Mfasnz5Flo61sSuM7Oa%2Fimage.png?alt=media\&token=93a0f2da-464a-4135-9369-3ad8a53bb811)

## File Components

![](https://3091308003-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfWe1U2tFctp8FkP9W8%2F-Mfas8C1fJ8NH_Ka5W2_%2F-MfassCZ4wC_1Pzhxd4M%2Fimage.png?alt=media\&token=0fd91ba7-daab-4a0e-a6de-08a2894fbf20)

| 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.