App Inventor – Week 3 The Countdown App

This week we will build an app that will count down the number of days, hours minutes and seconds to Christmas.

Countdown app

The app is modelled on the web site http://www.yourchristmascountdown.com/ .

Getting Started

To create this app you need to drag and drop a two label components on to the screen. The first label is called lblTitle; this component fills the width of the screen. This label will be the Title displayed. The second label lblTimer also fills the width of the screen and is the countdown text in the app.

You also need to drag and drop a Clock component onto the screen. This component is not visible and will appear under the screen, all the default settings for this component are ok

 

Initializing Global variables

Click on the Blocks button to open the script editor. In the script editor a number of global variables must be created and initialized. The first variable is MillisecondsToChristmas, the initial value for this variable is zero. The other Global Variables are listed below and they are all set to zero.

  • DaysLeft
  • HoursLeft
  • MinutesLeft
  • SecondsLeft
  • MillisecondsForNow

 

When app starts calculate number of milliseconds to Christmas

When the app starts we use the Clock component to calculate the number of milliseconds to Christmas, this is stored in the Global variable MillisecondsToChristmas. Please note that the number of milliseconds calculated is not from the current time to Christmas but rather from Jan 01 1970. We will calculate the number of milliseconds for the current time later. Once we have this value we will subtract it from the number of milliseconds to Christmas.

 

Using the Clock Timer event to count down

The Clock component has a “Timer” event that fires every second. In this event we will calculate the number of milliseconds for the current time. This is stored in the Global variable MillisecondsForNow. The number of milliseconds for the current time is subtracted from the number of milliseconds to Christmas to give the number of milliseconds between now and Christmas. This is converted to seconds and stored in a local variable NumberOfSeconds. A number of local variables are needed

  • SecondsInMinute = 60
  • SecondsInHour = 3600
  • SecondsInDay = 86400
  • MinutesInHour = 60
  • HoursInDay = 24

 

Using the Clock Timer event to count down

In order to calculate the number of days, hours, minutes and seconds left to Christmas we use a couple of Math scripts

  • Modulo  – returns  the remainder of a division
  • Floor  – returns the greatest integer that’s less than or equal to the given number.

The script to calculate the Days, Hours, Minutes and Seconds is displayed below.

App Inventor - Final script

Full steps are included in the following link

Week 3 – Countdown App

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s