Challenge Guideline: Timer

:video_game: Activity Time!

Time needed: 30-35 minutes

What you'll do

Build your own countdown timer app with alarm sounds! You'll create buttons to set the time, start the countdown, and play an alarm when time's up. It's like having your own personal timer for games, homework, or cooking!

Please watch this video to see how this app works.

Before You Start:

:white_check_mark: Open MIT App Inventor
:white_check_mark: Create a new project called "MyTimer"
:white_check_mark: Have your alarm sound file ready (or use the default sounds)
:white_check_mark: Review the Clock component from the lesson

Sample UI and Components

Visible and non-visible components that you will be using to make the app:

Sample UI	Components
	Layouts: Vertical Arrangement Horizontal Arrangements Visible components: Buttons Labels TextBox Non-visible component: Clock Player

Programming Instructions

Let's build your timer step by step! :rocket:

Step One: Initialize Global Variable

Create a global variable for timer, and set it as 0.

:bulb: This variable will store how many seconds are left in your countdown!

Step 2: App Startup

When the app is opened, disable the timer.

Why? We don't want the timer to start counting down right away!

Step 3: Plus Button

When the Plus Button is clicked:

1. Set the timer variable to +1.
2. Update the text label of the timer.

:bulb: Stuck?

Remember: You need to add 1 to the current timer value, not just set it to 1! Use the math block: set global timer to (get global timer) + 1

Step 4: Minus Button

When the Minus Button is clicked:

1. Set the timer variable to -1.
2. Update the text label of the timer.

Step 5: Start Button

When the Start Button is clicked, enable the timer.

This makes the Clock component start ticking! :alarm_clock:

Step 6: Stop Button

When the Stop Button is clicked:

1. Disable the timer.
2. Reset the timer to 0 and update the text label.
3. Stop the alarm player.

Step 7: Timer Countdown Logic

When the timer is enabled (use the Clock.Timer event):

1. Program the timer variable to countdown (don't forget to update the text label!).
2. If the timer variable reaches 0:
   • Disable the timer.
   • Play the alarm (How to make the alarm plays forever? Hint: Loop).

:bulb: Stuck?

To countdown, subtract 1 from the timer variable each time! For the alarm loop, check the Player component properties - there's a "Loop" checkbox!

Step 8: Set Timer Button

When the Set Timer Button is clicked:

1. Set the timer variable to the time inside the textbox (How to only allow users to type in numbers? Hint: In the Designer Tab).
2. Update the text label of the timer.
3. Empty the textbox.

:trophy: Challenge Yourself!

Ready to make your timer even better? Try these extra features:

Challenge One: Minus Button Validation ⭐

Update your Step 4: The Minus Button should only work if the timer value is larger than 0.

Why? We don't want negative time! That would be weird! :emoji:

Challenge 2: Start Button Validation ⭐⭐

Update your Step 5: When the Start Button is clicked, the timer will only be enabled if the timer variable is more than 0.

This prevents starting an empty timer!

Challenge 3: Add a Pause Button ⭐⭐

Create a new button: When Pause Button is clicked, just disable the timer (different from Stop Button, where the timer resets).

This lets you pause and resume your countdown!

Challenge 4: Set Timer Validation ⭐⭐⭐

Update your Step 8: When the Set Timer Button is clicked:

1. If the textbox is empty:

   • Alert the user that "The textbox is empty!"

2. If the textbox is not empty:

   • The timer can only be entered if the value in the textbox is larger than 0.
   • Alert the user to "Please set the timer to any number larger than 0!" if the time in the textbox is not larger than 0.

:bulb: Stuck?

Use an if-then-else block to check if the textbox is empty first! Then inside the "else" part, check if the number is greater than 0.

Test Your App! :dart:

Before submitting, make sure:

• :white_check_mark: Plus and Minus buttons change the timer correctly
• :white_check_mark: Start button begins the countdown
• :white_check_mark: Stop button resets everything
• :white_check_mark: Alarm plays when timer reaches 0
• :white_check_mark: Set Timer button works with numbers
• :white_check_mark: All validation checks work properly

Great job building your timer app! You've learned how to use the Clock component and create a useful tool! :star2: