How do I implement a simple counter on Appsmith?

How do I do X?
1

How can we implement a simple counter to add and delete points on Appsmith with local variables?

2

To implement a simple counter on Appsmith, we’ll need to use the storeValue function from the framework and JavaScript.

First, on the input widget, set the Default Text property to {{appsmith.store.value || "0"}}. This will display the number in the value variable on the Appsmith store. If not, you can define it by using storeValue("value", 0).

Next, add two buttons next to the input widget, and set their labels to + and -.

For the + (add) button, update the onClick property to the following:

{{storeValue('value', parseInt(Input1.text) + 1)}}

For the - (add) button, update the onClick property to the following:

{{storeValue('value', parseInt(Input1.text) - 1)}}

With this, when the buttons are clicked, we should see the value on the input widget automatically updated.

The following question is also discussed on How Do I Do X on Appsmith Session on our community call. Watch it here: How Do I Do X? - YouTube