സൗജന്യ ഓൺലൈൻ ടാലി കൗണ്ടർ

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു

ഈ ടാലി കൗണ്ടർ React സ്റ്റേറ്റും ബ്രൗസറിന്റെ ബിൽറ്റ്-ഇൻ localStorage API-യും ഉപയോഗിച്ച് പൂർണ്ണമായും നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിക്കുന്നു — സെർവറില്ല, അക്കൗണ്ടില്ല, എവിടെയും ഡാറ്റ അയക്കുന്നില്ല. കൗണ്ടുകൾ പേജ് പുതുക്കലുകളെ സ്വയമേവ അതിജീവിക്കുന്നു, ഫുൾസ്ക്രീൻ മോഡ് കൗണ്ട് ചെയ്യുമ്പോൾ നിങ്ങളുടെ ഡിസ്‌പ്ലേ ഓണായി നിലനിർത്താൻ Screen Wake Lock API ഉപയോഗിക്കുന്നു.

1. 1
   സ്റ്റേറ്റ് localStorage-ൽ ജീവിക്കുന്നു

   പേജ് ലോഡ് ചെയ്യുമ്പോൾ, ഈ ടൂൾ ഒരു നിശ്ചിത കീയിൽ localStorage-ൽ നിന്ന് മുമ്പ് സേവ് ചെയ്ത കൗണ്ടറുകൾ വായിക്കുന്നു. ഓരോ കൗണ്ടറും — അതിന്റെ ലേബൽ, നിലവിലെ മൂല്യം, സ്റ്റെപ്പ് വലുപ്പം, negative അനുവദിക്കൽ ഫ്ലാഗ് — JSON ആയി സീരിയലൈസ് ചെയ്ത് ഓരോ മാറ്റത്തിലും localStorage-ലേക്ക് തിരികെ എഴുതപ്പെടുന്നു, അതിനാൽ അബദ്ധത്തിൽ ടാബ് അടയ്ക്കുകയോ പുതുക്കുകയോ ചെയ്താലും നിങ്ങളുടെ കൗണ്ടുകൾ നിലനിൽക്കും.
2. 2
   React സ്റ്റേറ്റ് വഴി വർദ്ധിപ്പിക്കൽ/കുറയ്ക്കൽ

   + അല്ലെങ്കിൽ വലിയ സെന്റർ ബട്ടൺ ടാപ്പ് ചെയ്യുന്നത് കോൺഫിഗർ ചെയ്ത സ്റ്റെപ്പ് മൂല്യം കൗണ്ടറിന്റെ നിലവിലെ മൂല്യത്തിലേക്ക് ചേർക്കുന്ന ഒരു അപ്ഡേറ്റർ വിളിക്കുന്നു. negative അനുവദിക്കൽ ഓഫ് ആണെങ്കിൽ, ഫലം Math.max ഉപയോഗിച്ച് പൂജ്യത്തിൽ ക്ലാമ്പ് ചെയ്യപ്പെടുന്നു. കീബോർഡ് ഷോർട്ട്കട്ടുകൾ (വർദ്ധിപ്പിക്കാൻ Space/+, കുറയ്ക്കാൻ -/Backspace) ഏത് കൗണ്ടർ സജീവമാണോ അതിനെ ലക്ഷ്യമാക്കുന്ന ഒരു window keydown ലിസണർ വഴി വയർ ചെയ്തിരിക്കുന്നു.
3. 3
   Screen Wake Lock ഉള്ള ഫുൾസ്ക്രീൻ മോഡ്

   ഫുൾസ്ക്രീൻ മോഡിലേക്ക് പ്രവേശിക്കുന്നത് മുഴുവൻ സ്ക്രീനും ടാപ്പ് ടാർഗെറ്റ് ആയ ഒരു ഓവർലേ റെൻഡർ ചെയ്യുന്നു. അതേസമയം, ടൂൾ navigator.wakeLock.request('screen') വഴി ഒരു വേക്ക് ലോക്ക് അഭ്യർത്ഥിക്കുന്നു — സ്ക്രീൻ സ്ലീപ്പ് അടിച്ചമർത്താൻ OS-നോട് ആവശ്യപ്പെടുന്ന ഒരു ബ്രൗസർ API. ടാബ് പശ്ചാത്തലത്തിലായ ശേഷം ദൃശ്യപരത വീണ്ടെടുത്താൽ ലോക്ക് സ്വയമേവ വീണ്ടും നേടും.
4. 4
   സംയോജിത ആകെത്തുകയുള്ള ഒന്നിലധികം കൗണ്ടറുകൾ

   രണ്ടാമത്തെ കൗണ്ടർ ചേർക്കുന്നത് crypto.randomUUID()-സൃഷ്ടിച്ച ഒരു ID-യുള്ള ഒരു പുതിയ എൻട്രി സൃഷ്ടിക്കുന്നു. ഒന്നിലധികം കൗണ്ടറുകൾ ഉള്ളപ്പോൾ, എല്ലാ മൂല്യങ്ങളും കൂട്ടിച്ചേർത്ത് ഒരു സംയോജിത ആകെത്തുക കണക്കാക്കി കൗണ്ടർ ലിസ്റ്റിന് മുകളിൽ കാണിക്കുന്നു. ഓരോ കൗണ്ടറിനും സ്വതന്ത്ര സ്റ്റെപ്പ്, റീസെറ്റ്, negative അനുവദിക്കൽ സെറ്റിംഗ്സ് ഉണ്ട്.

അനുബന്ധ ടൂളുകൾ