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

Tested Environment

• Android 11.0

• iOS 14.3

File Components

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.

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