Day 3: If-Then Statements / Calculator

What We're Going to Learn Today

In today's tutorial, we are going to learn about If Statements. We are also going to work with a list picker to make a calculator.

Getting Started

    1. Go to the MIT App Inventor and log in using your Google account

    2. Click on "My Projects" on the top and then press the New button.

    3. Name the new project Day3

    4. Click on Day3 to open it

Connect Your Emulator

    1. Select Connect from the menu bar at the top of the page and click on Emulator to launch it

    2. Once the Emulator is running go on to the next step

Let's Start

    1. Under the Palette, drag a label from the basic category and place it on the screen.

  1. Rename it "Title_Label" and set its Text property to "My Calc" and the FontSize to "18.0"

  2. Drag a HorizontalArrangement under the Title_Label. Find it under the Layout on the Palette.

  3. Drag a textbox from the Palette into the HorizontalArrangement. Set its width to 50. Remove the text from "Hint" and check "Numbers Only"

  4. Drag a Listpicker to the right of textbox1 into the HorizontalArrangement. Set its text property to "+"

    1. Drag another textbox from the Palette into the HorizontalArrangement. Put it to the right of listpicker1. Set its width to 50. Remove the text from "Hint" and check "Numbers Only"

  5. Drag a label to the right of textbox2 into the HorizontalArrangement. Set its text to "="

  6. Drag a new label to the right of Label1 into the HorizontalArrangement. Set its text to "Result" and rename the component "Result_Label"

  7. Finally, Add a button below the HorizontalArrangement. Rename this button "Calculate_Button" and set its text to "Calculate"

Listpicker

A listpicker creates a list of items for a user to... pick. We need to add these items to our listpicker.

  1. Select Listpicker1

  2. Add +, - (That is plus comma space minus) to the ElementsFromString property

  3. Add + to the Selection property

  4. Look at the Emulator. Try typing numbers in the fields. Click the plus button. This takes you to a screen that gives you + and - as your choices. Change it to -. Notice it doesn't change the symbol from + to -.

  5. If you click the calculate button, nothing will happen since we haven't programmed the calculate button yet.

Blocks Editor

Now we want our calculator to work. Let's add some blocks.

    1. Click on the Blocks Editor. Under Blocks, go to the Calculate_Button and drag out when Calculate_Button.Click do.

    2. Find the set Result_Label.Text to block and add it to the block when Calculate_Button.Click do

    3. Add the + block from Math from the Built-In Blocks

    4. Fill the + block with the TextBox1.text block and TextBox2.Text block.

Listpicker

    1. Enter some numbers in each text field and press the calculate button. Your app should add the numbers together and then set the Result_Label text to the answer.

    2. If you press the + symbol you will see that you can pick -. However, selecting - doesn't do anything right now. Let's change that.

    3. Return to the block editor.

    4. We need the text that is displayed on the ListPicker1 to change when the user selects a new choice. Find the when ListPicker1.AfterPicking do block and drag it to the board.

    5. Find the blocks set ListPicker1.Text to and ListPicker1.Selection and snap them into the block when ListPicker1.AfterPicking do

  1. ListPicker1.Selection 's value is whatever the user has picked. Read the blocks and understand why the text changes.

    1. Try clicking the + sign button (ListPicker1) on the Emulator. On the new screen select the -.

    2. Enter some new numbers. Though you changed the symbol, clicking the calculate button still adds the numbers and doesn't subtract. We need the app to know what to do if + was changed to -

If-Then Statements

    1. Remember that ListPicker1.Selection 's value is whatever the user has picked. We want the app to add numbers when the user selects + and subtract numbers when - is selected. To do this we need to use an If/then block. Go to the Built-In tab on the left. Find the If/then block under Control and place it on the board. Remove the set Result_Label.Text to block with the + block and snap it into the then slot of your if/then block.Drag all of that into the when Calculate_Button.Click do block. It should look like this.

  1. We need to fill in the "if" part of the of the If/then block.

    1. Snap an = block into the if slot. = is a Built-In block in the Math section.

    1. Now add a ListPicker1.Selection block and a text block to the equals. A text block is found under the Built-In tab. Click on the text box and change the text to +:

  1. Now, when you click the Calculate_Button, if the ListPicker1 selection is +, the app will add the two numbers together.

  2. Let us make subtraction work now. Build another If/then block like the one above but change the text to - and the + math block to - .

Test out your app. You should be able to add and subtract numbers now.

Challenge Stuff

Here are some thing to try:

Regular Challenge: Add multiplication and division functions to your app.

Super Hard Challenge: Add exponents and root functions to your app.

Developers Challenge: Make a copy of your Day3 project and rename it to a real app name. Change the background color, button and text fields to be more aesthetically pleasing. Make an icon for the app. Add your "company name" to the app. Basically, make this app look and feel like a professional app that belongs on a phone. Package your app to your phone.