A Simple OpenHarmony API Version 8 Based Counter App in Javascript.
The entire Application can be viewed from by clicking here
When the app starts, first screen has the counter value set to 0 and a start button.
<div><buttontype="capsule"style="margin-top: 100px;font-size: 50px;background-color: blueviolet;color: white;"if="{{!appear}}"on:click="start">Start Counter</button></div>
When the Start Counter button is clicked, the UI changes to a simple counter UI that has a add button, subtract button, a reset button and a text field. UI can be added with below code.
<div><textclass="text">{{count}}</text></div><divstyle="justify-content: flex-end;"><buttonstyle="margin-right: 250px;margin-top: 100px;"type="circle"if="{{appear}}"icon="/common/images/minus.png"on:click="subtract"></button><buttontype="circle"style="margin-left: 25px;margin-top: 100px"if="{{appear}}"icon="/common/images/plus.png"on:click="add"></button></div><div><buttontype="capsule"if="{{appear}}"style="margin-bottom: 50px;background-color: blueviolet;color: white;"on:click="reset">Reset</button></div>
Event handlers are used to handle events associated with increment, decrement and reset of the counter value.
data: {count: 0,appear: false},start(){this.appear=true;},add(){this.count=this.count+1;},subtract(){if(this.count>0){this.count=this.count-1;}else{this.count=0;}},reset(){this.count=0;}