Leverage Your HTML5 Savvy to Build Commercial, Cross-Platform Apps and Games - Page 4

Now choose the ELEMENTS tab on the left. The Main page will provide a list of options for the user. Under LAYOUT, the second item is List. Drag and drop this item to your Main page in the center.

The list will automatically include two items.

You’ll notice the Properties List now appears on the right.

Confusingly, Item 1 and 2 and are identified as Item 0 and 1 here. No matter – you’ll be changing the names anyway. The text for each shows the HTML that represents this element. By default, they are links to other pages.

Change Item 0 so that it looks like this.

<a href="#Space">Space</a>

Change Item 1 to look like this.

<a href="#Time">Time</a>

Don’t forget to click Apply!

Now return to the PAGES tab on the left and click to select the Space page. Then click the ELEMENTS tab. There are three options for conversion, so this will be another list. Add the list as you did in Main. Add a third item to the list by clicking the plus icon in the lower left of the List Properties pane. Set the properties as below.

Item 0:

<a href="#K2M">Kilometers to Miles</a>

Item 1:

<a href="#M2F">Meters to Feet</a>

Item 2:

<a href="#H2A">Hectares to Acres</a>

When you click Apply, you’ll see the appropriate text appear for the list items.

Return to the PAGES tab on the left. I’ll come back to Time later - for now click the page Kilometers to Miles. Then click the ELEMENTS tab. Add the following controls in this order:

• Text (in the MEDIA section)
• Input (in the FORMS section)
• Button (again in FORMS)
• Another Text

Set the properties as specified below. Leave any unspecified properties with their default values. Remember you must hit Apply after setting the properties for each control! If you click to select another control without hitting Apply, your changes will be lost.

The result should look like this.

That’s it for page Kilometers to Miles. And, actually, Meters to Feet and Hectares to Acres are nearly identical. Follow the same procedure you did for Kilometers to Miles and use these property values to create the controls.

Meters to Feet

Hectares to Acres

The last page to complete is Time. In this one, the user can find out what time it is in a different time zone. First they enter their own time and a time zone. Then they enter the time zone that they want to convert to. Add these controls, in order.

• Text
• Input
• Select (in FORMS)
• Text
• Select
• Button

Set these properties.

You’re done! Click the Save button at the top center of the page.

After doing some work, Intel XDK return you to the IDE, editing your newly minted application.