npm package: @pageblock/attributes-countdown
Description: Create customizable countdown timers for Webflow with no-code.
Author: PageBlock
Latest version: 0.1.8

# @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
<!-- Add to the <head> section -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pageblock/attributes-countdown@latest/index.css">

<!-- Add before </body> -->
<script src="https://cdn.jsdelivr.net/npm/@pageblock/attributes-countdown@latest/index.js"></script>
```

### 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
<!-- Countdown Container -->
<div data-pb-countdown="2025-12-31T23:59:59">
  <!-- Days -->
  <div data-pb-countdown-unit="days">
    <span data-pb-countdown-value>00</span>
    <span data-pb-countdown-label>Days</span>
  </div>
  
  <!-- Hours -->
  <div data-pb-countdown-unit="hours">
    <span data-pb-countdown-value>00</span>
    <span data-pb-countdown-label>Hours</span>
  </div>
  
  <!-- Minutes -->
  <div data-pb-countdown-unit="minutes">
    <span data-pb-countdown-value>00</span>
    <span data-pb-countdown-label>Minutes</span>
  </div>
  
  <!-- Seconds -->
  <div data-pb-countdown-unit="seconds">
    <span data-pb-countdown-value>00</span>
    <span data-pb-countdown-label>Seconds</span>
  </div>
</div>
```

### 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