How to design a display of increasing and decreasing numbers

In this article, you’ll learn how to design a counter display in which you can also subtract.

Here’s is how you build it:

View

• Place an “Input text field” from the “Interactive input fields” section on the canvas.
• With the “Input text field” selected, go to the Properties palette and write the number “0” for the value.
  
• To finish your view place two “Button” next to your input (you have to double-click each button and write the symbols for increment and decrement “+” & “-“).
  

Events

Select the button with the “+” symbol, then go to the Events palette and click “Add event”.

1. In the dialog box, click on “Choose Trigger”, hover over the “Mouse” section, and select “on Click”.
2. In “Choose Action”, select “Set value to an element” and click on the “Input text field”.
3. Select the “Calculated” radio button for the value and click “Add expression”.
4. In the expression builder, drag the input text to the first value, then drag the “+” function and write “1” in the last spot of the expression. Click “Ok” and “Ok” to finish creating the event.

To complete your counter replicate this event for the button “-” and in the last step, drag the “-” function.

Simulate your prototype.