အခမဲ့ အွန်လိုင်းရေတွက်မှတ်တမ်းစက်

မည်သို့ အလုပ်လုပ်သည်

ဤ tally counter သည် React state နှင့် browser ပါ localStorage API ကို သုံး၍ သင့် browser ထဲတွင် လုံးဝ အလုပ်လုပ်သည် — server၊ အကောင့် မရှိပါ၊ ဘယ်နေရာသို့မှ data မပို့ပါ။ စာမျက်နှာ refresh လုပ်ခြင်းတွင် counts များ အလိုအလျောက် ရှင်သန်နေပြီး fullscreen mode သည် ရေတွက်နေစဉ် သင့်ဖန်သားပြင်ကို ဖွင့်ထားရန် Screen Wake Lock API ကို သုံးသည်။

1. 1
   State သည် localStorage တွင် နေထိုင်သည်

   စာမျက်နှာ ဖွင့်သောအခါ ကိရိယာသည် ကိန်းသေ key တစ်ခုအောက်တွင် localStorage မှ ယခင်သိမ်းထားသော counter များကို ဖတ်သည်။ Counter တစ်ခုစီ — ၎င်း၏ label၊ လက်ရှိတန်ဖိုး၊ step size နှင့် allow-negative flag — ကို JSON အဖြစ် serialize လုပ်ပြီး ပြောင်းလဲမှုတိုင်းတွင် localStorage သို့ ပြန်ရေးသဖြင့် သင့် count များသည် tab မတော်တဆ ပိတ်ခြင်း သို့မဟုတ် refresh ကို ရှင်သန်စေသည်။
2. 2
   React state မှတစ်ဆင့် တိုးခြင်း/လျှော့ခြင်း

   + သို့မဟုတ် အလယ်ရှိ ကြီးမားသော ခလုတ်ကို နှိပ်ခြင်းသည် သတ်မှတ်ထားသော step တန်ဖိုးကို counter ၏ လက်ရှိတန်ဖိုးသို့ ထည့်ပေးသော updater ကို ခေါ်သည်။ allow-negative ပိတ်ထားလျှင် ရလဒ်ကို Math.max ဖြင့် သုညသို့ clamp လုပ်သည်။ Keyboard shortcut များ (Space/+ = တိုးရန်၊ -/Backspace = လျှော့ရန်) ကို လက်ရှိ active ဖြစ်သော counter ကို ပစ်မှတ်ထားသော window keydown listener တစ်ခုဖြင့် ချိတ်ဆက်ထားသည်။
3. 3
   Screen Wake Lock ပါသော Fullscreen mode

   Fullscreen mode သို့ ဝင်ခြင်းသည် ဖန်သားပြင်တစ်ခုလုံးကို tap target အဖြစ် ပြသည့် overlay တစ်ခု render လုပ်သည်။ တစ်ချိန်တည်းတွင် ကိရိယာသည် navigator.wakeLock.request('screen') မှတစ်ဆင့် wake lock ကို တောင်းသည် — ဖန်သားပြင် အိပ်ခြင်းကို ရပ်တန့်ရန် OS ကို တောင်းဆိုသော browser API ဖြစ်သည်။ Tab ကို background တွင်ထားပြီး ပြန်မြင်နိုင်သောအခါ lock ကို အလိုအလျောက် ပြန်ရယူသည်။
4. 4
   စုစုပေါင်း ပါသော counter များစွာ

   Counter ဒုတိယတစ်ခု ထည့်ခြင်းသည် crypto.randomUUID()-ဖြင့် ဖန်တီးထားသော ID ပါသော entry အသစ်တစ်ခုကို ဖန်တီးသည်။ Counter တစ်ခုထက်ပိုရှိပါက တန်ဖိုးအားလုံးကို ပေါင်းစုပြီး counter list အထက်တွင် ပြသည်။ Counter တစ်ခုစီတွင် သီးခြား step၊ reset နှင့် allow-negative setting များ ရှိသည်။

ဆက်နွှယ်သော ကိရိယာများ