1. Copy to Clipboard
2. Tooltip
3. Show Current Date
4. Responsive Image
5. Highlighted Code Block
<div class="alert alert-info">This is an alert!</div>This is an alert!
6. CSS Centering (Flexbox)
Use Flexbox to perfectly center elements both vertically and horizontally.
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background: #eef;
border: 1px dashed #99c;
}
🎯 I'm centered!
7. Dark Mode Toggle
8. Auto-Growing Textarea
9. HTML5 Form Validation
10. Scroll to Top Button
11. Debounce Function
This example increases a counter only when you resize the window, but thanks to debounce(), it won’t trigger too fast.
function debounce(fn, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
Resize Counter: 0
12. Countdown Timer
10
14. Toggle Visibility
15. Copy Arbitrary Text
16. User Timezone
17. Smooth Scroll
<button onclick="document.getElementById('targetSection').scrollIntoView({ behavior: 'smooth' })">Go to Section</button>
You've arrived!
18. Detect Mobile Device
19. Save Text in Local Storage
20. Mouse Coordinates
Move your mouse...