<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Counter</title></head><body><templateid="counter-template"><divclass="counter-component"><buttonclass="increment-counter">+</button><spanclass="counter">0</span><buttonclass="decrement-counter">-</button><divclass="inspirational-message"></div></div></template><divid="root"></div><script>classCounter{data={_counter:0,messages:[{start:0,end:9,message:'Go on with it!'},{start:10,end:15,message:'頑張って!'},{start:16,end:25,message:'Sauba'},{start:26,end:50,message:'Good Job'},]};rootEl;constructor(){let_this=this;vartemplate=document.getElementById("counter-template");this.rootEl=template.content.cloneNode(true).children[0];document.querySelector("#root").appendChild(this.rootEl);// define propertiesObject.defineProperty(this.data,"counter",{get(){returnthis._counter;},set(value){this._counter=value;_this.updateUI();}});letincBtn=this.rootEl.querySelector(".increment-counter");incBtn.addEventListener('click',(e)=>_this.increment(e));letdecBtn=this.rootEl.querySelector(".decrement-counter");decBtn.addEventListener('click',(e)=>_this.decrement(e));this.updateUI()}updateUI(){constcount=this.data.counter;const{message}=this.data.messages.find(({start,end})=>count>=start&&count<=end)this.rootEl.querySelector(".counter").innerHTML=count;this.rootEl.querySelector(".inspirational-message").innerText=message}increment(e){if(this.data.counter<50){this.data.counter++;}}decrement(e){if(this.data.counter>0){this.data.counter--}}}varpageComponents=[newCounter(),newCounter()];</script></body></html>
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
How about this?