BirthYear App

Search…
BirthYear App
This sample application is a reprint of an article first featured on Think I­T on the 12/26/2012.
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.
Backend Memo
AdMob Demo
Last modified 1yr ago
Copy link
On this page
Demo
File Components
Required JS/CSS Components
HTML Explanation
JavaScript Explanation