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>
<button type="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>
<text class="text">{{count}}</text>
</div>
<div style="justify-content: flex-end;">
<button style="margin-right: 250px;margin-top: 100px;" type="circle" if="{{appear}}" icon="/common/images/minus.png" on:click="subtract"></button>
<button type="circle" style="margin-left: 25px;margin-top: 100px" if="{{appear}}" icon="/common/images/plus.png" on:click="add"></button>
</div>
<div>
<button type="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;
}