Skip to content

Commit e3cd097

Browse files
fromdevfromdev
authored
Create Click-Counter.html
Create Click-Counter.html
1 parent 1c3dfae commit e3cd097

1 file changed

Lines changed: 139 additions & 0 deletions

File tree

‎Click-Counter.html‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
<!-- HTML HEAD and styles remain unchanged... -->
2+
<!-- BODY below with changes marked inline -->
3+
4+
<body>
5+
<div class="app">
6+
<div class="click-display" id="clickCount">0</div>
7+
<div class="controls">
8+
<button class="btn minus" id="decrementClick">-</button>
9+
<button class="btn reset" id="resetClick">Reset</button>
10+
<button class="btn plus" id="incrementClick">+</button>
11+
</div>
12+
</div>
13+
14+
<footer>
15+
<h2>Click Counter - Free, Instant Online Click Tracker</h2>
16+
<p>
17+
Welcome to <strong>Click Counter</strong> — the fastest and simplest way to count button clicks online. Whether you're testing, training, or just tracking anything, this tool keeps it easy and accurate.
18+
</p>
19+
<p>
20+
It's mobile-responsive, private, and doesn't require downloads or sign-ins. Your count is now saved automatically, even if you close your browser.
21+
</p>
22+
23+
<h2>Top 10 Uses for Click Counter (FAQ)</h2>
24+
25+
<h3>1. What is Click Counter used for?</h3>
26+
<p>Click Counter is perfect for counting button presses in real-time for any task—training, tallying, or tracking events.</p>
27+
28+
<h3>2. Can I use this for reps at the gym?</h3>
29+
<p>Yes! It’s great for counting reps, sets, or circuits during fitness routines.</p>
30+
31+
<h3>3. Is Click Counter useful for testing CPS (Clicks Per Second)?</h3>
32+
<p>Absolutely. You can use it alongside a stopwatch to test CPS manually.</p>
33+
34+
<h3>4. Can teachers use it in classrooms?</h3>
35+
<p>Yes, teachers use it to track student participation, group responses, or attendance.</p>
36+
37+
<h3>5. Is it good for board games?</h3>
38+
<p>Definitely. Use it to keep score or track turns in board and card games.</p>
39+
40+
<h3>6. Can I use it for inventory counting?</h3>
41+
<p>Yes. Warehouse teams use it for fast manual stock tallies without a clipboard.</p>
42+
43+
<h3>7. Is it safe for kids?</h3>
44+
<p>It’s completely safe — no ads, no tracking, no downloads. A fun counting tool for all ages.</p>
45+
46+
<h3>8. Does it work offline?</h3>
47+
<p>Once loaded, yes — and future versions may fully support offline progressive web app (PWA) mode.</p>
48+
49+
<h3>9. Can I bookmark it for daily use?</h3>
50+
<p>Yes, you can bookmark it or add it to your mobile home screen for quick access.</p>
51+
52+
<h3>10. What makes Click Counter better than physical clickers?</h3>
53+
<p>It’s free, stylish, and always with you — on any phone, tablet, or computer, with local save support.</p>
54+
</footer>
55+
56+
<script>
57+
const clickCountEl = document.getElementById('clickCount');
58+
const incrementClickBtn = document.getElementById('incrementClick');
59+
const decrementClickBtn = document.getElementById('decrementClick');
60+
const resetClickBtn = document.getElementById('resetClick');
61+
62+
let clickCount = 0;
63+
64+
function loadClickCount() {
65+
const saved = localStorage.getItem('clickCounterValue');
66+
if (saved !== null) {
67+
clickCount = parseInt(saved);
68+
clickCountEl.textContent = clickCount;
69+
}
70+
}
71+
72+
function saveClickCount() {
73+
localStorage.setItem('clickCounterValue', clickCount);
74+
}
75+
76+
function updateClickCount(value) {
77+
clickCount += value;
78+
clickCountEl.textContent = clickCount;
79+
clickCountEl.classList.add('animate');
80+
saveClickCount();
81+
setTimeout(() => clickCountEl.classList.remove('animate'), 200);
82+
}
83+
84+
function resetClickCount() {
85+
clickCount = 0;
86+
clickCountEl.textContent = clickCount;
87+
saveClickCount();
88+
}
89+
90+
function createRipple(e, btn) {
91+
const ripple = document.createElement('span');
92+
const rect = btn.getBoundingClientRect();
93+
const size = Math.max(btn.clientWidth, btn.clientHeight);
94+
ripple.className = 'ripple';
95+
ripple.style.width = ripple.style.height = size + 'px';
96+
ripple.style.left = (e.clientX - rect.left - size / 2) + 'px';
97+
ripple.style.top = (e.clientY - rect.top - size / 2) + 'px';
98+
btn.appendChild(ripple);
99+
setTimeout(() => ripple.remove(), 600);
100+
}
101+
102+
incrementClickBtn.addEventListener('click', (e) => {
103+
updateClickCount(1);
104+
createRipple(e, incrementClickBtn);
105+
});
106+
107+
decrementClickBtn.addEventListener('click', (e) => {
108+
updateClickCount(-1);
109+
createRipple(e, decrementClickBtn);
110+
});
111+
112+
resetClickBtn.addEventListener('click', (e) => {
113+
resetClickCount();
114+
createRipple(e, resetClickBtn);
115+
});
116+
117+
document.addEventListener('keydown', (e) => {
118+
if (e.key === '+' || e.key === '=' || e.key === 'ArrowUp') {
119+
updateClickCount(1);
120+
} else if (e.key === '-' || e.key === 'ArrowDown') {
121+
updateClickCount(-1);
122+
} else if (e.key.toLowerCase() === 'r') {
123+
resetClickCount();
124+
}
125+
});
126+
127+
document.addEventListener('touchend', (e) => {
128+
const now = new Date().getTime();
129+
if (now - lastTap <= 300) {
130+
e.preventDefault();
131+
}
132+
lastTap = now;
133+
}, { passive: false });
134+
135+
let lastTap = 0;
136+
loadClickCount();
137+
</script>
138+
</body>
139+
</html>

0 commit comments

Comments
 (0)