## Spec for "Countdown Timer" Plugin...

A configurable countdown timer widget that can be added to any web page

## Table of Contents​

- [Spec for "Countdown Timer" Plugin...](#spec-for-%22countdown-timer%22-plugin)
- [Table of Contents​](#table-of-contents%e2%80%8b)
- [Workflow](#workflow)
- [User Stories](#user-stories)
- [Screens / States​](#screens--states%e2%80%8b)
- [Sections Used](#sections-used)
- [Test Plan](#test-plan)

## Workflow

(N/A)​

## User Stories

As a user, I can...

- As a user, I would like a few countdown timer options to place on my pages
- As a user, I would like to count down to a date and time I specify
- As a user, I would like to count down to a date/time that's based on first visit to site
- As a user, I would like to set the time zone
- As a user, I would like an option to have a dynamic timer that shows a countdown to the top of the hour (e.g. 13 min till 9:00)
- As a user, I would like an option to have a dynamic timer that shows a countdown to the next 15 min time (e.g. 13 min till 9:45)
- As a user, I would like the time to be preserved between page visits (cookies)
- As a user, I would like an ability to count down using just minutes (not hh:mm:ss)
- As a user, I would like to be able to count down until midnight (mm:ss)
- As a user, I would like to control basic layout (width, height, alignment, up/down position)
- As a user, I would like to control the time dimension (e.g. turn on/off day, hour, min, sec, divider, label)
- As a user, I would like to control basic design (of dimensional objects) - font, color, background, border, shadow, inner design
- As a user, I would like to perform a specified action once the timer is complete (redirect to next page, specific page, url, show popup, tag, etc.)

## Screens / States​

![](http://ambid-backups.s3.amazonaws.com/screenshots/countdown-widget.png)

## Sections Used

- Time and Date
  - Countdown to an event (date, hore, min, second, timezone)
  - Countdown from time of first visit (hour, minute, second)
- Presets
- More Time Options
  - Toggle on/off day, min, hour, etc.
- Position & Size
- Alignment
- Typography
- Background
- Padding & Spacing
- Borders & Shadow

## Test Plan

| √   | Scenario                                                            | Expected                                                                         |
| --- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
| √   | When a user opens the [add new] tab                                 | A [Countdown Widget] appears                                                     |
| √   | When a user drags the countdown widget to the canvas                | A simple countdown timer appears                                                 |
| √   | When a user clicks the [*] button on the widget                     | The countdown timer properties box appears                                       |
| √   | When a user configures which time dimensions show                   | Timer settings adjust accordingly (both editor & live mode)                      |
| √   | When a user changes the layout (align, position)                    | Timer settings adjust accordingly (both editor & live mode)                      |
| √   | When a user configures the design (font, color, bg, border, shadow) | Timer settings adjust accordingly (both editor & live mode)                      |
| √   | When a user specifies a countdown date/time                         | The countdown timer adjusts to begin counting down from specified date           |
| √   | When a user publishes a page with the countdown                     | The destination page shows the countdown as specified on the live page           |
| √   | When a user specifies an post timer action (redirect, popup, tag)   | Timer settings adjust accordingly (both editor & live mode)                      |
| √   | When a user specifies a date based on first visit                   | Live page sets the countdown time based on first visit date (as seen in cookies) |
| x   | When a user chooses a preset                                        | Timer settings overwrite to the preset settings                                  |