ಉಚಿತ ಆನ್‌ಲೈನ್ ಟ್ಯಾಲಿ ಕೌಂಟರ್

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಈ ಟ್ಯಾಲಿ ಕೌಂಟರ್ React ಸ್ಥಿತಿ ಮತ್ತು ಬ್ರೌಸರ್‌ನ ಅಂತರ್ನಿರ್ಮಿತ localStorage API ಬಳಸಿ ಸಂಪೂರ್ಣವಾಗಿ ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ — ಯಾವುದೇ ಸರ್ವರ್ ಇಲ್ಲ, ಖಾತೆ ಇಲ್ಲ, ಮತ್ತು ಯಾವುದೇ ಡೇಟಾ ಎಲ್ಲಿಯೂ ಕಳುಹಿಸಲಾಗುವುದಿಲ್ಲ. ಪುಟ ರಿಫ್ರೆಶ್ ಆದಾಗಲೂ ಎಣಿಕೆಗಳು ತಾವಾಗಿಯೇ ಉಳಿಯುತ್ತವೆ, ಮತ್ತು ಪೂರ್ಣ ಪರದೆ ಮೋಡ್ ಎಣಿಸುವಾಗ ನಿಮ್ಮ ಪ್ರದರ್ಶನವನ್ನು ಆನ್ ಆಗಿ ಇಡಲು Screen Wake Lock API ಬಳಸುತ್ತದೆ.

1. 1
   ಸ್ಥಿತಿ localStorage ನಲ್ಲಿ ಇರುತ್ತದೆ

   ಪುಟ ಲೋಡ್ ಆದಾಗ, ಟೂಲ್ ಒಂದು ನಿಗದಿತ ಕೀ ಅಡಿಯಲ್ಲಿ localStorage ನಿಂದ ಹಿಂದೆ ಉಳಿಸಿದ ಯಾವುದೇ ಕೌಂಟರ್‌ಗಳನ್ನು ಓದುತ್ತದೆ. ಪ್ರತಿ ಕೌಂಟರ್ — ಅದರ ಲೇಬಲ್, ಪ್ರಸ್ತುತ ಮೌಲ್ಯ, ಹೆಜ್ಜೆ ಗಾತ್ರ, ಮತ್ತು ಋಣಾತ್ಮಕ-ಅನುಮತಿ ಫ್ಲ್ಯಾಗ್ — ಪ್ರತಿ ಬದಲಾವಣೆಯಲ್ಲಿ JSON ಆಗಿ ಸೀರಿಯಲೈಸ್ ಮಾಡಿ localStorage ಗೆ ಮತ್ತೆ ಬರೆಯಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ಆಕಸ್ಮಿಕ ಟ್ಯಾಬ್ ಮುಚ್ಚುವಿಕೆ ಅಥವಾ ರಿಫ್ರೆಶ್‌ಗಳಿಂದ ನಿಮ್ಮ ಎಣಿಕೆಗಳು ಉಳಿಯುತ್ತವೆ.
2. 2
   React ಸ್ಥಿತಿ ಮೂಲಕ ಹೆಚ್ಚಳ/ಇಳಿಕೆ

   + ಅಥವಾ ದೊಡ್ಡ ಮಧ್ಯದ ಬಟನ್ ಒತ್ತುವುದರಿಂದ ಕೌಂಟರ್‌ನ ಪ್ರಸ್ತುತ ಮೌಲ್ಯಕ್ಕೆ ಸಂರಚಿಸಿದ ಹೆಜ್ಜೆ ಮೌಲ್ಯವನ್ನು ಸೇರಿಸುವ ಅಪ್‌ಡೇಟರ್ ಅನ್ನು ಕರೆಯಲಾಗುತ್ತದೆ. ಋಣಾತ್ಮಕ-ಅನುಮತಿ ಆಫ್ ಆಗಿದ್ದರೆ, ಫಲಿತಾಂಶವನ್ನು Math.max ಬಳಸಿ ಶೂನ್ಯಕ್ಕೆ ಕ್ಲ್ಯಾಂಪ್ ಮಾಡಲಾಗುತ್ತದೆ. ಕೀಬೋರ್ಡ್ ಶಾರ್ಟ್‌ಕಟ್‌ಗಳು (ಹೆಚ್ಚಿಸಲು Space/+, ಕಡಿಮೆ ಮಾಡಲು -/Backspace) ಸಕ್ರಿಯವಾಗಿರುವ ಕೌಂಟರ್ ಅನ್ನು ಗುರಿಯಾಗಿಸುವ window keydown ಲಿಸನರ್ ಮೂಲಕ ಸಂಪರ್ಕಗೊಂಡಿವೆ.
3. 3
   Screen Wake Lock ಜೊತೆ ಪೂರ್ಣ ಪರದೆ ಮೋಡ್

   ಪೂರ್ಣ ಪರದೆ ಮೋಡ್ ಪ್ರವೇಶಿಸುವುದರಿಂದ ಇಡೀ ಪರದೆ ಟ್ಯಾಪ್ ಗುರಿಯಾಗಿರುವ ಒಂದು ಓವರ್‌ಲೇ ರೆಂಡರ್ ಆಗುತ್ತದೆ. ಅದೇ ಸಮಯದಲ್ಲಿ, ಟೂಲ್ navigator.wakeLock.request('screen') ಮೂಲಕ ವೇಕ್ ಲಾಕ್ ವಿನಂತಿಸುತ್ತದೆ — ಇದು OS ಗೆ ಪರದೆ ನಿದ್ರೆಯನ್ನು ನಿಗ್ರಹಿಸಲು ಕೇಳುವ ಬ್ರೌಸರ್ API. ಟ್ಯಾಬ್ ಹಿನ್ನೆಲೆಗೆ ಹೋದ ನಂತರ ಮತ್ತೆ ಗೋಚರಿಸಿದರೆ ಲಾಕ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರುಸ್ಥಾಪಿಸಲಾಗುತ್ತದೆ.
4. 4
   ಒಟ್ಟು ಮೊತ್ತದೊಂದಿಗೆ ಬಹು ಕೌಂಟರ್‌ಗಳು

   ಎರಡನೇ ಕೌಂಟರ್ ಸೇರಿಸುವುದರಿಂದ crypto.randomUUID()-ರಚಿತ ID ಯೊಂದಿಗೆ ಹೊಸ ನಮೂದನ್ನು ಸೃಷ್ಟಿಸಲಾಗುತ್ತದೆ. ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ಕೌಂಟರ್‌ಗಳಿದ್ದಾಗ, ಎಲ್ಲಾ ಮೌಲ್ಯಗಳನ್ನು ಒಟ್ಟುಗೂಡಿಸಿ ಸಂಯೋಜಿತ ಒಟ್ಟು ಮೊತ್ತವನ್ನು ಲೆಕ್ಕಹಾಕಿ ಕೌಂಟರ್ ಪಟ್ಟಿಯ ಮೇಲೆ ತೋರಿಸಲಾಗುತ್ತದೆ. ಪ್ರತಿ ಕೌಂಟರ್‌ಗೆ ಸ್ವತಂತ್ರ ಹೆಜ್ಜೆ, ರೀಸೆಟ್, ಮತ್ತು ಋಣಾತ್ಮಕ-ಅನುಮತಿ ಸೆಟ್ಟಿಂಗ್‌ಗಳಿವೆ.

ಸಂಬಂಧಿತ ಪರಿಕರಗಳು