# @pageblock/attributes-countdown
Create customizable countdown timers for Webflow with no-code.
## Features
- **Multiple formats**: Days, hours, minutes, seconds
- **Customizable display**: Show/hide specific units, customize labels
- **Expiration handling**: Custom actions when countdown reaches zero
- **Timezone support**: Accurate across different timezones
- **Event callbacks**: Hooks for tick and complete events
- **No dependencies**: Pure JavaScript with no external libraries required
## Installation
### CDN (Recommended for Webflow)
```html
```
### NPM
```bash
npm install @pageblock/attributes-countdown
```
```javascript
import { Countdown } from '@pageblock/attributes-countdown';
import '@pageblock/attributes-countdown/index.css';
```
## Usage
### Basic HTML Structure
```html
00Days
00Hours
00Minutes
00Seconds
```
### JavaScript API
```javascript
// Initialize all countdowns on the page
PageBlockCountdown.init();
// Create a new countdown programmatically
PageBlockCountdown.create({
target: document.querySelector('#my-countdown'),
endDate: '2025-12-31T23:59:59',
onTick: (remaining) => {
console.log('Remaining time:', remaining);
},
onComplete: () => {
console.log('Countdown completed!');
}
});
```
## Configuration Options
### Data Attributes
- `data-pb-countdown`: The end date in ISO format (e.g., "2025-12-31T23:59:59")
- `data-pb-countdown-unit`: The unit type ("days", "hours", "minutes", "seconds")
- `data-pb-countdown-value`: The element that will display the value
- `data-pb-countdown-label`: The element that will display the label
- `data-pb-countdown-timezone`: Optional timezone (e.g., "America/New_York")
- `data-pb-countdown-format`: Optional format for the values (e.g., "00" for leading zeros)
- `data-pb-countdown-hide-zero`: Optional attribute to hide units when they reach zero
### Event Listeners
```javascript
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('[data-pb-countdown]').forEach(countdown => {
countdown.addEventListener('countdown:tick', function(event) {
console.log(`Countdown tick: ${event.detail.remaining}`);
// Add your analytics code here
});
countdown.addEventListener('countdown:complete', function(event) {
console.log(`Countdown completed!`);
// Add your analytics code here
});
});
});
```
## License
MIT